/* ==========================================================================
   AROX — Landing Page

   Light theme. The palette runs on two levels: the logo's ramp carries the
   brand moments and the app's own nine category colours carry the variety —
   each feature card, chart slice and chip takes its hue from the product
   itself rather than from decoration.

   Every one of those hues is carried at ink strength rather than at screen
   strength. The values tuned for a black page (#ffa326, #66c9ff, #34d399)
   are light emitted by a dark screen; on paper the same hues have to be
   pigment, so each is pulled down in lightness and keeps its hue. That is
   what lets the page go light without the palette changing identity.
   ========================================================================== */

/* Plus Jakarta Sans, servida por este site (variável, 200–800, só o subconjunto
   latino — cobre o português). Antes vinha do Google Fonts, o que mandava o IP
   do visitante ao Google antes de qualquer escolha dele. Licença: assets/fonts/OFL.txt */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paper, with the brand's blue left in the room so the page never falls
     to flat grey. --bg-deep is the hero's pocket: on a dark page it was the
     darkest spot, here it is the brightest, because the sphere is ink now
     and needs the cleanest field under it. */
  --bg-deep: #ffffff;
  --bg: #f4f7fd;
  --bg-soft: #e9f0fa;
  --bg-lift: #dce6f6;

  /* --surface raises (a card, a pill, a button face); --surface-2 recesses
     (a hover, a progress track). On paper those are opposite directions, so
     one is white and the other a thin ink wash. */
  --surface: rgba(255, 255, 255, 0.88);
  --surface-2: rgba(16, 42, 86, 0.07);
  --border: rgba(16, 42, 86, 0.17);
  --border-strong: rgba(16, 42, 86, 0.42);

  --text: #0a1626;
  --text-dim: rgba(10, 22, 38, 0.8);
  --text-faint: rgba(10, 22, 38, 0.62);

  /* Elevation is a real shadow now: on a dark page a card was lit from
     above, here it casts. */
  --shadow-sm: 0 1px 2px rgba(16, 42, 86, 0.05), 0 8px 20px -12px rgba(16, 42, 86, 0.22);
  --shadow-md: 0 2px 6px rgba(16, 42, 86, 0.06), 0 22px 44px -22px rgba(16, 42, 86, 0.3);
  --shadow-lg: 0 4px 10px rgba(16, 42, 86, 0.05), 0 40px 80px -40px rgba(16, 42, 86, 0.45);

  /* Brand ramp, from the logo, at ink strength. */
  --red: #b31009;
  --fire: #d33108;
  --ember: #d95e09;
  --amber: #b87907;
  --azure: #1560d4;
  --sky: #1a7ac9;
  --ice: #2188bd;
  --deep: #0a34ce;

  /* The action colour stays at full screen strength: it is a filled block
     with dark text on it, not a hue laid on paper, and it is the one thing
     on the page allowed to shout. */
  --accent: #ff7a18;
  --accent-deep: #e05510;
  --success: #067a53;

  /* The app's category palette — the page's source of colour variety. */
  --c-food: #cf2f2f;
  --c-transport: #a8700a;
  --c-home: #0b9163;
  --c-fun: #6d3ee0;
  --c-health: #c72872;
  --c-edu: #2563eb;
  --c-shop: #0582a0;
  --c-service: #cf5806;
  --c-other: #55647a;

  /* The same nine categories at the strength the app itself ships them. The
     ink versions above exist because text and fills on paper have to be read;
     a particle is a luminous mark, not a word, so the comets take these. */
  --c-food-vivid: #ef4444;
  --c-transport-vivid: #f59e0b;
  --c-home-vivid: #10b981;
  --c-fun-vivid: #8b5cf6;
  --c-health-vivid: #ec4899;
  --c-edu-vivid: #3b82f6;
  --c-shop-vivid: #06b6d4;
  --c-service-vivid: #f97316;
  --c-other-vivid: #64748b;

  /* The section headlines' gradient: the wordmark's own path (orange → red →
     blue → sky, same stops), at ink strength so every stop clears 3:1 on the
     paper (3.6 / 4.2 / 4.9 / 3.6). It used to start on ochre and jump from red
     to blue in the middle of a word, which read as a different palette from
     the hero's. */
  --grad-brand: linear-gradient(95deg, #d0600e 0%, #d2461c 40%, #2566d8 64%, #1f86d6 100%);
  /* The hero's four brand colours, in one place. The wordmark, the headline's
     second line and the shooting stars all read these, so changing a colour
     here changes all three. comets.js reads the same four custom properties. */
  --brand-orange: #ff8a2b;
  --brand-red: #ef5a24;
  --brand-blue: #2f7de1;
  --brand-sky: #4fb3ff;

  /* One continuous gradient, no colour per letter. Plain sRGB by default: the
     middle of orange-red to blue is a muddy mauve there. Where the browser can
     interpolate in OKLCH the hue travels through magenta and violet instead,
     which is what keeps the middle of the word vivid (see the @supports below). */
  --grad-wordmark: linear-gradient(100deg, var(--brand-orange) 0%, var(--brand-red) 40%, var(--brand-blue) 64%, var(--brand-sky) 100%);

  /* The headline's second line uses the wordmark's gradient. Its two ends
     (orange, sky blue) are about 2.1:1 against the paper, under the 3:1 that
     large text asks for; point this at var(--grad-brand) for the AA version. */
  --grad-headline: var(--grad-wordmark);

  /* Soft, coloured lift for the wordmark. No grey extrusion. */
  --wordmark-shadow: drop-shadow(0 10px 24px rgba(239, 90, 36, 0.22));
  --grad-accent: linear-gradient(135deg, #ff9a34, #e8540d);

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;

  /* The header is fixed, so it has to be subtracted from every anchor jump
     and from the hero's own height. Measured, not guessed: 77px at every
     breakpoint. */
  --header-h: 77px;

  /* One vertical scale for the hero — 8, 16, 24, 32, 48 — instead of a clamp
     invented per gap. --u lets the whole scale compress together on a short
     window, so the rhythm keeps its proportions rather than each gap
     shrinking on its own. */
  --u: 1;
  --s-1: calc(0.5rem * var(--u));
  --s-2: calc(1rem * var(--u));
  --s-3: calc(1.5rem * var(--u));
  --s-4: calc(2rem * var(--u));
  --s-5: calc(3rem * var(--u));

  --max: 1180px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: light;
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    --grad-wordmark: linear-gradient(100deg in oklch, var(--brand-orange) 0%, var(--brand-red) 40%, var(--brand-blue) 64%, var(--brand-sky) 100%);
    --grad-brand: linear-gradient(95deg in oklch, #d0600e 0%, #d2461c 40%, #2566d8 64%, #1f86d6 100%);
  }
}

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

html {
  scroll-behavior: smooth;
  /* Without this the section's top edge lands at y=0, i.e. exactly behind the
     fixed header — the band's own top border and the first 77px of it were
     being swallowed on every nav click. The extra rem leaves a sliver of the
     previous section showing, so the seam reads as intentional. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; color: var(--text-dim); }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text);
}

h1 { font-size: clamp(2.6rem, 8vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; }

::selection { background: rgba(255, 122, 24, 0.32); color: var(--text); }

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

/* A whisper of film grain keeps the large flat fields from banding and
   gives the colour some tooth. Multiply rather than overlay: on paper
   overlay blows the noise out into visible white speckle. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.022;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* The space above a section's content. Also what the anchor jump subtracts, so
   a nav click puts the section's first line (its tag) just under the header
   instead of leaving a band of the previous section and a gap above the content. */
:root { --section-pad: clamp(3rem, 2.25rem + 4.5vh, 7.5rem); }

.section {
  position: relative;
  /* The ambient orbs are positioned past the section edges; without this
     they widen the document and force mobile browsers to zoom out. */
  overflow: hidden;
  padding-block: var(--section-pad);
}

/* html has scroll-padding-top = header + 1rem; the section's own top padding is
   taken back off, so its content (not its edge) is what lands under the header. */
.section[id] { scroll-margin-top: calc(0.25rem - var(--section-pad)); }

.section--tint {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(64, 173, 255, 0.1) 0%, transparent 60%),
    var(--bg-soft);
  border-block: 1px solid var(--border);
}

/* Blurred colour blobs that give each section its own ambient temperature. */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

.section > .container { position: relative; z-index: 1; }

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c, var(--amber));
  box-shadow: 0 0 12px var(--c, var(--amber));
}

