:root{
  --bg: #05070d;
  --bg-alt: #090c16;
  --navy-800: #0c1120;
  --navy-700: #121a30;
  --navy-600: #1a2542;
  --cyan-400: #00e0d1;
  --cyan-500: #00b8c4;
  --cyan-600: #0090a8;
  --white: #ffffff;
  --off-white: #f5f7fb;
  --gray-300: #b7c0d6;
  --gray-500: #7c86a3;
  --gray-700: #4d5670;
  --text-body: #c5cbdc;

  --grad-brand: linear-gradient(135deg, #0c1130 0%, #0090a8 60%, #00e0d1 100%);
  --grad-text: linear-gradient(90deg, var(--cyan-500), var(--cyan-400));

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --container: 1180px;

  --font-display: 'Anton', 'Fraunces', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .about__quote{ font-family: var(--font-display); }

img{ max-width: 100%; display: block; }
a{ text-decoration: none; color: inherit; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.grad-text{
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Grain overlay */
.grain{
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Progress bar */
.progress-bar{
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--grad-text);
  z-index: 1000;
  transition: width 0.1s ease-out;
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 0;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  white-space: nowrap;
  font-family: var(--font-body);
}
.btn--primary{
  background: var(--grad-text);
  color: #041018;
  box-shadow: 0 10px 34px rgba(0, 224, 209, 0.25);
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 224, 209, 0.35); }
.btn--ghost{
  background: rgba(255,255,255,0.04);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover{ background: rgba(255,255,255,0.09); transform: translateY(-2px); }
.btn--block{ width: 100%; }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.brand__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand__logo{ height: 56px; width: auto; object-fit: contain; display: block; }
.brand__badge--sm{}
.footer__logo{ height: 30px; width: auto; object-fit: contain; display: block; }

/* Header */
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  padding: 20px 0;
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.header.scrolled{
  background: rgba(5, 7, 13, 0.86);
  backdrop-filter: blur(14px);
  padding: 12px 0;
  border-bottom-color: rgba(255,255,255,0.06);
}
.header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand{ display: flex; align-items: center; gap: 10px; }
/* Three-column layout: an empty column balances the CTA's width so the
   link group lands visually centered in the bar, independent of the CTA. */
.nav{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.nav__links{
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-300);
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.nav a:hover{ color: var(--white); }
.nav__item{ position: relative; }
.nav__dropdown-trigger{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--gray-300);
  font-family: inherit;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.2s ease;
}
.nav__dropdown-trigger:hover,
.nav__dropdown-trigger:focus-visible{ color: var(--white); }
.nav__chevron{
  width: 9px;
  height: 9px;
  color: var(--gray-500);
  transition: transform 0.2s ease;
}
.nav__item--dropdown:hover .nav__chevron,
.nav__item--dropdown:focus-within .nav__chevron,
.nav__item--dropdown.is-open .nav__chevron{
  transform: rotate(180deg);
  color: var(--cyan-400);
}
/* No visual gap between trigger and panel: padding-top (not margin) keeps
   the hoverable area continuous, so moving the cursor down doesn't drop
   out of :hover between the link and the dropdown. */
.nav__dropdown{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  padding-top: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transition-delay: 0.15s;
  z-index: 950;
}
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown,
.nav__item--dropdown.is-open .nav__dropdown{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.nav__dropdown-inner{
  min-width: 260px;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 10px 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.nav__dropdown a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-size: 0.88rem;
  white-space: nowrap;
  color: var(--gray-300);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav__dropdown a:hover,
.nav__dropdown a:focus-visible{
  color: var(--cyan-400);
  background: rgba(0,224,209,0.06);
}
.nav__dropdown-dot{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gray-500);
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.nav__dropdown a:hover .nav__dropdown-dot,
.nav__dropdown a:focus-visible .nav__dropdown-dot{
  background: var(--cyan-400);
}
.nav__cta{
  grid-column: 3;
  justify-self: end;
  background: rgba(255,255,255,0.06);
  color: var(--white) !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.15);
}
.nav__cta:hover{ background: rgba(255,255,255,0.12); }
.menu-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.menu-toggle span{
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hero */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 160px 0 80px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,144,168,0.22), transparent),
    var(--bg);
  text-align: center;
}
.hero__bgvideo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__video-mask{
  position: absolute;
  inset: 0;
  background: rgba(26, 37, 66, 0.62); /* navy-600 — light-navy mask over the video */
  z-index: 1;
}
.hero__glow{
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,224,209,0.14) 0%, rgba(0,224,209,0) 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 2;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  transition: left 0.6s ease-out, top 0.6s ease-out;
  z-index: 0;
}
.hero__inner{ position: relative; z-index: 3; max-width: 900px; }
.hero__inner--center{
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.eyebrow{
  color: var(--cyan-400);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 26px;
}
.hero__title{
  color: var(--white);
  font-size: clamp(3.2rem, 8vw, 6.2rem);
  font-weight: 500;
  line-height: 1.05;
  margin-bottom: 34px;
  letter-spacing: -0.01em;
  max-width: 820px;
}
.hero__subtitle{
  color: var(--gray-300);
  font-size: 1.18rem;
  max-width: 620px;
  margin: 0 0 44px;
  font-weight: 400;
}
.hero__actions{ display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start; }
.hero__note{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  color: var(--gray-500);
  font-size: 0.85rem;
}
.hero__note-dot{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 8px 2px rgba(0,224,209,0.5);
  flex-shrink: 0;
}

.scroll-cue{
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 90px;
  color: var(--gray-500);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.scroll-cue__line{
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--gray-500), transparent);
}

/* Section shared */
.section__eyebrow{
  color: var(--cyan-500);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 18px;
}
.section__title{
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 500;
  max-width: 700px;
  margin-bottom: 24px;
  line-height: 1.25;
}
.section__title--light{ color: var(--white); }

/* Para quem é */
.fit{
  position: relative;
  overflow: hidden;
  padding: 130px 0 100px;
  background: var(--white);
  border-bottom: 1px solid rgba(6,13,31,0.08);
}
.fit > .container{ position: relative; z-index: 1; }
.dot-field-canvas,
.dot-field-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.fit .section__title{ color: var(--navy-800); }
.fit__intro{
  color: var(--navy-700);
  font-size: 1.12rem;
  max-width: 680px;
  margin-bottom: 48px;
}
.fit__list{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
  margin-bottom: 48px;
}
.fit__list li{
  position: relative;
  padding-left: 22px;
  color: var(--navy-700);
  font-size: 1.02rem;
  line-height: 1.55;
  border-left: 2px solid rgba(0,144,168,0.4);
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 20px;
}
.fit__closing{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--navy-800);
  max-width: 680px;
  line-height: 1.5;
  border-top: 1px solid rgba(6,13,31,0.12);
  padding-top: 32px;
}

/* Services / Soluções (accordion) */
.services{ padding: 100px 0 130px; background: var(--bg-alt); }
.services#solucoes{ background: var(--navy-700); }
.services__list{
  margin-top: 56px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.solution{ border-bottom: 1px solid rgba(255,255,255,0.08); }
.solution__trigger{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 34px 12px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.3s ease, padding-left 0.3s ease;
}
.solution__trigger:hover{ background: rgba(255,255,255,0.02); padding-left: 20px; }
.solution__idx{
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--cyan-500);
  min-width: 40px;
  flex-shrink: 0;
}
.solution__title-wrap{ flex: 1; display: flex; flex-direction: column; gap: 10px; }
.solution__title{
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 500;
}
.solution__desc{
  color: var(--gray-500);
  font-size: 0.98rem;
  max-width: 560px;
}
.solution__chevron{
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--gray-500);
  border-bottom: 2px solid var(--gray-500);
  transform: rotate(45deg);
  transition: transform 0.3s ease, border-color 0.3s ease;
  margin-right: 6px;
}
.solution__trigger[aria-expanded="true"] .solution__chevron{
  transform: rotate(-135deg);
  border-color: var(--cyan-400);
}
.solution__panel{
  color: var(--gray-300);
  font-size: 0.95rem;
  padding: 0 12px 0 92px;
}
.solution__panel p{ padding-bottom: 28px; }
.js .solution__panel{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
.js .solution__panel.is-open{
  max-height: 200px;
  opacity: 1;
}

/* Detailed solution blocks (Negócios page) */
.services__list--detailed{ border-top: none; margin-top: 0; }
.solution--detailed{
  padding: 44px 12px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.solution--detailed .solution__head{
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.solution--detailed .solution__title{
  display: block;
  margin-bottom: 10px;
}
.solution--detailed .solution__desc{ max-width: 640px; }
.solution__scope{
  margin-left: 72px;
  padding: 24px 28px;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  max-width: 620px;
}
.solution__scope-label{
  display: block;
  color: var(--cyan-400);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.solution__scope ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.solution__scope li{
  position: relative;
  padding-left: 20px;
  color: var(--gray-300);
  font-size: 0.95rem;
  line-height: 1.5;
}
.solution__more{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--cyan-400);
  font-weight: 600;
  font-size: 0.9rem;
  transition: opacity 0.2s ease;
}
.solution__more:hover{ opacity: 0.8; }
.solution__scope li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-400);
}

/* Portas de entrada */
.entry{ padding: 100px 0; background: var(--bg); border-top: 1px solid rgba(255,255,255,0.06); }
.entry__title{
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--white);
  font-weight: 500;
  max-width: 640px;
  margin-bottom: 18px;
}
.entry__text{
  color: var(--gray-500);
  font-size: 1.05rem;
  max-width: 640px;
  margin-bottom: 48px;
}
.entry__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}
.entry__card{
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 26px;
}
.entry__num{
  display: block;
  font-family: var(--font-display);
  color: var(--cyan-400);
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.entry__card p{ color: var(--off-white); font-size: 1.02rem; line-height: 1.5; }

/* Compare */
.compare{ padding: 130px 0; background: var(--white); border-top: 1px solid rgba(6,13,31,0.08); }
.compare .section__title{ color: var(--navy-800); }
.compare__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}
.compare__col{
  border-radius: var(--radius-lg);
  padding: 40px;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.06);
}
.compare__col--highlight{
  background: var(--grad-brand);
  border-color: transparent;
}
.compare__tag{
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0,224,209,0.15);
  color: var(--cyan-400);
  margin-bottom: 24px;
}
.compare__tag--muted{
  background: rgba(255,255,255,0.06);
  color: var(--gray-500);
}
.compare__list{ list-style: none; display: flex; flex-direction: column; gap: 18px; }
.compare__list li{
  position: relative;
  padding-left: 26px;
  color: var(--gray-300);
  font-size: 1rem;
  line-height: 1.5;
}
.compare__col--highlight .compare__list li{ color: rgba(255,255,255,0.92); }
.compare__col:not(.compare__col--highlight) .compare__list li::before{
  content: '×';
  position: absolute;
  left: 0;
  color: var(--gray-700);
  font-weight: 700;
}
.compare__col--highlight .compare__list li::before{
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--cyan-400);
  font-weight: 700;
}

