/* PRIME: strictly monochrome, one theme.
   Deep black #0B0B0B, off-white, graphite gray, brushed silver accents; no other colors.
   The page is dark only: the brand is black, so it does not follow prefers-color-scheme.
   Silver marks the active layer and the WhatsApp action.
   Shape rule: nothing has a sharp corner. Buttons, controls and the nav are full pills,
   surfaces use --radius, small marks --radius-sm, icons are circles.
   The 3D intro follows the same rule (rounded windows and cards, see js/layers.js).
   Dials (taste skill): DESIGN_VARIANCE 8, MOTION_INTENSITY 7, VISUAL_DENSITY 3. */

:root {
  /* theme tokens (dark by default; light below). --fg and --bgc are RGB triplets for tints:
     rgb(var(--fg) / 0.12) is a line, rgb(var(--bgc) / 0.6) is a scrim. */
  --fg: 245 245 245;
  --bgc: 11 11 11;
  --bg: #0b0b0b;
  --bg-top: #151515;
  --bg-bottom: #0e0e0e;
  --graphite: #1a1a1a;
  --line: rgb(var(--fg) / 0.12);
  --line-strong: rgb(var(--fg) / 0.26);
  --text: #f5f5f5;
  --soft: #c8c8c8;
  --muted: #9b9b9b;
  --silver: #cfd2d6;
  --on-silver: #0b0b0b;
  --panel: #f2f2f2;       /* the "Para quem" panel: light on the dark theme, dark on the light one */
  --on-panel: 11 11 11;
  --scroll-thumb: #3a3a3a;
  --todo: "substituir";
  /* brushed silver: fine horizontal grain over a vertical sheen */
  --brushed:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.10) 0 1px, rgb(0 0 0 / 0.05) 1px 2px, rgb(255 255 255 / 0) 2px 3px),
    linear-gradient(180deg, #f3f4f6 0%, #d3d6da 42%, #aeb2b7 100%);
  --brushed-hover:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.12) 0 1px, rgb(0 0 0 / 0.04) 1px 2px, rgb(255 255 255 / 0) 2px 3px),
    linear-gradient(180deg, #fafafa 0%, #dfe2e5 42%, #bcc0c4 100%);
  /* the primary button: brushed silver on the dark theme, brushed graphite on the light one */
  --primary-bg: var(--brushed);
  --primary-bg-hover: var(--brushed-hover);
  --primary-fg: #0b0b0b;
  --primary-border: #e4e6e9;
  --primary-ring: rgb(255 255 255 / 0.7);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* one family for the whole site: Geist for text, Geist Mono for technical labels */
  --font: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 16px;
  --radius-sm: 6px;
  --pill: 999px;

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 1360px;
  --section: clamp(5rem, 11vw, 9rem);
  --header-h: 72px; /* space the intro keeps clear at the top */
  --pill-top: 1.5rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo: cubic-bezier(0.87, 0, 0.13, 1);

  --z-overlay: 5;
  --z-float: 20;
  --z-header: 30;
  --z-menu: 40;
  --z-skip: 50;
}

/* Light theme: the same monochrome set, inverted. Chosen with the sun/moon button (main.js),
   remembered per visitor; the dark theme stays the default because the brand is black. */
:root[data-theme="light"] {
  --fg: 14 14 14;
  --bgc: 242 242 242;
  --bg: #f2f2f2;
  --bg-top: #f8f8f8;
  --bg-bottom: #ebebeb;
  --graphite: #e4e4e4;
  --text: #0e0e0e;
  --soft: #3b3b3b;
  --muted: #666666;
  --silver: #3a3a3a;
  --on-silver: #f5f5f5;
  --panel: #101010;
  --on-panel: 242 242 242;
  --scroll-thumb: #bdbdbd;
  --primary-bg:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.05) 0 1px, rgb(0 0 0 / 0.06) 1px 2px, rgb(255 255 255 / 0) 2px 3px),
    linear-gradient(180deg, #3a3a3a 0%, #1c1c1c 48%, #0e0e0e 100%);
  --primary-bg-hover:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.06) 0 1px, rgb(0 0 0 / 0.05) 1px 2px, rgb(255 255 255 / 0) 2px 3px),
    linear-gradient(180deg, #474747 0%, #262626 48%, #151515 100%);
  --primary-fg: #f5f5f5;
  --primary-border: #0e0e0e;
  --primary-ring: rgb(255 255 255 / 0.16);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[lang="en"] { --todo: "replace"; }

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
  scrollbar-color: var(--scroll-thumb) var(--bg);
  color-scheme: dark;
  background: var(--bg);
}
:root[data-theme="light"] { color-scheme: light; }