.section-head { max-width: 46rem; margin-bottom: clamp(1.4rem, 0.6rem + 2.6vh, 3.5rem); }
/* Wider than the body measure, and only for the centred heads: the heading
   was wrapping to two lines against a 46rem limit meant for the paragraph,
   which cost ~60px of every section's first screen. The paragraph keeps its
   own 38rem, so the reading measure is unchanged. */
.section-head--center { margin-inline: auto; text-align: center; max-width: 54rem; }
.section-head h2 { margin-top: 1.1rem; }

/* No one-word last line in running text. */
p { text-wrap: pretty; }

.section-head p {
  margin-top: 1.1rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 38rem;
  text-wrap: balance;
}

.section-head--center p { margin-inline: auto; }

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

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease,
    border-color 0.25s ease, background-color 0.25s ease;
}

.btn svg { width: 1.05rem; height: 1.05rem; transition: transform 0.25s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.header .btn { white-space: nowrap; }

/* The bar's button is the same height as the row of links beside it, and the
   same weight as they are: hierarchy comes from the fill, not from being 56px
   tall in a 76px bar. The glow is trimmed to match. */
.header .btn {
  min-height: 2.5rem;
  padding: 0 1.15rem;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: 0 6px 16px -8px rgba(224, 85, 16, 0.6);
}
.header .btn:hover { box-shadow: 0 8px 20px -8px rgba(224, 85, 16, 0.7); }

.btn--primary {
  background: var(--grad-accent);
  color: #180a02;
  box-shadow: 0 12px 30px -10px rgba(255, 122, 24, 0.7);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(255, 122, 24, 0.85);
}

.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.4) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
}

.btn--primary:hover::after { transform: translateX(120%); }