/* Border glow — reactive card border that lights up in an arc following
   the cursor as it moves over the card (angle + distance from center are
   set as CSS custom properties by JS on pointermove). Pure CSS conic
   gradient + mask, no libraries. Cards keep their normal border when the
   mouse isn't nearby, or under prefers-reduced-motion (JS skips wiring
   the listeners, so the custom properties simply never change). */
.border-glow-card{
  position: relative;
  --edge-proximity: 0;
  --cursor-angle: 0deg;
  --cone-spread: 45;
}
.border-glow-card::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from calc(var(--cursor-angle) - var(--cone-spread) * 1deg),
    transparent 0deg,
    rgba(0, 224, 209, 0.95) calc(var(--cone-spread) * 1deg),
    transparent calc(var(--cone-spread) * 2deg),
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: calc(var(--edge-proximity) / 100 * 0.9);
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.compare__col--highlight.border-glow-card::before{
  background: conic-gradient(
    from calc(var(--cursor-angle) - var(--cone-spread) * 1deg),
    transparent 0deg,
    rgba(255, 255, 255, 0.9) calc(var(--cone-spread) * 1deg),
    transparent calc(var(--cone-spread) * 2deg),
    transparent 360deg
  );
}

/* Method (Como atuamos) */
.method{ padding: 130px 0; background: var(--bg); }
.process{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 56px;
  position: relative;
}
.process__step{
  position: relative;
  padding-top: 32px;
  border-top: 2px solid rgba(255,255,255,0.1);
}
.process__step::before{
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 14px rgba(0,224,209,0.6);
}
.process__num{
  display: block;
  font-family: var(--font-display);
  color: var(--cyan-500);
  font-size: 1rem;
  margin-bottom: 14px;
}
.process__step h3{
  color: var(--white);
  font-weight: 500;
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.process__step p{ color: var(--gray-500); font-size: 0.95rem; line-height: 1.55; }

/* Authority */
.authority{ padding: 130px 0; background: var(--navy-700); border-top: 1px solid rgba(255,255,255,0.06); }
.authority__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
  margin-bottom: 48px;
}
.authority__notice{
  color: var(--gray-500);
  font-size: 0.98rem;
  max-width: 720px;
  line-height: 1.6;
  padding: 26px 28px;
  border-left: 2px solid rgba(0,224,209,0.4);
  background: rgba(255,255,255,0.02);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Brasil & Portugal ------------------------------------------------------ */
.markets{
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  min-height: 650px;
  display: flex;
  align-items: center;
  background: var(--off-white);
}
.markets--photo{
  background:
    linear-gradient(90deg, var(--off-white) 0%, rgba(245,247,251,0.94) 30%, rgba(245,247,251,0.55) 48%, rgba(245,247,251,0) 66%),
    var(--markets-photo) center / cover no-repeat;
}
.markets__grid{ position: relative; z-index: 1; width: 100%; }
.markets__copy{ text-align: left; max-width: 540px; }
.markets__title{ color: var(--navy-800); }
.markets__text{
  color: var(--navy-700);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 36px;
}
.markets__blocks{
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 460px;
}
.markets__block{
  padding: 18px 20px;
  border-left: 2px solid rgba(0,144,168,0.4);
  background: rgba(0,144,168,0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.markets__block-tag{
  display: block;
  color: var(--cyan-600);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 8px;
}
.markets__block p{ color: var(--navy-700); font-size: 0.95rem; line-height: 1.5; }
.js .markets__block.reveal:nth-child(2){ transition-delay: 0.15s; }

/* Page hero (Sobre / Contato — internal pages) */
.page-hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 160px 0 80px;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,144,168,0.22), transparent),
    var(--bg);
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.page-hero .eyebrow{ text-align: center; }
.page-hero__title{
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 500;
  max-width: 760px;
  margin: 0 auto 20px;
  line-height: 1.2;
}
/* Larger title variant — used on the "Negócios" service pages (Tráfego,
   Sites, CRM, Automação de WhatsApp, Dashboards) for more visual impact. */
.page-hero__title--lg{
  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
  max-width: 860px;
}
.page-hero__sub{
  color: var(--gray-300);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0 auto;
}

/* Scroll indicator — pulsing chevron pinned to the bottom of the hero,
   signaling there's more content below. */
.page-hero__scroll{
  position: absolute;
  left: 50%;
  bottom: 40px;
  z-index: 1;
  transform: translateX(-50%);
  animation: page-hero-scroll-pulse 2s ease-in-out infinite;
}
.page-hero__scroll-arrow{
  display: block;
  width: 16px;
  height: 16px;
  border-right: 2px solid var(--gray-300);
  border-bottom: 2px solid var(--gray-300);
  transform: rotate(45deg);
}
@keyframes page-hero-scroll-pulse{
  0%, 100%{ transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50%{ transform: translateX(-50%) translateY(10px); opacity: 1; }
}

.page-hero--photo{
  align-items: stretch;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(5,7,13,0.5) 0%, rgba(5,7,13,0.82) 65%, var(--bg) 100%),
    linear-gradient(90deg, rgba(6,10,28,0.85) 0%, rgba(0,100,140,0.45) 50%, rgba(0,224,209,0.35) 100%),
    var(--hero-photo) center 30% / cover no-repeat;
}
.page-hero--photo .eyebrow{ text-align: left; }
.page-hero--photo .page-hero__title,
.page-hero--photo .page-hero__sub{
  margin-left: 0;
  margin-right: auto;
}
.page-hero--photo .page-hero__actions{ justify-content: flex-start; }

/* Right-aligned variant — same photo hero, but content sits on the right
   (used when the photo's subject occupies the left side of the frame).
   The horizontal gradient is mirrored so the right side darkens instead
   of the left, keeping text contrast where the content now sits. */
.page-hero--photo-right{
  text-align: right;
  background:
    linear-gradient(180deg, rgba(5,7,13,0.5) 0%, rgba(5,7,13,0.82) 65%, var(--bg) 100%),
    linear-gradient(270deg, rgba(6,10,28,0.85) 0%, rgba(0,100,140,0.45) 50%, rgba(0,224,209,0.35) 100%),
    var(--hero-photo) center 30% / cover no-repeat;
}
/* The base .container caps at max-width:1180px and centers itself with
   margin:auto — inside a wide viewport that leaves the "right-aligned"
   text sitting short of the true right edge. Let it span the full hero
   width here so the content actually reaches the right edge. */
.page-hero--photo-right .container{ max-width: none; }
.page-hero--photo-right .eyebrow{ text-align: right; }
.page-hero--photo-right .page-hero__title,
.page-hero--photo-right .page-hero__sub{
  margin-right: 0;
  margin-left: auto;
}
.page-hero--photo-right .page-hero__actions{ justify-content: flex-end; }
.page-hero--photo-right .breadcrumb-back{ margin-left: auto; }
.breadcrumb-back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-500);
  font-size: 0.85rem;
  margin-bottom: 28px;
  transition: color 0.2s ease;
}
.breadcrumb-back:hover{ color: var(--cyan-400); }