body {
  position: relative;
  margin: 0;
  background: transparent; /* the backdrop below shows through */
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--text);
  overflow-x: clip;
}

/* Backdrop: the page is not flat black. Soft graphite light (white at low opacity,
   so it stays monochrome) and a fine grain, fixed behind everything. The 3D intro's
   canvas is transparent, so the intro sits on the same backdrop. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--grain),
    radial-gradient(ellipse 62% 58% at 82% 8%, rgb(var(--fg) / 0.12), rgb(var(--fg) / 0) 70%),
    radial-gradient(ellipse 58% 52% at 6% 96%, rgb(var(--fg) / 0.08), rgb(var(--fg) / 0) 72%),
    radial-gradient(ellipse 40% 36% at 42% 58%, rgb(var(--fg) / 0.035), rgb(var(--fg) / 0) 70%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 55%, var(--bg-bottom) 100%);
}

::selection { background: var(--text); color: var(--bg); }

img, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: var(--radius-sm); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: var(--z-skip);
  padding: 0.75rem 1.25rem; border-radius: var(--pill); background: var(--primary-bg); color: var(--primary-fg);
  font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type ---------- */

.section-title {
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
  max-width: 20ch;
}
.section-lede {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 1.125rem;
  max-width: 52ch;
}


/* Icons: every Phosphor glyph sits in a round frame. */
.ph-bold {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2em; height: 2em;
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  border-radius: 50%;
  line-height: 1;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-weight: 700; font-size: 0.975rem; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}
.btn i { font-size: 0.95em; }
.btn:has(> i:first-child) { padding-left: 0.6rem; }
.btn:has(> i:last-child) { padding-right: 0.6rem; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--lg { min-height: 56px; padding: 1rem 1.5rem; font-size: 1.05rem; }
.btn--primary { background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-border); box-shadow: inset 0 1px 0 var(--primary-ring), 0 1px 0 rgb(0 0 0 / 0.4); }
.btn--primary:hover { background: var(--primary-bg-hover); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: rgb(var(--bgc) / 0.6); }
.btn--ghost:hover { border-color: var(--text); }


/* ---------- Header: a floating pill, centred at the top ---------- */

.site-header {
  position: fixed; top: var(--pill-top); left: 0; right: 0; z-index: var(--z-header);
  display: flex; justify-content: center;
  padding-inline: 0.75rem;
  pointer-events: none;
}
.site-header__pill {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  height: 52px; padding: 6px;
  border-radius: var(--pill);
  pointer-events: auto;
}
/* Translucent glass: the page shows through, softened just enough that the white
   links stay readable over the photos (tint 45% keeps them above 4.5:1).
   It sits on a pseudo-element because backdrop-filter on the pill itself would
   trap the phone menu (position: fixed) inside it. */