.btn--ghost {
  background: var(--surface);
  border-color: rgba(16, 42, 86, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(64, 173, 255, 0.7);
  background: rgba(33, 133, 255, 0.12);
}

.btn--block { width: 100%; }
.btn:active { transform: translateY(0) scale(0.98); }

/* ------------------------------ Scroll bar ------------------------------ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--grad-brand);
  z-index: 100;
  pointer-events: none;
}

/* -------------------------------- Header -------------------------------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}

.header.is-stuck {
  background: rgba(244, 247, 253, 0.82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--border);
}

.header .container {
  /* Grid, so the links sit on the true centre of the bar. With space-between
     they only centred if the logo and the actions happened to be the same width,
     and they are not. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: 4.75rem;
}

.header .brand { justify-self: start; }
.header-actions { justify-self: end; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
}

/* The logo artwork is wider than it is tall, so height drives the size. */
.brand img {
  width: auto;
  height: 2.1rem;
  filter: drop-shadow(0 2px 5px rgba(16, 42, 86, 0.22));
}

.brand small {
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.15rem;
}

.nav { display: flex; align-items: center; gap: 0.1rem; }

.nav a {
  padding: 0.5rem 0.72rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-dim);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav a:hover,
.nav a.is-active { color: var(--text); background: var(--surface-2); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }

/* Returning users look top-right for this, but it must not compete with the
   trial CTA — so it stays a quiet text link rather than a third button. */
.btn-login {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.btn-login svg { width: 1rem; height: 1rem; opacity: 0.8; }

.btn-login:hover { color: var(--text); background: var(--surface-2); }

/* One login entry point at a time: the header link on desktop, the menu
   item on mobile, where the header has no room for a third control. */
.nav-login { display: none; }

.nav-toggle {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 0.8rem;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle svg { width: 1.2rem; height: 1.2rem; }

/* --------------------------------- Hero --------------------------------- */

.hero {
  position: relative;
  /* The sphere is ink here, so it needs the cleanest field under it, not
     the darkest. The pocket is white and dissolves into --bg at the edges,
     which keeps the dots crisp without cutting a rectangle out of the page. */
  background: radial-gradient(95% 82% at 50% 40%,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.15) 42%,
    rgba(255, 255, 255, 0) 80%);
  min-height: 100vh;      /* engines without svh */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--header-h) + var(--s-3)) var(--s-3);
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28vh;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
  z-index: 4;
}

.sphere {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;   /* before inset: without it the canvas has no size */
  inset: 0;
  /* No z-index here, deliberately. A z-index on .sphere made it a stacking
     context, which pinned BOTH canvases underneath .hero-stage: the "front"
     layer sat behind the wordmark exactly like the back one, so nothing ever
     passed in front of a letter. Left as auto, the two canvases join the
     hero's own stacking order and can straddle the type (back 1 < stage 2 <
     front 3). */
}
.sphere-layer { position: absolute; top: 0; left: 0; inset: 0; width: 100%; height: 100%; }
.sphere-layer--back { z-index: 1; }
.sphere-layer--front { z-index: 3; pointer-events: none; }

.sphere.is-fallback {
  background:
    radial-gradient(38% 46% at 50% 45%, rgba(245, 57, 12, 0.32) 0%, transparent 70%),
    radial-gradient(46% 52% at 62% 58%, rgba(33, 133, 255, 0.3) 0%, transparent 72%);
  filter: blur(10px);
}

.hero-stage { position: relative; z-index: 2; text-align: center; }

.hero-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 96vw);
  height: min(520px, 64vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.3) 38%,
    rgba(255, 255, 255, 0.1) 62%, rgba(255, 255, 255, 0) 80%);
  pointer-events: none;
}

.hero-wordmark {
  position: relative;
  /* Shrink-wrapped on purpose: the comet layer measures this box to find the
     letters. As a full-width block its rect was the container. */
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  /* Flat, on the page's own typeface and weight, and the biggest thing on the
     screen by far: it is the brand and the stage the comets orbit. The vh
     term keeps it from crowding the headline on a short window. */
  font-size: clamp(76px, min(12vw, 18vh), 168px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--grad-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: var(--wordmark-shadow);
}

.hero-copy {
  position: relative;
  z-index: 5;
  max-width: 40rem;
  margin: var(--s-4) auto 0;
  text-align: center;
}

.hero-copy::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 96vw);
  height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0) 78%);
  pointer-events: none;
  z-index: -1;
}