/* Bridge (home -> Sobre / Contato as dedicated pages) */
.bridge{ padding: 130px 0; background: var(--bg-alt); border-top: 1px solid rgba(255,255,255,0.06); }
.bridge__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
.bridge__card{
  display: block;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  padding: 40px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.bridge__card:hover{ transform: translateY(-4px); border-color: rgba(0,224,209,0.3); }
.bridge__card--highlight{ background: var(--grad-brand); border-color: transparent; }
.bridge__card .section__eyebrow{ margin-bottom: 14px; }
.bridge__title{
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.3;
}
.bridge__card p{ color: var(--gray-300); font-size: 0.98rem; margin-bottom: 20px; }
.bridge__card--highlight p{ color: rgba(255,255,255,0.85); }
.bridge__link{ color: var(--cyan-400); font-weight: 600; font-size: 0.92rem; }
.bridge__quick{ text-align: center; }
.bridge--single .bridge__quick{ padding: 0; }
.bridge__subnote{ color: var(--gray-500); font-size: 0.88rem; margin-top: 16px; }
.bridge__text{
  color: var(--gray-300);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 28px;
}
.bridge__cta-btn{ text-transform: uppercase; letter-spacing: 0.4px; }

/* About */
.about{ padding: 130px 0; background: var(--bg); }
.about__inner{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}
.about__text > p{ color: var(--gray-500); margin-bottom: 16px; font-size: 1.02rem; }
.about__pillars{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.pillar{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.06);
}
.pillar strong{ color: var(--white); font-size: 0.95rem; }
.pillar span{ color: var(--gray-500); font-size: 0.82rem; }
/* Sobre nós — white section, kept visually separate from the origin story below */
.about--text-only{
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-bottom: 1px solid rgba(6, 13, 31, 0.08);
}
.about--text-only > .container{
  position: relative;
  z-index: 1;
}
.pixel-snow{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.4;
}
.pixel-snow canvas{ display: block; width: 100%; height: 100%; }
.about--text-only .about__text{ max-width: 720px; }
.about__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--cyan-600);
  margin-bottom: 28px;
  line-height: 1.15;
}
.about--text-only .about__text > p{ color: var(--navy-700); }
.about--text-only .pillar{ box-shadow: 0 12px 30px rgba(6, 13, 31, 0.1); }
.about__visual{ display: flex; justify-content: center; }
.visual-card{
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 70px rgba(0,144,168,0.18);
  overflow: hidden;
}
.visual-card__orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
}
.visual-card__orb--1{
  width: 200px; height: 200px;
  background: rgba(0,224,209,0.35);
  top: -40px; right: -50px;
}
.visual-card__orb--2{
  width: 180px; height: 180px;
  background: rgba(12,17,48,0.6);
  bottom: -50px; left: -40px;
}
.visual-card__mark{
  position: relative;
  width: 34%;
  opacity: 0.9;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.35));
}