.site-header__pill::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: rgb(var(--bgc) / 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 0 1px rgb(var(--fg) / 0.14),
    inset 0 1px 0 rgb(var(--fg) / 0.10),
    0 12px 32px rgb(0 0 0 / 0.18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header__pill::before { background: rgb(var(--bgc) / 0.88); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header__pill::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.brand { display: block; flex: none; margin: 0 1.5rem 0 0.9rem; }
.brand img { height: 17px; width: auto; } /* the wordmark alone (no tagline) reads at the old logo's letter height */

/* the logo in white on the dark theme, in black on the light one */
.logo--on-light { display: none !important; }
:root[data-theme="light"] .logo--on-dark { display: none !important; }
:root[data-theme="light"] .logo--on-light { display: block !important; }

/* the English page stays hidden for the instant it takes to swap the text in */
.i18n-pending body { visibility: hidden; }

/* language and theme buttons: small circles at the end of the pill */
.pill-tools { display: flex; align-items: center; gap: 0.35rem; margin-left: 0.5rem; }
.tool {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid rgb(var(--fg) / 0.18); border-radius: 50%;
  background: none; color: var(--text); cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.tool:hover { border-color: var(--text); background: rgb(var(--fg) / 0.06); }
.tool--lang { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; }
.tool i { width: auto; height: auto; border: 0; font-size: 1rem; }
.tool [data-icon-moon] { display: none; }
:root[data-theme="light"] .tool [data-icon-sun] { display: none; }
:root[data-theme="light"] .tool [data-icon-moon] { display: block; }

.nav { display: flex; align-items: center; }
.nav__list { display: flex; gap: 1.75rem; }
.nav__list a { font-size: 0.8125rem; font-weight: 500; color: var(--text); text-decoration: none; transition: opacity 0.15s; }
.nav__list a:hover { opacity: 0.72; }
.nav { position: relative; }
.nav__list a { position: relative; z-index: 1; }
.nav__list a[aria-current] { opacity: 1; }
/* slides to the link of the section on screen (main.js, navSpy) */
.nav__marker {
  position: absolute; left: 0; top: 50%; z-index: 0;
  width: var(--mw, 0); height: 34px;
  border-radius: var(--pill);
  background: rgb(var(--fg) / 0.1);
  box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.1);
  transform: translate(var(--mx, 0), -50%);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out), opacity 0.3s;
  pointer-events: none;
}
.nav__end { display: flex; align-items: center; height: 40px; margin-left: 1.5rem; padding-left: 1.5rem; border-left: 1px solid rgb(var(--fg) / 0.18); }
.nav__end .btn.nav__cta {
  min-height: 40px;
  padding: 0 1.4rem;
  font-size: 0.8125rem;
}
.nav__end .btn.nav__cta:hover { transform: scale(1.02); }

.menu-toggle {
  display: none; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line-strong); border-radius: 50%; cursor: pointer; font-size: 1.2rem;
}
.menu-toggle i, .wa-float i { width: auto; height: auto; border: 0; }
.menu-toggle [data-icon-close] { display: none; }
.menu-toggle[aria-expanded="true"] [data-icon-open] { display: none; }
.menu-toggle[aria-expanded="true"] [data-icon-close] { display: block; }

/* Phones and small tablets: the pill spans the width, links move to a full-screen menu. */
@media (max-width: 899px) {
  .site-header { top: 0.75rem; }
  .site-header__pill { width: 100%; justify-content: space-between; }
  .pill-tools { margin-left: auto; margin-right: 0.35rem; }
  .menu-toggle { display: inline-flex; position: relative; z-index: var(--z-menu); }
  .nav {
    position: fixed; inset: 0; z-index: var(--z-menu);
    flex-direction: column; align-items: stretch; justify-content: center; gap: 2.5rem;
    padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem;
    background: var(--bg);
    visibility: hidden; opacity: 0;
    transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease-out); }
  .nav__list { flex-direction: column; gap: 0.25rem; }
  .nav__list a { display: block; padding: 0.4rem 0; font-size: clamp(2.2rem, 10vw, 3.2rem); font-weight: 650; letter-spacing: -0.045em; line-height: 1.05; color: var(--text); }
  .nav__end { height: auto; margin: 0; padding: 0; border: 0; }
  .nav__end .btn.nav__cta { min-height: 56px; padding: 0 1.75rem; font-size: 1.05rem; }
  .site-header .brand { position: relative; z-index: calc(var(--z-menu) + 1); }
  body.menu-open { overflow: hidden; }
  .nav__marker { display: none; }
}

/* ---------- Intro: hook, sites stream, lead funnel, then the headline ---------- */

.intro {
  --content-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  --hook-size: clamp(2.4rem, 6.2vw, 6.25rem);
  /* the headline and the film's title cards share one size and one slot */
  --title-size: max(3rem, min(clamp(3rem, 1.5rem + 7.6vw, 7.6rem), calc(30.5vh - 131px)));
  --rest-bottom: clamp(2.5rem, 9vh, 6rem);
  --title-bottom: calc(var(--rest-bottom) + 56px + clamp(1.75rem, 3.5vh, 2.5rem)); /* above the buttons */
  position: relative;
  height: 100vh; height: 100dvh; min-height: 560px;
  overflow: hidden;
}
.intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
.intro.is-ready .intro__canvas { opacity: 1; }
.intro__fallback { display: none; }
.no-webgl .intro__canvas, .no-webgl .intro__labels, .intro.is-failed .intro__canvas, .intro.is-failed .intro__labels { display: none; }
.no-webgl .intro__fallback, .intro.is-failed .intro__fallback {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 78% 50%;
}
.intro__labels { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-overlay); opacity: 0; }

.intro__hook {
  position: absolute; z-index: calc(var(--z-overlay) + 1);
  left: var(--content-left); top: 50%;
  max-width: 14ch;
  font-size: var(--hook-size);
  font-weight: 650;
  line-height: 1; letter-spacing: -0.045em;
  transform: translateY(-50%);
  transition: opacity 0.6s var(--ease-out), transform 1s var(--ease-out), filter 0.6s var(--ease-out), visibility 0s;
}
/* the hook's letters come into focus one after another (opacity and blur per letter, main.js) */
.intro__word { white-space: nowrap; }
/* when the camera moves in, the hook leaves: it rises and goes out of focus, nothing stays behind */
.intro:not([data-phase="hook"]) .intro__hook {
  opacity: 0; visibility: hidden;
  transform: translateY(calc(-50% - 0.5em));
  filter: blur(10px);
  transition-delay: 0s, 0s, 0s, 1s;
}