.hero-copy h1 {
  /* The line under the brand: clearly second to it (about a third of its size). */
  font-size: clamp(1.9rem, min(3.4vw, 5.2vh), 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

/* A short rule in the logo's colours closes the brand block and opens the
   message, so the two read as separate steps. */
.hero-copy h1::before {
  content: '';
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: 0 auto var(--s-4);
  border-radius: 999px;
  background: var(--grad-headline);
  opacity: 0.85;
}

/* Two lines of one headline: same size, same weight, same metrics. Only the
   fill differs. inline-block plus font: inherit stops the gradient span from
   picking up anything of its own, which is what made it read as a different
   style from the line above it. */
.hero-copy h1 .text-grad {
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  /* The same four colours as the wordmark (see --grad-headline). */
  background: var(--grad-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-copy p {
  max-width: 32.5rem;
  margin: var(--s-3) auto 0;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  /* Balanced, so the break never strands a dash at the end of a line. */
  text-wrap: balance;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: var(--s-4);
}

/* One action in the hero, at a comfortable tap height. */
.hero .hero-cta .btn { min-height: 3.25rem; padding-block: 0; }

/* The one line of reassurance under the button: the trial, cancelling, and
   who takes the payment — it replaces the three trust pills that used to sit
   here, so the first screen asks for one thing only. */
/* line-height matters here: the box sits 16px under the button, but with the
   page's 1.6 leading the words themselves sat ~20px away. */
/* .hero-copy .hero-note, not .hero-note: .hero-copy p would otherwise win and
   set it at body size, which broke this one line into two. */
.hero-copy .hero-note { max-width: none; margin-top: var(--s-2); font-size: 0.88rem; font-weight: 500; line-height: 1.3; color: var(--text-dim); }

/* An arrow, not a word. The old cue was "ROLE" set in tiny caps over a hairline,
   which read as a label that had lost its object. This one is a link to the
   next scene, with a name for assistive tech and an arrow that moves. */
.scroll-cue {
  position: relative;
  z-index: 6;
  margin: var(--s-4) auto 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  color: var(--text-dim);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--ease-out);
}
.scroll-cue svg { width: 1.1rem; height: 1.1rem; animation: cue 1.8s ease-in-out infinite; }
.scroll-cue:hover { color: var(--text); border-color: rgba(16, 42, 86, 0.45); transform: translateY(2px); }

@keyframes cue {
  0%, 100% { transform: translateY(-2px); opacity: 0.55; }
  50% { transform: translateY(3px); opacity: 1; }
}

/* ------------------------------- Features -------------------------------- */

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; }

.card {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.74));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Hairline of the card's own colour along the top edge. Spelled out here, not
   as a :root token: a custom property's var() resolves where it is declared,
   so a token would read --c on :root (unset → amber) for every card. */
.card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c, var(--amber)) 45%, transparent);
  opacity: 0.9;
}

.card::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--c, var(--amber)) 30%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--c, var(--amber)) 38%, var(--border));
  box-shadow:
    var(--shadow-md),
    0 26px 44px -28px color-mix(in srgb, var(--c, var(--amber)) 45%, transparent);
}

.card:hover::before { opacity: 1; }
.card > * { position: relative; }

.card--wide { grid-column: span 4; }
.card--half { grid-column: span 3; }
.card--third { grid-column: span 2; }
.card--full { grid-column: span 6; }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--c, var(--amber)) 35%, transparent);
  background: color-mix(in srgb, var(--c, var(--amber)) 14%, transparent);
  font-size: 1.4rem;
}

.card h3 + p { margin-top: 0.6rem; font-size: 0.94rem; }

/* Budget bars */
.mini-budget { margin-top: 1.4rem; display: grid; gap: 0.7rem; }

.mini-budget-row { display: grid; gap: 0.35rem; font-size: 0.75rem; color: var(--text-faint); }
.mini-budget-row div { display: flex; justify-content: space-between; }
.mini-budget-row b { color: var(--text); font-weight: 700; }

.bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }

.bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  /* Runs pale to saturated. Mixing toward black, which gave the bar depth on
     a dark page, turns every category muddy on white. */
  background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 58%, #fff), var(--bc));
  box-shadow: 0 1px 4px -1px color-mix(in srgb, var(--bc) 55%, transparent);
  transition: width 1.3s var(--ease-out);
}

.is-visible .bar i { width: var(--fill, 50%); }

/* Category chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.4rem; }
.chips--tight { margin-top: 1.1rem; gap: 0.4rem; }
.chips--tight .chip { padding: 0.38rem 0.7rem; font-size: 0.74rem; }

/* Deposit streak: filled dots for the run so far, hollow for the rest. */
.streak { display: flex; align-items: center; gap: 0.3rem; margin-top: 1rem; }
.streak i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.streak i.is-on { background: var(--c); border-color: var(--c); }
.streak span {
  margin-left: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint);
}

/* The trust row sits straight on the particle field, where plain text was
   competing with the dots. Each item carries its own paper now. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  transition: transform 0.25s var(--ease-spring), background-color 0.25s ease, box-shadow 0.25s ease;
}

.chip:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--c) 20%, transparent);
  box-shadow: 0 10px 22px -12px var(--c);
}

.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }

/* Sparkline of the month */
.spark { margin-top: 1.4rem; display: flex; align-items: flex-end; gap: 9px; height: 58px; }

.spark span {
  flex: 1;
  max-width: 14px;
  border-radius: 3px;
  height: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--c) 30%, transparent), var(--c));
  transition: height 0.9s var(--ease-out);
  transition-delay: calc(var(--i) * 60ms);
}

.is-visible .spark span { height: var(--h); }

/* ------------------------------- Showcase -------------------------------- */

.showcase {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.tilt { position: relative; perspective: 1100px; }

.tilt-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease-out);
  will-change: transform;
}

.panel {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #ffffff, #f1f6fd);
  box-shadow: var(--shadow-lg), inset 0 1px 0 #ffffff;
}

.panel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.dots { display: flex; gap: 0.35rem; }
.dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }

.panel-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.panel-balance small { font-size: 0.75rem; font-weight: 600; color: var(--text-faint); }