/* Founder photo (Sobre page) — photo only, no card/background behind it,
   duotone navy/cyan tint so no original colors show through. */
.founder-frame{
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}
.founder-photo{
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) sepia(0.4) hue-rotate(170deg) saturate(3.2) brightness(0.94) contrast(1.08);
}

/* Origin quote (Sobre page) — founder photo paired with a quote about why
   the Aura Business was founded. Editorial style: eyebrow, oversized
   decorative quote mark, italic serif quote, accent-bar signature. */
.origin{ padding: 40px 0 130px; background: var(--bg); }
.origin__inner{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.origin__visual{ display: flex; justify-content: center; }
.origin__text{ position: relative; }
.origin__quote-mark{
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 6rem;
  line-height: 1;
  color: rgba(0, 224, 209, 0.16);
  margin-bottom: -1.6rem;
  user-select: none;
}
.origin__quote{ margin: 0 0 32px; }
.origin__quote p{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.5;
  color: var(--off-white);
}
.origin__quote p::before{ content: '\201C'; }
.origin__quote p::after{ content: '\201D'; }
.origin__signature{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
  border-left: 2px solid var(--cyan-400);
}
.origin__signature strong{
  color: var(--white);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
}
.origin__signature span{
  color: var(--gray-500);
  font-size: 0.88rem;
}

/* Manifesto do problema (Sobre page) — editorial narrative transition
   after "A origem": no cards, just hierarchy (eyebrow, title, body,
   pull-quote highlight, closing line). Off-white so it reads as a
   distinct beat from the white "Sobre nós" and navy "A origem" above it. */
.manifesto{
  padding: 120px 0;
  background: var(--off-white);
  border-bottom: 1px solid rgba(6,13,31,0.08);
}
.manifesto .section__title{ color: var(--navy-800); max-width: 780px; }
.manifesto__body{ max-width: 680px; }
.manifesto__body p{
  font-size: 1.08rem;
  color: var(--navy-700);
  line-height: 1.7;
}
.manifesto strong{ color: #007383; font-weight: 700; }
.manifesto__highlight{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: var(--cyan-600);
  max-width: 680px;
  line-height: 1.4;
  margin: 36px 0;
  padding-left: 24px;
  border-left: 3px solid var(--cyan-400);
}
.manifesto__closing{
  max-width: 680px;
  font-size: 1.05rem;
  color: var(--navy-800);
  font-weight: 600;
  line-height: 1.6;
}

/* Comparação dos modelos (Sobre page) — dedicated classes (not .compare,
   which is the homepage's white "Por que integrar" section) so the two
   never interfere. Fragmented column stays low-contrast/muted; the Aura
   column gets the shared .border-glow-card cursor-reactive cyan edge. */
.model-compare{ padding: 120px 0; background: var(--bg-alt); }
.model-compare .section__title{ max-width: 760px; }
.model-compare__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}
.model-compare__col{
  border-radius: var(--radius-lg);
  padding: 40px;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.06);
}
.model-compare__col--muted{ opacity: 0.7; }
.model-compare__col--highlight{
  border-color: rgba(0,224,209,0.4);
  box-shadow: 0 24px 60px rgba(0,224,209,0.08);
}
.model-compare__col h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  margin-bottom: 24px;
  color: var(--white);
}
.model-compare__col--muted h3{ color: var(--gray-300); }
.model-compare__col--highlight h3{ color: var(--cyan-400); }
.model-compare__list{ list-style: none; display: flex; flex-direction: column; gap: 18px; }
.model-compare__list li{
  position: relative;
  padding-left: 26px;
  font-size: 0.98rem;
  line-height: 1.5;
}
.model-compare__col--muted .model-compare__list li{ color: var(--gray-500); }
.model-compare__col--muted .model-compare__list li::before{
  content: '×';
  position: absolute;
  left: 0;
  color: var(--gray-700);
  font-weight: 700;
}
.model-compare__col--highlight .model-compare__list li{ color: rgba(255,255,255,0.92); }
.model-compare__col--highlight .model-compare__list li::before{
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--cyan-400);
  font-weight: 700;
}
.model-compare__closing{
  margin-top: 48px;
  max-width: 680px;
  font-size: 1.05rem;
  color: var(--gray-300);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 28px;
}

/* Princípios da Aura (Sobre page) — 2x2 editorial grid, large discreet
   numerals, cyan top-rule + dot echoing the .process__step treatment. */
.principles{
  padding: 120px 0;
  background: var(--white);
  border-bottom: 1px solid rgba(6,13,31,0.08);
}
.principles .section__title{ color: var(--navy-800); }
.principles__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 56px;
  margin-top: 56px;
}
.principle{
  position: relative;
  padding-top: 28px;
  border-top: 2px solid rgba(0,144,168,0.25);
}
.principle::before{
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 14px rgba(0,224,209,0.5);
}
.principle__num{
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(0,144,168,0.28);
  margin-bottom: 14px;
}
.principle h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--navy-800);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}
.principle p{ color: var(--navy-700); font-size: 0.98rem; line-height: 1.6; }

/* Método de trabalho — closing note under the .process steps (shared
   class already used by the homepage's "Como atuamos"; this note is
   additive and only appears where the markup includes it). */
.process__note{
  margin-top: 48px;
  max-width: 680px;
  color: var(--gray-300);
  font-size: 1.02rem;
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 28px;
}