/* The film's title cards: set exactly like the final headline and in its slot, so the last card
   hands over to the headline in place. Each line rises out of its mask as the card starts and
   leaves upward when it ends (data-state pre / on / post, set by js/scene-intro.js). */
.intro__caption {
  position: absolute; z-index: calc(var(--z-overlay) + 1);
  left: var(--content-left); right: var(--gutter);
  bottom: var(--title-bottom);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--title-size);
  font-weight: 650; line-height: 0.98; letter-spacing: -0.045em;
  color: var(--text);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0%, #000 38%, rgb(0 0 0 / 0.34) 50%, #000 94%, #000 100%);
  mask-image: linear-gradient(#000 0%, #000 38%, rgb(0 0 0 / 0.34) 50%, #000 94%, #000 100%);
  -webkit-mask-size: 100% 200%; mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
}
.intro__caption .line-mask { display: block; overflow: hidden; padding-block: 0.06em; }
.intro__caption .line { display: block; transform: translateY(115%); transition: transform 0.9s var(--ease-expo); }
.intro__caption .line-mask + .line-mask .line { transition-delay: 0.08s; }
.intro__caption[data-state="on"] .line { transform: none; }
.intro__caption[data-state="post"] .line { transform: translateY(-115%); transition-duration: 0.7s; }
.intro__caption[data-state="pre"] .line { transition: none; } /* a replay resets without sweeping through */
/* wide screens: during the journey the camera holds a phone in the right half, so the funnel's
   cards keep to the left half (same size, more lines) */
@media (min-aspect-ratio: 21/20) {
  .intro__caption[data-cap^="f"] { right: auto; max-width: 46vw; }
}
/* while the wall is on screen, the bottom darkens a little under the card */
.intro::before {
  content: ""; position: absolute; inset: 0; z-index: var(--z-overlay);
  background: linear-gradient(to top, rgb(var(--bgc) / 0.82) 0%, rgb(var(--bgc) / 0.5) 30%, rgb(var(--bgc) / 0) 58%);
  opacity: 0; transition: opacity 0.8s var(--ease-out); pointer-events: none;
}
.intro[data-phase="stream"]::before { opacity: 1; }

.intro__rest {
  position: absolute; z-index: calc(var(--z-overlay) + 1);
  left: var(--content-left);
  right: var(--gutter);
  bottom: var(--rest-bottom);
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.intro[data-phase="rest"] .intro__rest { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.25s; }

.intro__control {
  position: absolute; z-index: calc(var(--z-overlay) + 2);
  right: var(--gutter); bottom: 1.25rem;
  min-height: 40px; padding: 0.5rem 1.1rem;
  background: rgb(var(--bgc) / 0.6); border: 1px solid var(--line-strong); border-radius: var(--pill); cursor: pointer;
  font-size: 0.8125rem; font-weight: 600; color: var(--soft);
  transition: color 0.2s, border-color 0.2s, opacity 0.4s;
}
.intro__control:hover { color: var(--text); border-color: var(--text); }
.intro[data-phase="rest"] .intro__skip,
.intro:not([data-phase="rest"]) .intro__replay { opacity: 0; visibility: hidden; }
.no-webgl .intro__control, .intro.is-failed .intro__control { display: none; }
.intro__note {
  position: absolute; z-index: var(--z-overlay);
  right: var(--gutter); top: calc(var(--header-h) + 0.75rem);
  font-size: 0.75rem; color: var(--muted);
}

/* The journey's labels, one above each phone (placed by js/scene-intro.js at the phone's top
   centre). The phone in focus brightens its label and draws a line under it. */
.callout {
  position: absolute; left: 0; top: 0;
  translate: -50% -100%;
  display: grid; justify-items: center; gap: 0.35rem;
  max-width: 16rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.35rem); font-weight: 650;
  letter-spacing: -0.03em; line-height: 1.1;
  color: rgb(var(--fg) / 0.46);
  transition: color 0.45s var(--ease-out);
  will-change: transform;
}
.callout__name { position: relative; padding-bottom: 0.4em; }
.callout__name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.7s var(--ease-out);
}
.callout__sub { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; color: rgb(var(--fg) / 0.5); }
.callout.is-active { color: var(--text); }
.callout.is-active .callout__name::after { transform: scaleX(1); }

/* Hero headline (intro rest state). Set like the reference the owner chose
   (connectabr.digital): Geist 650, very tight tracking, lines that rise out of a
   mask, and a tone mask that leaves the first line gray and the last one white. */