.panel-balance b {
  display: block;
  margin-top: 0.3rem;
  font-size: clamp(1.9rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.delta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding: 0.24rem 0.68rem;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.14);
  color: var(--success);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Donut of the month's spending, sliced in the category colours. */
.donut-block {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.donut { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.donut svg { transform: rotate(-90deg); overflow: visible; }

.donut circle {
  fill: none;
  stroke-width: 13;
  stroke-linecap: round;
  stroke-dasharray: var(--len) 1000;
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.1s var(--ease-out);
  transition-delay: calc(var(--i) * 140ms);
}

.is-visible .donut circle { stroke-dashoffset: 0; }

.donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

/* The ring's hole is ~79px across: the amount has to fit inside it. */
.donut-center b { font-size: 0.86rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.donut-center small { display: block; font-size: 0.6rem; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; }

.donut-legend { display: grid; gap: 0.5rem; }

.donut-legend li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.donut-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex-shrink: 0; }
.donut-legend b { margin-left: auto; color: var(--text); font-weight: 700; }

.rings { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-top: 0.85rem; }

.ring-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.ring {
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color, var(--ember)) calc(var(--p, 0) * 1%), rgba(16, 42, 86, 0.1) 0);
  transition: background 1.4s var(--ease-out);
  display: grid;
  place-items: center;
}

/* Matches the ring card's own surface, so the centre reads as a hole in
   the ring rather than a hole in the page. */
.ring::after { content: ''; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: #fdfeff; }
.ring-card small { display: block; font-size: 0.68rem; color: var(--text-faint); }
.ring-card b { font-size: 0.95rem; }

.tx { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--border); display: grid; gap: 0.85rem; }
.tx li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.82rem; }

.tx-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--c, #64748b) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #64748b) 30%, transparent);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.tx-info { flex: 1; font-weight: 600; }
.tx-info small { display: block; font-weight: 500; font-size: 0.7rem; color: var(--text-faint); }
.tx b { font-weight: 700; }
.tx .neg { color: #c5281c; }
.tx .pos { color: var(--success); }

.float-badge {
  position: absolute;
  right: -1.5rem;
  bottom: -2.6rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.15rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  transform: translateZ(60px);
  animation: floaty 6s ease-in-out infinite;
}

.float-badge em { font-size: 1.5rem; font-style: normal; }
.float-badge b { display: block; font-size: 0.9rem; }
.float-badge small { color: var(--text-faint); font-size: 0.7rem; }

@keyframes floaty {
  0%, 100% { transform: translateZ(60px) translateY(0); }
  50% { transform: translateZ(60px) translateY(-9px); }
}

.feature-list { display: grid; gap: 1.1rem; margin-top: 2rem; }
.feature-list li { display: flex; gap: 0.9rem; align-items: flex-start; }

.feature-list .tick {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  color: var(--c);
}

.feature-list .tick svg { width: 0.85rem; height: 0.85rem; }
.feature-list b { display: block; font-size: 0.98rem; }
.feature-list p { font-size: 0.88rem; margin-top: 0.15rem; }

/* -------------------------------- Beams ---------------------------------- */

.beams {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(2rem, 8vw, 6rem);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(33, 133, 255, 0.09), transparent 70%),
    #ffffff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.beams-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.beam-col { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); justify-items: center; position: relative; z-index: 2; }

.node {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: #ffffff;
  font-size: 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-spring), border-color 0.3s ease, box-shadow 0.3s ease;
}

.node:hover {
  transform: scale(1.08);
  border-color: rgba(64, 173, 255, 0.65);
  box-shadow: 0 14px 34px -14px rgba(33, 133, 255, 0.8);
}

.node--hub {
  width: 6rem;
  height: 6rem;
  border-color: rgba(224, 85, 16, 0.55);
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 168, 60, 0.28), transparent 70%),
    #ffffff;
  box-shadow: var(--shadow-md), 0 0 40px -14px rgba(224, 85, 16, 0.55);
}

.node--hub img {
  width: auto;
  height: 2.5rem;
  max-width: 78%;
  filter: drop-shadow(0 2px 6px rgba(16, 42, 86, 0.25));
}

.node--person { width: 4.6rem; height: 4.6rem; padding: 0; overflow: hidden; background: none; }
.node--person img { width: 100%; height: 100%; border-radius: 50%; }

.node-label {
  position: relative;
  z-index: 2;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint);
  text-align: center;
}

.beam-item { display: grid; justify-items: center; }

/* ----------------------------- Achievements ------------------------------ */
/* A row of medals inside the Conquistas card; they unlock one after the
   other as the card comes into view (main.js). */

.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 1.3rem; }
.badge { display: grid; justify-items: center; gap: 0.6rem; text-align: center; }

.badge i {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 2px dashed var(--border);
  background: var(--surface);
  font-size: 1.2rem;
  font-style: normal;
  filter: grayscale(1);
  opacity: 0.45;
  transform: scale(0.9);
  transition: all 0.55s var(--ease-spring);
}

.badge span { font-size: 0.64rem; line-height: 1.25; font-weight: 700; color: var(--text-faint); transition: color 0.5s ease; }