/* Page hero — optional action buttons (Tráfego Pago hero) */
.page-hero__actions{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* Tráfego Pago — dedicated page sections ------------------------------ */

/* Seção 2 — O problema */
.tf-problem{
  padding: 130px 0;
  background-color: var(--bg-alt);
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.tf-problem .section__title{ max-width: 760px; }
.tf-problem__intro{ color: var(--gray-300); font-size: 1.1rem; max-width: 600px; margin-bottom: 56px; }
.tf-problem__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.tf-problem__card{
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 0;
  padding: 30px;
}
.tf-problem__num{
  display: block;
  font-family: var(--font-display);
  color: var(--cyan-500);
  font-size: 1.3rem;
  margin-bottom: 16px;
}
.tf-problem__card h3{ color: var(--white); font-weight: 500; font-size: 1.15rem; margin-bottom: 10px; }
.tf-problem__card p{ color: var(--gray-500); font-size: 0.95rem; line-height: 1.55; }
.tf-problem__closing{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--white);
  max-width: 680px;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 32px;
}

/* Seção 3 — Visão sistêmica */
.tf-flow{ padding: 130px 0; background: var(--white); border-top: 1px solid rgba(6,13,31,0.08); }
.tf-flow .section__title{
  color: var(--navy-800);
  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
  max-width: 820px;
}
.tf-flow__intro{ color: var(--navy-700); font-size: 1.1rem; max-width: 600px; }
.tf-hover-word{ transition: color 0.25s ease; cursor: default; }
.tf-hover-word:hover{ color: var(--cyan-600); }
.tf-flow__closing{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--navy-800);
  max-width: 680px;
  line-height: 1.5;
  border-top: 1px solid rgba(6,13,31,0.12);
  padding-top: 32px;
  margin-top: 40px;
}

/* Seção 5 — Mensuração */
.tf-measure{ padding: 130px 0; background: var(--white); border-top: 1px solid rgba(6,13,31,0.08); }
.tf-measure__split{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
}
.tf-measure__title{
  font-family: var(--font-display);
  color: var(--navy-800);
  font-weight: 500;
  font-size: clamp(3.8rem, 7.2vw, 5.6rem);
  line-height: 1.05;
  max-width: 640px;
}
.tf-measure__side{
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.tf-measure__side p{ color: var(--navy-700); font-size: 1.15rem; line-height: 1.5; }
.tf-measure__side p:last-child{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--navy-800);
  border-top: 1px solid rgba(6,13,31,0.12);
  padding-top: 24px;
}
.tf-measure__side strong{ color: var(--cyan-600); font-style: normal; }

/* Seção 6 — Escopo */
.tf-scope{ padding: 130px 0; background: var(--bg-alt); border-top: 1px solid rgba(255,255,255,0.06); }
.tf-scope .section__title{ max-width: 640px; }
.tf-scope__grid{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
  margin: 48px 0 32px;
}
.tf-scope__grid li{
  position: relative;
  padding-left: 26px;
  color: var(--gray-300);
  font-size: 1rem;
  line-height: 1.5;
}
.tf-scope__grid li::before{
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--cyan-400);
  font-weight: 700;
}
.tf-scope__note{ color: var(--gray-500); font-size: 0.88rem; max-width: 620px; }

/* Seção 7 — Resultado esperado (alto contraste) */
.tf-impact{ padding: 130px 0; background: var(--grad-brand); text-align: center; }
.tf-impact__title{
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  max-width: 700px;
  margin: 0 auto 48px;
  line-height: 1.2;
}
.tf-impact__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 780px;
  margin: 0 auto 48px;
}
.tf-impact__item{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
  padding: 22px;
  color: var(--white);
  font-weight: 600;
  font-size: 1.05rem;
}
.tf-impact__closing{
  color: rgba(255,255,255,0.85);
  font-size: 1.02rem;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Seção 8 — Qualificação */
.tf-qualify{ padding: 130px 0; background: var(--white); border-top: 1px solid rgba(6,13,31,0.08); }
.tf-qualify .section__title{ color: var(--navy-800); max-width: 760px; }
.tf-qualify__text{ color: var(--navy-700); font-size: 1.1rem; max-width: 560px; margin-bottom: 32px; }
.tf-qualify__notice{
  color: var(--navy-700);
  font-size: 0.98rem;
  max-width: 640px;
  line-height: 1.6;
  padding: 26px 28px;
  border-left: 2px solid rgba(0,144,168,0.4);
  background: rgba(0,144,168,0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Desenvolvimento de Sites — dedicated page sections ------------------ */

/* Seção 1 — Hero (80–90vh no desktop; reaproveita .page-hero--photo) */
.ds-hero{ min-height: 88vh; }

/* Seção 2 — Fundamentos */
.ds-fund{ padding: 130px 0; background: var(--off-white); border-top: 1px solid rgba(6,13,31,0.06); }
.ds-fund .section__title{ color: var(--navy-800); }
.ds-fund__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin: 56px 0 48px;
}
.ds-fund__item{
  padding-top: 26px;
  border-top: 2px solid rgba(6,13,31,0.12);
}
.ds-fund__num{
  display: block;
  font-family: var(--font-display);
  color: var(--cyan-600);
  font-size: 1.8rem;
  margin-bottom: 14px;
}
.ds-fund__item h3{
  color: var(--navy-800);
  font-weight: 500;
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.ds-fund__item p{ color: var(--gray-700); font-size: 0.95rem; line-height: 1.55; }
.ds-fund__closing{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--navy-800);
  max-width: 680px;
  line-height: 1.5;
  border-top: 1px solid rgba(6,13,31,0.12);
  padding-top: 32px;
}

/* Seção 3 — Processo (reaproveita .method/.process/.process__step) */
.ds-process{ padding: 130px 0; background: var(--navy-800); border-top: 1px solid rgba(255,255,255,0.06); }

/* Seção 4 — CTA final */
.ds-final{
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background: var(--bg);
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.ds-final__grid{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(0,224,209,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,224,209,0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 75%);
}
.ds-final::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(0,224,209,0.16), transparent 70%);
}
.ds-final__inner{ position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.ds-final__title{
  font-family: var(--font-display);
  color: var(--white);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.2;
  margin-bottom: 18px;
}
.ds-final__text{
  color: var(--gray-300);
  font-size: 1.08rem;
  margin-bottom: 36px;
}

/* CRM — dedicated page sections ---------------------------------------- */

/* Seção 1 — Hero (left-aligned, vertically centered, 80–90vh).
   Alignment/background come from .page-hero--photo (reused as-is); only
   the height is overridden here. */
.crm-hero{ min-height: 88vh; }

/* Seção 2 — Onde as oportunidades se perdem */
.crm-loss{ padding: 130px 0; background: var(--off-white); border-top: 1px solid rgba(6,13,31,0.06); }
.crm-loss .section__title{ color: var(--navy-800); }
.crm-loss__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin: 56px 0 48px;
}
.crm-loss__item{
  padding-top: 26px;
  border-top: 2px solid rgba(0,144,168,0.45);
}
/* Visually interrupts the connecting line to represent lost continuity. */
.crm-loss__item--broken{ border-top: 2px dashed rgba(6,13,31,0.22); }
.crm-loss__item--faded{ border-top: 2px solid rgba(6,13,31,0.12); }
.crm-loss__num{
  display: block;
  font-family: var(--font-display);
  color: var(--cyan-600);
  font-size: 1.8rem;
  margin-bottom: 14px;
}
.crm-loss__item h3{
  color: var(--navy-800);
  font-weight: 500;
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.crm-loss__item p{ color: var(--gray-700); font-size: 0.95rem; line-height: 1.55; }
.crm-loss__closing{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--navy-800);
  max-width: 680px;
  line-height: 1.5;
  border-top: 1px solid rgba(6,13,31,0.12);
  padding-top: 32px;
}

/* Seção 3 — Como a Aura implementa (reaproveita .method/.process/.process__step) */
.crm-implement{ padding: 130px 0; background: var(--navy-800); border-top: 1px solid rgba(255,255,255,0.06); }
.crm-track{ position: relative; }
/* Small light traveling once across the step track when the section
   scrolls into view — purely decorative, aria-hidden, disabled below
   under prefers-reduced-motion. */
.crm-track__dot{
  position: absolute;
  top: 56px;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 16px 4px rgba(0,224,209,0.65);
  opacity: 0;
  pointer-events: none;
}
.js .crm-track.is-visible .crm-track__dot{
  animation: crm-dot-travel 2.6s ease-in-out 0.3s forwards;
}
@keyframes crm-dot-travel{
  0%{ opacity: 0; left: 0%; }
  10%{ opacity: 1; }
  90%{ opacity: 1; }
  100%{ opacity: 0; left: 100%; }
}
.crm-implement__closing{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--white);
  max-width: 680px;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 32px;
  margin-top: 40px;
}
.crm-implement__closing strong{ color: var(--cyan-400); font-style: normal; }