.hero__title {
  font-family: var(--font-display);
  /* the reference's size, capped by the height left over after the funnel above it */
  font-size: var(--title-size);
  font-weight: 650;
  line-height: 0.98; letter-spacing: -0.045em;
  -webkit-mask-image: linear-gradient(#000 0%, #000 38%, rgb(0 0 0 / 0.34) 50%, #000 94%, #000 100%);
  mask-image: linear-gradient(#000 0%, #000 38%, rgb(0 0 0 / 0.34) 50%, #000 94%, #000 100%);
  -webkit-mask-size: 100% 200%; mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
.hero__title .line-mask { display: block; overflow: hidden; padding-block: 0.06em; }
.hero__title .line { display: block; transform: translateY(115%); }
.intro[data-phase="rest"] .hero__title {
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  transition: -webkit-mask-position 1.9s var(--ease-out) 1.3s, mask-position 1.9s var(--ease-out) 1.3s;
}
.intro[data-phase="rest"] .hero__title .line { transform: none; transition: transform 1s var(--ease-expo) 0.25s; }
.intro[data-phase="rest"] .hero__title .line-mask + .line-mask .line { transition-delay: 0.34s; }
.hero__actions { margin-top: clamp(1.75rem, 3.5vh, 2.5rem); display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Services: a bento of four panels ----------
   7/5 then 5/7 so the rows do not repeat. The two specialties show what the client gets
   (canvas art drawn by js/services-art.js, tilting a little with the pointer); branding
   gets a small brand board, photo and video a real photo. */

.services { padding-block: var(--section); }
.svc {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: 0.75rem;
}
.svc__card {
  --rx: 0deg; --ry: 0deg;
  position: relative; isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgb(var(--fg) / 0.055), rgb(var(--fg) / 0.015) 60%);
  box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.08), inset 0 1px 0 rgb(var(--fg) / 0.06);
}
.svc__card--sites { grid-column: span 7; min-height: clamp(30rem, 44vw, 38rem); }
.svc__card--traffic { grid-column: span 5; min-height: clamp(30rem, 44vw, 38rem); }
.svc__card--brand { grid-column: span 5; min-height: 21rem; }
.svc__card--photo { grid-column: span 7; min-height: 21rem; justify-content: flex-end; }

.svc__text { position: relative; z-index: 2; max-width: 30ch; }
.svc__name { font-size: clamp(1.9rem, 3.2vw, 3rem); font-weight: 650; line-height: 1; letter-spacing: -0.045em; }
.svc__text p { margin-top: 0.9rem; color: var(--soft); }
.service__networks { margin-top: 1.5rem; display: flex; gap: 0.6rem; font-size: 1.2rem; color: var(--soft); }

/* the art sits low and bleeds off the panel; the pointer tilts it a little (--rx, --ry) */
.svc__art { position: absolute; z-index: 1; pointer-events: none; }
.svc__art canvas { display: block; width: 100%; height: auto; }
.svc__art--site { right: -7%; bottom: -9%; width: 74%; perspective: 1600px; }
.svc__art--site .svc__window {
  transform: rotateX(calc(12deg + var(--rx))) rotateY(calc(-18deg + var(--ry))) rotateZ(2deg);
  transform-origin: 60% 60%;
  filter: drop-shadow(0 30px 60px rgb(0 0 0 / 0.55));
  transition: transform 0.6s var(--ease-out);
}
.svc__art--site .svc__phone {
  position: absolute; left: -9%; bottom: 12%; width: 25%;
  transform: rotateX(calc(8deg + var(--rx))) rotateY(calc(-10deg + var(--ry))) translateZ(80px);
  filter: drop-shadow(0 24px 40px rgb(0 0 0 / 0.6));
  transition: transform 0.6s var(--ease-out);
}
.svc__art--ads { left: 50%; bottom: 6%; width: 62%; aspect-ratio: 640 / 360; transform: translateX(-30%); perspective: 1200px; }
.svc__art--ads canvas {
  position: absolute; left: 0; width: 100%;
  filter: drop-shadow(0 18px 36px rgb(0 0 0 / 0.55));
  transition: transform 0.7s var(--ease-out);
}
.svc__art--ads canvas:nth-child(1) { bottom: 0; transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(-34%, -58%) rotate(-9deg) scale(0.86); opacity: 0.72; }
.svc__art--ads canvas:nth-child(2) { bottom: 0; transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(-14%, -29%) rotate(-3deg) scale(0.93); opacity: 0.88; }
.svc__art--ads canvas:nth-child(3) { bottom: 0; transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(8%, 0) rotate(4deg); }
.svc__card--traffic:hover .svc__art--ads canvas:nth-child(1) { transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(-40%, -66%) rotate(-12deg) scale(0.86); }
.svc__card--traffic:hover .svc__art--ads canvas:nth-child(3) { transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(12%, 4%) rotate(6deg); }

/* branding: a small brand board, the brand's own monochrome set */
.svc__board { margin-top: auto; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.svc__glyph { margin-right: auto; font-size: clamp(4rem, 8vw, 7rem); font-weight: 650; line-height: 0.8; letter-spacing: -0.06em; color: var(--text); }
.svc__swatch { width: clamp(2.4rem, 3.6vw, 3.25rem); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.22); }
.svc__swatch--black { background: #0b0b0b; }
.svc__swatch--graphite { background: #2a2a2a; }
.svc__swatch--silver { background: var(--brushed); }
.svc__swatch--white { background: #f2f2f2; }

/* photo and video: a real photo under a dark scrim (light text in both themes) */
.svc__card--photo { --text: #f5f5f5; --soft: #d2d2d2; color: var(--text); }
.svc__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;
  filter: grayscale(1) contrast(1.08) brightness(0.62);
  transition: transform 1.2s var(--ease-out);
}
.svc__card--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgb(11 11 11 / 0.92), rgb(11 11 11 / 0.35) 55%, rgb(11 11 11 / 0) 80%);
}
.svc__card--photo:hover .svc__photo { transform: scale(1.03); }

@media (max-width: 1023px) {
  .svc__card--sites, .svc__card--traffic, .svc__card--brand, .svc__card--photo { grid-column: span 12; }
  .svc__card--sites, .svc__card--traffic { min-height: 32rem; }
}
/* phones: the art joins the flow under the text instead of floating at the bottom */
@media (max-width: 767px) {
  .svc__card--sites, .svc__card--traffic { min-height: 0; }
  .svc__art { position: relative; left: auto; right: auto; bottom: auto; margin-top: 2rem; }
  .svc__art--site { width: 110%; margin-right: -26%; margin-bottom: -16%; align-self: flex-end; }
  .svc__art--site .svc__phone { left: 0; }
  .svc__art--ads { width: 78%; transform: none; margin: 5.5rem 0 0.5rem 18%; }
}
@media (prefers-reduced-motion: reduce) {
  .svc__art--site .svc__window, .svc__art--site .svc__phone, .svc__art--ads canvas, .svc__photo { transition: none; }
}

/* ---------- Who PRIME works with: pinned word wheel, then a light panel ----------
   Same model as the owner's reference (connectabr.digital). main.js drives two
   variables from scroll: --wf (0 -> 1, the light panel filling from the centre)
   and --wu (0 -> 1, the underline under "você"). */

.wwith { position: relative; height: 380vh; }
.wwith__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid; place-items: center;
}
.wwith__fill {
  position: absolute; inset: 0;
  background: var(--panel);
  clip-path: inset(calc(50% - 50% * var(--wf, 0)) calc(50% - 50% * var(--wf, 0)) round calc(40px * (1 - var(--wf, 0))));
  opacity: min(1, calc(var(--wf, 0) * 6));
}
.wwith__stage { position: relative; display: grid; place-items: center; }
.wwith__stage > * { grid-area: 1 / 1; }
.wwith__line {
  display: flex; align-items: center; gap: 0.28em;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 4.4vw, 4.6rem);
  font-weight: 650; letter-spacing: -0.045em; line-height: 1;
  opacity: calc(1 - var(--wf, 0) * 2.2);
  transform: translateY(calc(var(--wf, 0) * -40px));
}
.wwith__wheel {
  position: relative; display: block;
  height: 3.3em; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 34%, #000 66%, transparent 100%);
  mask-image: linear-gradient(transparent 0%, #000 34%, #000 66%, transparent 100%);
}
.wwith__track { display: flex; flex-direction: column; will-change: transform; }
.wwith__track span { display: block; height: 1.1em; line-height: 1.1em; white-space: nowrap; color: var(--text); }
.wwith__final {
  display: flex; flex-direction: column; align-items: center; gap: 44px;
  text-align: center; color: rgb(var(--on-panel));
  opacity: clamp(0, calc((var(--wf, 0) - 0.55) * 3), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--wf, 0) - 0.55) * 3), 1)) * 30px));
  pointer-events: none;
}
.wwith.is-done .wwith__final { pointer-events: auto; }
.wwith__you {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 4.4vw, 4.6rem);
  font-weight: 650; letter-spacing: -0.045em; line-height: 1.05;
}
.wwith__you u {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / calc(var(--wu, 0) * 100%) 0.07em;
  padding-bottom: 0.06em;
}
.wwith__btn { min-height: 54px; padding: 0 0.55rem 0 1.75rem; background: rgb(var(--on-panel)); color: var(--panel); border-color: rgb(var(--on-panel)); font-size: 1rem; }
.wwith__btn:hover { box-shadow: 0 16px 40px -14px rgb(var(--on-panel) / 0.6); }
.wwith__btn i { transition: transform 0.3s var(--ease-out); }
.wwith__btn:hover i { transform: translateX(3px); }
.wwith__list { display: none; }