.badge.is-unlocked i {
  filter: none;
  opacity: 1;
  transform: scale(1);
  border-style: solid;
  border-color: rgba(200, 128, 12, 0.8);
  background: radial-gradient(circle at 50% 35%, rgba(255, 196, 90, 0.5), rgba(255, 168, 50, 0.28));
  box-shadow: 0 8px 22px -10px rgba(200, 128, 12, 0.75);
}

.badge.is-unlocked span { color: var(--text); }

/* -------------------------------- Pricing -------------------------------- */

/* Mensal / Semestral / Anual. Hidden until the script shows it: without JS the
   prices stay monthly and there is nothing to toggle. */
.period-toggle {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 2rem;
  padding: 0.3rem;
  gap: 0.15rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.period-toggle[hidden] { display: none; }
.period-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.period-toggle button:hover { color: var(--text); }
.period-toggle button[aria-checked="true"] {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 480px) {
  .period-toggle { width: 100%; }
  .period-toggle button { flex: 1; justify-content: center; gap: 0.3rem; padding: 0.55rem 0.35rem; font-size: 0.8rem; }
  .period-toggle em { padding: 0.1rem 0.32rem; font-size: 0.62rem; }
}
.period-toggle em {
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-home) 16%, transparent);
  color: color-mix(in srgb, var(--c-home) 80%, #000);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

.pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 820px; margin-inline: auto; }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1rem + 1.4vh, 2.4rem) clamp(1.5rem, 2.6vw, 2.4rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.74));
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-out), border-color 0.4s ease, box-shadow 0.4s ease;
}

.plan::after { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--c, var(--amber)) 45%, transparent); }
.plan:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 40%, var(--border)); }

.plan--featured {
  border-color: rgba(255, 138, 40, 0.5);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 138, 40, 0.16), transparent 65%),
    linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.74));
  box-shadow:
    var(--shadow-md),
    0 32px 60px -34px rgba(224, 85, 16, 0.4);
}

/* z-index: the card's ::after (the 1px highlight along its top edge) comes
   later in the paint order and would otherwise run straight through the tag. */
.plan-tag {
  position: absolute;
  z-index: 2;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--grad-accent);
  color: #180a02;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(255, 122, 24, 0.9);
}

.plan h3 { font-size: 1.35rem; }
.plan .plan-sub { margin-top: 0.3rem; font-size: 0.86rem; }

.plan-price { margin-top: clamp(0.9rem, 0.4rem + 1.2vh, 1.5rem); font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.035em; color: var(--text); }
.plan-equiv { margin-top: 0.35rem; font-size: 0.82rem; color: var(--text-dim); }
.plan-equiv[hidden] { display: none; }
.plan-equiv b { color: color-mix(in srgb, var(--c-home) 80%, #000); font-weight: 700; }
.plan-pix { display: block; margin-top: 0.85rem; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
.plan-pix[hidden] { display: none; }
.plan-pix:hover { color: var(--text); }
.plan-price span { font-size: 0.95rem; font-weight: 600; color: var(--text-faint); letter-spacing: 0; }

.plan ul { display: grid; align-content: start; gap: clamp(0.5rem, 0.2rem + 0.7vh, 0.75rem); margin-top: clamp(1rem, 0.5rem + 1.3vh, 1.75rem); flex: 1; }
.plan li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; }
.plan li svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: 0.18rem; color: var(--c); }
.plan .btn { margin-top: clamp(1.1rem, 0.6rem + 1.3vh, 1.9rem); }

.pricing-note { margin-top: 2rem; text-align: center; font-size: 0.82rem; color: var(--text-faint); }

/* ---------------------------------- FAQ ---------------------------------- */

.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 0.8rem; }

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Stays white when open: on paper the recessed --surface-2 would read as
   the answer being disabled. The border carries the open state instead. */
.faq-item.is-open { border-color: rgba(26, 122, 201, 0.5); background: #ffffff; box-shadow: var(--shadow-sm); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  text-align: left;
  cursor: pointer;
}

.faq-q svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--text-faint); transition: transform 0.35s var(--ease-out), color 0.3s ease; }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); color: var(--sky); }

.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-out); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 1.4rem 1.3rem; font-size: 0.92rem; }

/* -------------------------------- Final CTA ------------------------------- */

.cta {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 120% at 20% 0%, rgba(245, 57, 12, 0.14), transparent 60%),
    radial-gradient(70% 120% at 80% 100%, rgba(33, 133, 255, 0.16), transparent 60%),
    var(--bg-soft);
  overflow: hidden;
}

.cta h2 { max-width: 22ch; margin-inline: auto; }
.cta p { max-width: 44ch; margin: 1.1rem auto 0; }
.cta .hero-cta { margin-top: 2rem; }
/* /entrar: the "no account yet" and support lines under the button; their links must read as links */
.entrar-note a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.entrar-note a:hover { text-decoration-thickness: 2px; }

/* --------------------------------- Footer --------------------------------- */

.footer { border-top: 1px solid var(--border); padding-block: 2.5rem; }
.footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
/* Wraps: with five links the row overflowed a 390px screen and gave the
   whole page a horizontal scrollbar. */
.footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-size: 0.85rem; font-weight: 600; color: var(--text-faint); }
.footer-links a:hover { color: var(--text); }
.footer small { font-size: 0.78rem; color: var(--text-faint); }
/* The three e-mails sit on their own line under the links, so a long address
   never pushes the row wider than the screen. */