/* Seção 4 — CTA final (linhas + pontos luminosos — identidade própria do CRM) */
.crm-final{
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background: var(--bg);
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.crm-final__lines{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background-image:
    linear-gradient(115deg, transparent 47%, rgba(0,224,209,0.12) 50%, transparent 53%),
    linear-gradient(65deg, transparent 47%, rgba(0,224,209,0.08) 50%, transparent 53%);
}
.crm-final__lines::before,
.crm-final__lines::after{
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 14px 4px rgba(0,224,209,0.6);
}
.crm-final__lines::before{ top: 28%; left: 22%; }
.crm-final__lines::after{ top: 68%; left: 76%; }
.crm-final__inner{ position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.crm-final__title{
  font-family: var(--font-display);
  color: var(--white);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.2;
  margin-bottom: 18px;
}
.crm-final__text{
  color: var(--gray-300);
  font-size: 1.08rem;
  margin-bottom: 36px;
}

/* Automação de WhatsApp — dedicated page sections ----------------------- */

/* Seção 1 — Hero (foto real; alinhamento herdado de .page-hero--photo) */
.wa-hero{ min-height: 85vh; }

/* Seção 2 — Quando a resposta demora */
.wa-loss{ padding: 130px 0; background: var(--off-white); border-top: 1px solid rgba(6,13,31,0.06); }
.wa-loss .section__title{ color: var(--navy-800); }
.wa-loss__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
  margin: 56px 0 48px;
}
.wa-loss__item{ padding-top: 26px; border-top: 2px solid rgba(0,144,168,0.35); }
.wa-loss__num{
  display: block;
  font-family: var(--font-display);
  color: var(--cyan-600);
  font-size: 1.8rem;
  margin-bottom: 14px;
}
.wa-loss__item h3{ color: var(--navy-800); font-weight: 500; font-size: 1.15rem; margin-bottom: 8px; }
.wa-loss__item p{ color: var(--gray-700); font-size: 0.95rem; line-height: 1.55; }
.wa-loss__dots{ display: inline-flex; gap: 5px; margin-top: 16px; }
.wa-loss__dots i{ width: 5px; height: 5px; border-radius: 50%; background: rgba(0,144,168,0.4); display: block; }
.js .wa-loss__item.is-visible .wa-loss__dots i{ animation: wa-dot-blink 1.1s ease-in-out 2; }
.js .wa-loss__item.is-visible .wa-loss__dots i:nth-child(2){ animation-delay: 0.15s; }
.js .wa-loss__item.is-visible .wa-loss__dots i:nth-child(3){ animation-delay: 0.3s; }
@keyframes wa-dot-blink{
  0%, 100%{ opacity: 0.35; transform: translateY(0); }
  50%{ opacity: 1; transform: translateY(-2px); }
}
.wa-loss__closing{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--navy-800);
  max-width: 680px;
  line-height: 1.5;
  border-top: 1px solid rgba(6,13,31,0.12);
  padding-top: 32px;
}

/* Seção 3 — Como automatizamos (reaproveita .method/.process/.process__step) */
.wa-process{ padding: 130px 0; background: var(--navy-800); border-top: 1px solid rgba(255,255,255,0.06); }
.wa-track{ position: relative; }
.wa-track__dot{
  position: absolute;
  top: 56px;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 16px 4px rgba(0,224,209,0.65);
  opacity: 0;
  pointer-events: none;
}
.js .wa-track.is-visible .wa-track__dot{
  animation-name: wa-track-travel;
  animation-duration: 2.4s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.3s;
  animation-iteration-count: 2;
  animation-fill-mode: forwards;
}
@keyframes wa-track-travel{
  0%{ opacity: 0; left: 0%; }
  10%{ opacity: 1; }
  90%{ opacity: 1; }
  100%{ opacity: 0; left: 100%; }
}
.wa-process__closing{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--white);
  max-width: 680px;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 32px;
  margin-top: 40px;
}
.wa-process__closing strong{ color: var(--cyan-400); font-style: normal; }