/* while the nav pill sits on the light panel it turns more opaque, so its white links stay readable */
.site-header__pill::before { transition: background-color 0.3s var(--ease-out); }
.nav-on-light .site-header__pill::before { background-color: rgb(var(--bgc) / 0.88); }

@media (max-width: 767px) {
  .wwith__line { flex-direction: column; gap: 0.3em; text-align: center; }
  .wwith__track span { text-align: center; }
}

/* static layout: no JS or reduced motion. Just the final panel, with the audiences written out. */
.wwith.static { --wf: 1; --wu: 1; height: auto; }
.wwith.static .wwith__sticky { position: relative; height: auto; padding-block: var(--section); }
.wwith.static .wwith__line { display: none; }
.wwith.static .wwith__final { pointer-events: auto; gap: 32px; }
.wwith.static .wwith__list { display: block; max-width: 40ch; font-size: 1.125rem; color: rgb(var(--on-panel) / 0.72); }

/* ---------- Proof: one statement, pushed off the left edge ---------- */

.proof { padding-block: var(--section); overflow-x: clip; /* words start past the edges */ }
.proof__text {
  margin-left: clamp(0rem, 16vw, 20rem);
  font-size: clamp(2.1rem, 4.8vw, 4.4rem);
  font-weight: 650;
  line-height: 1.02; letter-spacing: -0.045em;
  text-wrap: balance;
}
.proof__muted { color: var(--muted); }
@media (max-width: 767px) { .proof__text { margin-left: 0; } }