.footer-contact { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0; font-size: 0.82rem; color: var(--text-faint); }
.footer-contact a { overflow-wrap: anywhere; }
.footer-contact a:hover { color: var(--text); }
/* Links legais e o botão "Preferências de cookies" (um botão que parece link). */
.footer-legal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0; font-size: 0.82rem; color: var(--text-faint); }
.footer-legal a:hover, .footer-legal button:hover { color: var(--text); }
.footer-legal button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.faq-a a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* -------------------------------- Reveal ---------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------- Mobile --------------------------------- */

@media (max-width: 980px) {
  /* No centre column to keep once the links fold into the menu: back to a
     plain row, or the actions would slide into the middle track. */
  .header .container { display: flex; justify-content: space-between; }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }

  .header.is-open {
    background: rgba(244, 247, 253, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom-color: var(--border);
  }

  /* The open menu is absolutely positioned, so it sits outside the header's
     own box and needs to carry its own background — without this the hero
     shows straight through the links. */
  .header.is-open .nav {
    display: flex;
    position: absolute;
    top: 4.75rem;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.5rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }

  .header.is-open .nav a { padding: 0.9rem 0.5rem; border-radius: var(--radius-sm); }

  .showcase { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .card--wide, .card--half, .card--third, .card--full { grid-column: span 1; }
  .pricing { grid-template-columns: 1fr; }
  .beams { grid-template-columns: 1fr; justify-items: center; gap: 2rem; }
  .beam-col { grid-auto-flow: column; grid-auto-columns: max-content; }
  .beams-svg { display: none; }

  .brand small { display: none; }
  .header .btn--primary { padding: 0.7rem 1.1rem; font-size: 0.85rem; white-space: nowrap; }

  .btn-login { display: none; }

  /* No radius on this one: with the links' rounded corners its divider line
     curved up at both ends. (.nav a would win over .nav-login, hence a.) */
  .header.is-open .nav a.nav-login { border-radius: 0; }
  .header.is-open .nav-login {
    display: block;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
    padding-top: 1.1rem;
    color: var(--text);
  }
}

/* With one message and one button the hero no longer fills a tall screen (a
   phone, a tablet upright), and centring it in a full-height box left a gap
   under the header. It starts near the top instead, and the product shows
   just below. */
@media (max-width: 700px), (max-width: 1100px) and (orientation: portrait) {
  .hero {
    min-height: 0;
    justify-content: flex-start;
    padding-block: calc(var(--header-h) + var(--s-5)) var(--s-5);
  }
}

@media (max-width: 700px) {

  /* The comets are choreographed around the wordmark, so on a phone the canvas
     has to keep covering the whole hero — cropping it to the top third, which
     suited a sphere, left them nowhere to fly. Only the fade stays. */
  .sphere {
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
}

/* The cue tells a desktop reader there is more below a fold they cannot feel.
   On a phone the hero visibly runs past the edge and swiping is the instinct,
   so the cue is 85px of a scarce first screen buying nothing — and without it
   the hero finally fits the viewport instead of spilling 80px into the next
   scene. */
/* A phone is about 340px wide inside its gutters: the tagline's tracking is what
   pushed "SIMPLIFICADO" onto a second line, so it tightens rather than wraps. */
@media (max-width: 480px) {
}

@media (max-height: 860px) { :root { --u: 0.8; } }
@media (max-height: 740px) { :root { --u: 0.62; } }

@media (max-height: 760px), (max-width: 700px) {
  .scroll-cue { display: none; }
}

@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .donut-block { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .donut-legend { width: 100%; }
  /* Below the panel, not over its last amount. */
  .float-badge { right: 0.5rem; bottom: -3.4rem; padding: 0.7rem 0.9rem; }
  .tilt { margin-bottom: 2.6rem; }
  /* Two ring cards side by side left each label one word per line. */
  .rings { grid-template-columns: 1fr; }
  .footer .container { flex-direction: column; align-items: flex-start; }
  .beam-col { grid-auto-flow: row; grid-template-columns: repeat(2, max-content); justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal { opacity: 1; transform: none; }
  .badge i { filter: none; opacity: 1; transform: none; }
}


/* Linha de aceite ("Ao continuar, você concorda com…") junto dos botões de teste grátis e de entrar. */
.accept-note { margin-top: 0.8rem; font-size: 0.8rem; line-height: 1.5; color: var(--text-faint); }
.accept-note a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.accept-note a:hover { text-decoration-thickness: 2px; }
.plan .accept-note { text-align: center; }
.hero .accept-note, .cta .accept-note { margin-top: 0.7rem; max-width: none; font-size: 0.8rem; line-height: 1.5; color: var(--text-faint); }

/* ------------------------- Consentimento de cookies ------------------------- */

/* As três ações têm o mesmo desenho: recusar é tão fácil e tão visível quanto aceitar. */
.consent {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(38rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.25rem 1.35rem 1.15rem;
  background: #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-lg);
}
.consent[hidden], .consent [hidden] { display: none; }
.consent-title { font-size: 1.05rem; letter-spacing: -0.015em; }
.consent-text { margin-top: 0.5rem; font-size: 0.88rem; line-height: 1.6; }
.consent-text a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.consent-btn {
  flex: 1;
  min-height: 2.9rem;
  padding: 0.4rem 0.8rem;
  border: 1.5px solid var(--text);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.consent-btn:hover { background: var(--text); color: #ffffff; }
.consent-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-faint);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.consent-close:hover { background: var(--surface-2); color: var(--text); }
.consent-cats { margin: 0.9rem 0 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: 0.9rem; }
.consent-cats li + li { border-top: 1px solid var(--border); }
.consent-cat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; cursor: pointer; }
.consent-cat-text { display: grid; gap: 0.15rem; }
.consent-cat-text strong { font-size: 0.9rem; }
.consent-cat-text small { font-size: 0.8rem; line-height: 1.45; color: var(--text-dim); }
.consent-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 2.75rem;
  height: 1.6rem;
  margin: 0;
  border: 1.5px solid var(--text);
  border-radius: 999px;
  background: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.consent-switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--text);
  transform: translateY(-50%);
  transition: left 0.2s ease, background-color 0.2s ease;
}
.consent-switch:checked { background: var(--text); }
.consent-switch:checked::after { left: calc(100% - 1.2rem); background: #ffffff; }
.consent-switch:disabled { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 560px) {
  .consent { padding: 1.1rem 1.1rem 1rem; }
  .consent-actions { flex-direction: column; }
}

/* ------------------------- Páginas legais (/privacidade, /cookies, /termos, /exclusao-de-dados) ------------------------- */
/* Geradas por scripts/build-legal.mjs a partir de docs/legal/*.md. Coluna de leitura de ~720px. */

.legal { max-width: 45rem; margin-inline: auto; }
.legal h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); }
.legal-meta { margin-top: 0.9rem; font-size: 0.88rem; color: var(--text-faint); }
.legal-meta + p { margin-top: 1.4rem; font-size: 1.04rem; line-height: 1.75; }
.legal h2 {
  margin: 2.6rem 0 0.8rem;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  letter-spacing: -0.02em;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.legal h3 { margin: 1.7rem 0 0.4rem; font-size: 1.05rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.legal p, .legal li { font-size: 0.98rem; line-height: 1.75; }
.legal p + p, .legal p + ul, .legal p + ol, .legal ul + p, .legal ol + p { margin-top: 0.8rem; }
.legal ul, .legal ol { margin: 0.7rem 0; padding-left: 1.4rem; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal ul ul { list-style: circle; margin: 0.4rem 0; }
.legal li { color: var(--text-dim); padding-left: 0.2rem; }
.legal li + li { margin-top: 0.4rem; }
.legal a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal a:hover { text-decoration-thickness: 2px; }
.legal strong { color: var(--text); }
.legal code { padding: 0.1em 0.35em; border-radius: 0.35rem; background: var(--surface-2); font-size: 0.86em; }
.legal-links { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); font-size: 0.9rem; }
.legal-toc { margin-top: 2rem; padding: 1.1rem 1.3rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); }
.legal-toc p { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.legal-toc ol { margin: 0.6rem 0 0; padding-left: 1.3rem; columns: 2 15rem; column-gap: 2rem; }
.legal-toc li { font-size: 0.92rem; line-height: 1.45; break-inside: avoid; }
.legal-toc a { font-weight: 600; text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
/* A tabela rola na horizontal dentro da própria caixa: no celular a página não ganha rolagem lateral. */
.legal-table { margin: 1.1rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 0.9rem; background: var(--surface); }
.legal-table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.9rem; }
.legal-table th, .legal-table td { padding: 0.75rem 0.95rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.55; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table th { font-weight: 700; color: var(--text); background: var(--surface-2); }
.legal-table td { color: var(--text-dim); }

/* ------------------- Dor → emoção → solução (blocos de dor) ------------------- */

.story-text { margin: 1.4rem 0 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem); line-height: 1.65; color: var(--text-dim); text-wrap: pretty; }
.story-text--center { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }

.pain-cta { margin-top: 2rem; }
.pain-cta--center { display: flex; justify-content: center; margin-top: 2.2rem; }
.family-note { margin: 1.4rem auto 0; max-width: 40rem; text-align: center; font-size: 0.95rem; color: var(--text-dim); }

/* Dor 3: visual à esquerda, texto à direita. */
.showcase--flip { grid-template-columns: 1.1fr 1fr; }
.future-visual { display: grid; gap: 1.1rem; }

/* Faixa de confiança */
.trust-section { padding-block: clamp(2.5rem, 2rem + 3vh, 4.5rem); }
.trust-title { text-align: center; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); }
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1.8rem; }
.trust li {
  padding: 1.25rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}
.trust b { display: block; font-size: 1rem; }
.trust span { display: block; margin-top: 0.35rem; font-size: 0.88rem; line-height: 1.5; color: var(--text-dim); }

@media (max-width: 980px) {
  .showcase--flip { grid-template-columns: 1fr; }
  .trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .trust { grid-template-columns: 1fr; }
  .pain-cta .btn { width: 100%; }
}

/* Botão de plano enquanto a página de pagamento da Stripe abre (checkout.js). */
.btn.is-loading { pointer-events: none; opacity: 0.75; cursor: progress; }