/* Seção 4 — CTA final (linhas convergindo para o botão) */
.wa-final{
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background: var(--bg);
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.wa-final__lines{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(ellipse 55% 70% at 50% 120%, rgba(0,224,209,0.2), transparent 70%),
    linear-gradient(100deg, transparent 44%, rgba(0,224,209,0.1) 50%, transparent 56%),
    linear-gradient(80deg, transparent 44%, rgba(0,224,209,0.07) 50%, transparent 56%);
}
.wa-final__inner{ position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.wa-final__title{
  font-family: var(--font-display);
  color: var(--white);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.2;
  margin-bottom: 18px;
}
.wa-final__text{ color: var(--gray-300); font-size: 1.08rem; margin-bottom: 36px; }

/* Dashboards e Dados — dedicated page sections --------------------------- */

/* Seção 1 — Hero (foto real; alinhamento herdado de .page-hero--photo) */
.dash-hero{ min-height: 85vh; }

/* Seção 2 — Sem uma visão única */
.dash-scatter{ padding: 130px 0; background: var(--off-white); border-top: 1px solid rgba(6,13,31,0.06); }
.dash-scatter .section__title{ color: var(--navy-800); }
.dash-scatter__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
  margin: 56px 0 48px;
}
.dash-scatter__item{ padding-top: 26px; border-top: 2px solid rgba(0,144,168,0.35); }
.dash-scatter__num{
  display: block;
  font-family: var(--font-display);
  color: var(--cyan-600);
  font-size: 1.8rem;
  margin-bottom: 14px;
}
.dash-scatter__item h3{ color: var(--navy-800); font-weight: 500; font-size: 1.15rem; margin-bottom: 8px; }
.dash-scatter__item p{ color: var(--gray-700); font-size: 0.95rem; line-height: 1.55; }
.dash-scatter__bars{ display: flex; align-items: flex-end; gap: 4px; height: 22px; margin-top: 16px; }
.dash-scatter__bars i{
  display: block;
  width: 6px;
  background: rgba(0,144,168,0.4);
  border-radius: 1px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.dash-scatter__bars i:nth-child(1){ height: 60%; transform: rotate(-6deg) translateY(2px); }
.dash-scatter__bars i:nth-child(2){ height: 100%; transform: rotate(4deg) translateY(-1px); }
.dash-scatter__bars i:nth-child(3){ height: 75%; transform: rotate(-3deg) translateY(1px); }
.dash-scatter__item:hover .dash-scatter__bars i{ transform: none; background: var(--cyan-600); }
.dash-scatter__closing{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--navy-800);
  max-width: 680px;
  line-height: 1.5;
  border-top: 1px solid rgba(6,13,31,0.12);
  padding-top: 32px;
}

/* Seção 3 — Como organizamos (reaproveita .method/.process/.process__step) */
.dash-process{ padding: 130px 0; background: var(--navy-800); border-top: 1px solid rgba(255,255,255,0.06); }
.dash-process__closing{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--white);
  max-width: 680px;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 32px;
  margin-top: 40px;
}
.dash-process__closing strong{ color: var(--cyan-400); font-style: normal; }

/* Seção 4 — CTA final (dados dispersos se organizam em direção ao botão) */
.dash-final{
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background: var(--bg);
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.dash-final__dots{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(0,224,209,0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 68%, rgba(0,224,209,0.35) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 24%, rgba(0,224,209,0.4) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 70%, rgba(0,224,209,0.3) 0 2px, transparent 3px),
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(0,224,209,0.16), transparent 70%);
}
.dash-final__inner{ position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.dash-final__title{
  font-family: var(--font-display);
  color: var(--white);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.2;
  margin-bottom: 18px;
}
.dash-final__text{ color: var(--gray-300); font-size: 1.08rem; margin-bottom: 36px; }

/* Contact + Final CTA (unified) */
.contact{ position: relative; overflow: hidden; padding: 130px 0; background: var(--navy-700); border-top: 1px solid rgba(255,255,255,0.06); }
.contact__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.contact__info > p{ color: var(--gray-300); margin-bottom: 30px; font-size: 1.08rem; max-width: 480px; }
.contact__location{ margin-bottom: 30px; }
.contact__location p{
  font-family: var(--font-display);
  color: var(--white);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.6vw, 3.75rem);
  line-height: 1.1;
  margin: 0 0 4px;
}
.contact__location p:last-child{
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--gray-300);
  font-size: 0.98rem;
  margin-top: 8px;
  margin-bottom: 0;
}
.contact__whatsapp{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--grad-text);
  color: #041018;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 16px 28px;
  border-radius: 0;
  box-shadow: 0 10px 34px rgba(0, 224, 209, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact__whatsapp:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 224, 209, 0.35); }
.contact__subnote{
  color: var(--gray-500);
  font-size: 0.88rem;
  margin-top: 14px;
  margin-bottom: 40px;
}
.contact__details{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
  margin-bottom: 24px;
}
.contact__details a,
.contact__details span{
  color: var(--gray-300);
  font-size: 0.95rem;
}
.contact__details a:hover{ color: var(--cyan-400); }
.contact__details-label{
  color: var(--cyan-500);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 2px;
}
.contact__extra{ color: var(--gray-700); font-size: 0.88rem; }

.contact__form{
  background: var(--navy-800);
  border-radius: var(--radius-lg);
  padding: 38px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid rgba(255,255,255,0.07);
  align-self: start;
}
.form-row{ display: flex; flex-direction: column; gap: 8px; }
.form-row label{ color: var(--gray-300); font-size: 0.85rem; font-weight: 500; }
.form-row input,
.form-row select,
.form-row textarea{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  color: var(--white);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  transition: border-color 0.2s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--cyan-400);
}
.form-row input::placeholder,
.form-row textarea::placeholder{ color: var(--gray-700); }
.form-note{ font-size: 0.85rem; color: var(--cyan-400); min-height: 20px; }