/* Words arrive one by one from alternating sides: left, right, left...
   so the same number comes from each side (main.js splits the words). */
.has-words .proof__word {
  display: inline-block;
  opacity: 0;
  transform: translateX(calc(var(--from) * 40vw));
  transition: transform 1s var(--ease-out), opacity 0.6s var(--ease-out);
  transition-delay: calc(var(--i) * 110ms);
}
.has-words .proof__text.is-in .proof__word { opacity: 1; transform: none; }

/* ---------- Finale: the imposing close ----------
   A 3D disk of particles (js/scene-finale.js) on the right, bleeding off the edge, with
   white leads spiralling into its core: the funnel's story ends with everyone arriving.
   The headline is set like the hero (Geist, tone mask, lines rising), only bigger. */

.finale {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: clamp(8rem, 18vh, 12rem) clamp(3.5rem, 9vh, 6rem);
}
.finale__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.4s var(--ease-out);
  pointer-events: none;
}
.finale.is-ready .finale__canvas { opacity: 1; }
.finale__inner { position: relative; z-index: 1; }
/* keeps the headline readable over the particles: the disk seems to emerge from the right */
.finale::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--bgc) / 0.78) 0%, rgb(var(--bgc) / 0.5) 36%, rgb(var(--bgc) / 0) 62%);
}
.finale__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.2rem + 8.2vw, 9.5rem);
  font-weight: 650;
  line-height: 0.96; letter-spacing: -0.05em;
  -webkit-mask-image: linear-gradient(#000 0%, #000 38%, rgb(0 0 0 / 0.34) 50%, #000 94%, #000 100%);
  mask-image: linear-gradient(#000 0%, #000 38%, rgb(0 0 0 / 0.34) 50%, #000 94%, #000 100%);
  -webkit-mask-size: 100% 200%; mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
.finale__title .line-mask { display: block; overflow: hidden; padding-block: 0.06em; }
.finale__title .line { display: block; transform: translateY(115%); }
.finale.is-in .finale__title {
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  transition: -webkit-mask-position 1.9s var(--ease-out) 0.9s, mask-position 1.9s var(--ease-out) 0.9s;
}
.finale.is-in .finale__title .line { transform: none; transition: transform 1.1s var(--ease-expo); }
.finale.is-in .finale__title .line-mask + .line-mask .line { transition-delay: 0.1s; }
.finale__lede { margin-top: clamp(1.5rem, 3vh, 2.25rem); max-width: 40ch; font-size: clamp(1.05rem, 1.25vw, 1.25rem); color: var(--soft); }
.finale__actions { margin-top: clamp(1.75rem, 4vh, 2.75rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.btn--xl { min-height: 64px; padding: 0 2.25rem; font-size: 1.125rem; }
.finale__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.finale__links a {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 44px; padding: 0 1rem 0 0.35rem;
  border: 1px solid var(--line-strong); border-radius: var(--pill);
  background: rgb(var(--bgc) / 0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  transition: border-color 0.2s;
}
.finale__links a:hover { border-color: var(--text); }
.finale__links i { font-size: 0.95rem; color: var(--soft); }
.finale__links .todo { outline-offset: 2px; }

/* no WebGL: a soft light where the disk would be */
.no-webgl .finale__canvas, .finale.is-failed .finale__canvas { display: none; }
.no-webgl .finale::before, .finale.is-failed::before {
  content: ""; position: absolute; right: -25vw; top: -10vh;
  width: 95vw; aspect-ratio: 2.4; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--fg) / 0.16), rgb(var(--fg) / 0.05) 45%, rgb(var(--fg) / 0) 72%);
  transform: rotate(-9deg);
}

@media (max-width: 767px) {
  .finale { padding-top: 42vh; }
  .finale::after { background: linear-gradient(0deg, rgb(var(--bgc) / 0.85) 0%, rgb(var(--bgc) / 0.55) 42%, rgb(var(--bgc) / 0) 62%); }
  .finale__title { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .finale__actions { flex-direction: column; align-items: stretch; }
  .finale__actions .btn--xl { width: 100%; }
  .finale__links { flex-direction: column; align-items: flex-start; }
}

/* Placeholder content the owner must replace before launch. */
.todo { outline: 1px dashed rgb(var(--fg) / 0.55); outline-offset: 4px; border-radius: var(--radius-sm); }
.todo::after {
  content: var(--todo);
  margin-left: 0.7rem;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.02em; color: var(--soft);
  vertical-align: middle;
}

/* ---------- Footer: studio, base, channels, social; the mark, huge and faint; the rights line ---------- */

.site-footer { border-top: 1px solid var(--line); overflow: hidden; }
.site-footer__top {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  padding-block: clamp(3.5rem, 6vw, 4.5rem) 2.5rem;
}
.site-footer__label {
  display: block; margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.site-footer__col p { font-size: 0.9375rem; line-height: 1.7; color: var(--soft); }
.site-footer__col a {
  display: flex; align-items: center; gap: 0.65rem; width: fit-content;
  margin-bottom: 0.7rem;
  font-size: 0.9375rem; color: var(--soft); text-decoration: none;
  transition: color 0.2s, transform 0.25s var(--ease-out);
}
.site-footer__col a:hover { color: var(--text); transform: translateX(4px); }
.site-footer__social i { font-size: 1.05rem; }
.site-footer__up {
  margin-top: 1.1rem;
  font-family: var(--font-mono); font-size: 0.6875rem !important; letter-spacing: 0.16em; text-transform: uppercase;
}
.site-footer__up i { font-size: 0.8rem; }
.site-footer__up:hover { transform: translateY(-2px) !important; }
/* the mark, as wide as the page and barely there; it comes up a little under the pointer */
.site-footer__giant { padding-block: 0.5rem 1.5rem; }
.site-footer__giant img { width: 100%; height: auto; opacity: 0.08; transition: opacity 0.6s var(--ease-out); }
.site-footer__giant:hover img { opacity: 0.16; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 2rem;
  padding-block: 1.5rem 2rem; border-top: 1px solid var(--line);
  font-size: 0.8125rem; color: var(--muted);
}
.site-footer__tag { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 1023px) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .site-footer__top { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Floating WhatsApp (phones) ---------- */

.wa-float {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: none; width: 56px; height: 56px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--primary-bg); color: var(--primary-fg); font-size: 1.75rem;
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.5);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- Phones ---------- */

@media (max-width: 767px) {
  .wa-float { display: inline-flex; }
  .section-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .hero__title { font-size: var(--title-size); }
  .intro { --hook-size: clamp(2.1rem, 10.5vw, 3rem); }
  .intro__rest { left: var(--gutter); right: var(--gutter); width: auto; bottom: 1.5rem; }
  .intro { --title-size: clamp(1.9rem, 8.4vw, 2.7rem); --rest-bottom: 1.5rem; --title-bottom: calc(1.5rem + 56px + 1.25rem); }
  .callout { font-size: 0.95rem; max-width: 8.5rem; }
  .intro__control { bottom: 0.6rem; top: auto; }
  .intro__note { top: auto; bottom: 0.6rem; right: auto; left: var(--gutter); padding: 0.2rem 0.6rem; border-radius: var(--pill); background: rgb(var(--bgc) / 0.82); }
  .intro[data-phase="rest"] .intro__note { opacity: 0; }
  .hero__actions { margin-top: 1.25rem; }
  .hero__actions .btn--ghost { display: none; }
}

/* ---------- Scroll reveal (main.js adds .has-reveal only when motion is allowed) ---------- */

.has-reveal [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.has-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro__control { display: none; }
  .intro__hook, .intro__rest, .intro__caption .line { transition: none; }
  .hero__title .line, .finale__title .line { transform: none; }
  .finale__title { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  .intro[data-phase] .hero__title, .intro[data-phase] .hero__title .line { transition: none !important; }
  .btn:hover { transform: none; }
}