/* Footer */
.footer{
  position: relative;
  overflow: hidden;
  background: var(--white);
  padding: 40px 0;
  border-top: 1px solid rgba(6,13,31,0.08);
}
.footer-grid{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.footer__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
  align-items: center;
}
.footer__col{ display: flex; flex-direction: column; gap: 12px; }
.footer__brand{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy-800);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 1.02rem;
}
.footer__copy{ color: var(--gray-500); font-size: 0.82rem; }
.footer__legal{
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 0.85rem;
}
.footer__legal a{ color: var(--gray-500); white-space: nowrap; }
.footer__legal a:hover{ color: var(--cyan-600); }
.footer__social{ display: flex; align-items: center; gap: 14px; }
.footer__social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  transition: color 0.2s ease;
}
.footer__social a:hover{ color: var(--cyan-600); }
.footer__social-icon{
  display: block;
  border-radius: 7px;
  object-fit: contain;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer__social a:hover .footer__social-icon{ opacity: 0.8; transform: translateY(-1px); }

/* Specular rim-light effect (OGL/WebGL) — applied to WhatsApp CTA buttons.
   Structural only: keeps each button's own background/shape untouched and
   layers a thin animated highlight along its edge. Degrades gracefully —
   if OGL/WebGL fails to load, buttons render and work exactly as before. */
.btn--specular{
  position: relative;
  isolation: isolate;
}
.whatsapp-float.btn--specular{ position: fixed; }
.specular-button__fx{
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 0;
}
.specular-button__fx canvas{ display: block; width: 100%; height: 100%; }
.specular-button__label{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Floating WhatsApp */
.whatsapp-float{
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  background: #25D366;
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(37,211,102,0.4);
  z-index: 800;
  transition: transform 0.2s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); }
body.has-cookie-banner .whatsapp-float{
  bottom: calc(var(--cookie-banner-h, 96px) + 28px);
  transition: bottom 0.3s ease, transform 0.2s ease;
}

/* Cookie consent banner (LGPD) — injected by script.js, hidden until a  */
/* decision is needed. Accept/Reject share equal visual weight on       */
/* purpose (ANPD guidance against "dark patterns"); no tracking script   */
/* runs before the visitor clicks Aceitar (see loadTrackingScripts()).   */
.cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 970;
  background: var(--navy-800);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 24px;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
}
.cookie-banner.is-visible{
  transform: translateY(0);
  opacity: 1;
}
.cookie-banner__inner{
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-banner__text{
  color: var(--gray-300);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  flex: 1 1 320px;
}
.cookie-banner__text a{ color: var(--cyan-400); }
.cookie-banner__text a:hover{ opacity: 0.85; }
.cookie-banner__actions{
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.cookie-banner__btn{
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.cookie-banner__btn:hover{ transform: translateY(-1px); }
.cookie-banner__btn--ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--gray-300);
}
.cookie-banner__btn--ghost:hover{ border-color: rgba(255,255,255,0.55); color: var(--white); }
.cookie-banner__btn--solid{
  background: var(--cyan-500);
  border: 1px solid var(--cyan-500);
  color: var(--navy-800);
}
.cookie-banner__btn--solid:hover{ background: var(--cyan-400); border-color: var(--cyan-400); }

@media (max-width: 640px){
  .cookie-banner__inner{ flex-direction: column; align-items: stretch; gap: 16px; }
  .cookie-banner__actions{ width: 100%; }
  .cookie-banner__btn{ flex: 1; text-align: center; }
}

/* Reveal on scroll — progressive enhancement: content is visible by default,
   only hidden-then-revealed when JS has added the .js class to <html>. */
.js .reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.js .reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* Subtle variant — gentle opacity-only fade, no movement, used for the
   founder photo so it appears quietly only once the section is reached. */
.js .reveal--subtle{
  transform: none;
  transition: opacity 1.4s ease;
}
.js .reveal--subtle.is-visible{ transform: none; }

/* Diagonal variant — used for the "Soluções" list: odd items rise up from
   the bottom-right, even items from the bottom-left, so the list feels
   staggered/intercalated as it scrolls into view. */
.js .reveal--diag-r{ transform: translate(48px, 40px); }
.js .reveal--diag-r.is-visible{ transform: translate(0, 0); }
.js .reveal--diag-l{ transform: translate(-48px, 40px); }
.js .reveal--diag-l.is-visible{ transform: translate(0, 0); }

/* Reduced motion: skip animated transitions/movement */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .js .reveal{ opacity: 1; transform: none; transition: none; }
  .hero__glow{ transition: none; }
  .btn, .contact__whatsapp, .solution__trigger, .solution__chevron{ transition: none; }
  .page-hero__scroll{ animation: none; opacity: 0.7; }
  .crm-track__dot{ display: none; }
  .wa-track__dot{ display: none; }
  .wa-loss__dots i{ animation: none !important; }
  .dash-scatter__bars i{ transition: none !important; }
  .cookie-banner{ transition: none; }
  body.has-cookie-banner .whatsapp-float{ transition: none; }
}

/* Responsive */
@media (max-width: 1024px){
  .fit__list{ grid-template-columns: 1fr; }
  .entry__grid{ grid-template-columns: 1fr; }
  .authority__grid{ grid-template-columns: repeat(2, 1fr); }
  .process{ grid-template-columns: repeat(2, 1fr); }
  .footer__inner{ grid-template-columns: 1fr 1fr; }
  .tf-scope__grid{ grid-template-columns: 1fr; }
  .ds-fund__grid{ grid-template-columns: repeat(2, 1fr); }
  .crm-loss__grid{ grid-template-columns: repeat(2, 1fr); }
  .markets{ min-height: auto; }
  .markets--photo{ background-position: 25% center; }
  .markets__copy{ max-width: 460px; }
}

@media (max-width: 900px){
  .compare__grid{ grid-template-columns: 1fr; }
  .model-compare__grid{ grid-template-columns: 1fr; }
  .principles__grid{ grid-template-columns: 1fr; gap: 40px; }
  .about__inner, .contact__inner{ grid-template-columns: 1fr; }
  .about__visual{ order: -1; }
  .bridge__inner{ grid-template-columns: 1fr; }
  .origin__inner{ grid-template-columns: 1fr; gap: 40px; }
  .origin__quote-mark{ font-size: 4.5rem; }
  .tf-problem__grid{ grid-template-columns: 1fr; }
  .tf-impact__grid{ grid-template-columns: 1fr; }
  .tf-measure__split{ grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 720px){
  .nav{
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 270px;
    background: var(--navy-800);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 32px;
    gap: 30px;
    transition: right 0.3s ease;
    box-shadow: -10px 0 40px rgba(0,0,0,0.4);
  }
  .nav.is-open{ right: 0; }
  .nav__links{
    justify-self: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
  }
  .nav__cta{ grid-column: auto; justify-self: auto; }
  .nav__item{ width: 100%; }
  /* No hover on touch: the dropdown panel is shown expanded, inline,
     right under the trigger — always reachable, no open/close needed. */
  .nav__item--dropdown:hover .nav__dropdown,
  .nav__item--dropdown:focus-within .nav__dropdown,
  .nav__item--dropdown.is-open .nav__dropdown,
  .nav__dropdown{
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    padding-top: 0;
    margin-top: 14px;
    transition: none;
  }
  .nav__dropdown-inner{
    min-width: 0;
    width: 100%;
    background: rgba(255,255,255,0.04);
    box-shadow: none;
  }
  .nav__chevron{ display: none; }
  .menu-toggle{ display: flex; }
  .menu-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2){ opacity: 0; }
  .menu-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .hero{ padding: 140px 0 60px; min-height: auto; }
  .hero__actions{ flex-direction: column; width: 100%; }
  .hero__actions .btn{ width: 100%; }
  .scroll-cue{ display: none; }
  .solution__trigger{ gap: 18px; align-items: flex-start; }
  .solution__panel{ padding-left: 12px; }
  .solution--detailed .solution__head{ gap: 16px; }
  .solution__scope{ margin-left: 0; padding: 20px; }
  .process{ grid-template-columns: 1fr; }
  .authority__grid{ grid-template-columns: 1fr; }
  .ds-fund__grid{ grid-template-columns: 1fr; }
  .ds-final{ padding: 100px 0; }
  .crm-loss__grid{ grid-template-columns: 1fr; }
  .crm-final{ padding: 100px 0; }
  .wa-loss__grid{ grid-template-columns: 1fr; }
  .wa-final{ padding: 100px 0; }
  .dash-scatter__grid{ grid-template-columns: 1fr; }
  .dash-final{ padding: 100px 0; }
  .markets{ padding: 80px 0; }
  .markets--photo{ background-position: 15% center; }
  .footer__inner{ grid-template-columns: 1fr; text-align: left; }
  .footer__legal{ justify-content: flex-start; }
  .page-hero{ padding: 140px 0 50px; min-height: auto; }
  .page-hero__actions{ flex-direction: column; width: 100%; }
  .page-hero__actions .btn{ width: 100%; }

  .manifesto,
  .model-compare,
  .principles{ padding: 72px 0; }
  .model-compare__col{ padding: 28px; }
  .principles__grid{ gap: 32px; }
}