/* CoopFlux landing. Tempo em frames a 30fps; raio por profundidade 60/32/20/13/6.
   Paleta derivada do logo: azul royal/azure (ribbon), navy (sombra), verde crescimento (seta e pessoas). */
:root {
  --f: calc(1s / 30);
  --t-micro: calc(var(--f) * 4);   /* 133ms  foco, toggle */
  --t-hover: calc(var(--f) * 12);  /* 400ms  hover */
  --t-enter: calc(var(--f) * 40);  /* 1333ms entrada */
  --t-title: calc(var(--f) * 50);  /* 1667ms titulo, mais lento de proposito */
  --ease-sig: cubic-bezier(0.52, 0, 0.48, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --r-bar: 60px; --r-panel: 32px; --r-card: 20px; --r-img: 13px; --r-ctl: 6px;

  --blue: #0060f0;        /* royal */
  --blue-press: #004fc4;
  --azure: #0090f0;
  --navy: #001878;
  --navy-deep: #001060;
  --teal: #00b070;
  --green: #6fe04a;
  --lime: #a0f040;
  --grad-blue: linear-gradient(152deg, #0060f0 0%, #0078f2 60%, #0090f0 100%);
  --grad-grow: linear-gradient(100deg, #00b070 0%, #6fe04a 55%, #a0f040 100%);

  --paper: #f2f6fd;
  --paper-2: #e4ecf9;
  --card: #fbfdff;
  --text: #0c1a52;
  --muted: #475888;
  --line: #d0dbf0;
  --on-dark: #f1f5ff;
  --on-dark-muted: #b9c6ea;
  --line-dark: rgba(241, 245, 255, 0.16);
  --blue-tint: color-mix(in oklch, var(--blue) 10%, transparent);
  --green-tint: color-mix(in oklch, var(--teal) 14%, transparent);

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-cap: 0.75rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.375rem;
  --fs-h2: clamp(2.25rem, 5.2vw, 4.5rem);
  --fs-h1: clamp(2.5rem, 6.4vw, 5.75rem);

  --gutter: 16px;
  --focus: var(--blue);
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 var(--fs-body)/1.6 var(--font-ui); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.on-dark { --focus: var(--lime); }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--blue); color: #fff; padding: 12px 16px; border-radius: var(--r-ctl); text-decoration: none; }
.skip:focus { top: 16px; }
.wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--gutter); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1; font-variant-ligatures: none; }

h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; color: var(--navy); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--navy); }
.lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 38ch; }
p { max-width: 68ch; text-wrap: pretty; }
.cap { font-size: var(--fs-cap); line-height: 1.4; color: var(--muted); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--on-dark); }
.hl { color: var(--lime); }

/* grao: textura de superficie */
.grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* marca: simbolo oficial + wordmark em tipografia */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: auto; height: 34px; }
.brand b { font: 700 1.3125rem/1 "Helvetica Neue", var(--font-display); letter-spacing: -0.03em; color: var(--on-dark); }

/* botoes */
.btn { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px; border-radius: var(--r-ctl); font: 600 1rem/1 var(--font-ui); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color var(--t-micro) var(--ease-sig), color var(--t-micro) var(--ease-sig), border-color var(--t-micro) var(--ease-sig); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-press); }
.btn--grow { background: var(--lime); color: var(--navy-deep); }
.btn--grow:hover { background: var(--green); }
.btn--ghost { color: var(--on-dark); border-color: var(--line-dark); }
.btn--ghost:hover { border-color: var(--lime); color: var(--lime); }
.arrow { position: relative; width: 16px; height: 16px; overflow: hidden; flex: none; }
.arrow svg { position: absolute; inset: 0; width: 16px; height: 16px; transition: transform var(--t-hover) var(--ease-out); }
.arrow svg + svg { transform: translate(-100%, 100%); }
.btn:hover .arrow svg:first-child { transform: translate(100%, -100%); }
.btn:hover .arrow svg + svg { transform: translate(0, 0); }

/* header */
.header { position: fixed; z-index: 50; top: 12px; left: 0; right: 0; padding-inline: var(--gutter); pointer-events: none; }
.bar { pointer-events: auto; max-width: 80rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 6px 6px 6px 14px; border-radius: var(--r-bar); background: rgba(0, 16, 96, 0.8); background: color-mix(in oklch, var(--navy-deep) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-dark); color: var(--on-dark); }
.nav { display: none; }
.nav a { padding: 10px 14px; border-radius: var(--r-bar); text-decoration: none; font-size: 0.9375rem; color: var(--on-dark-muted); transition: color var(--t-micro) var(--ease-sig); }
.nav a:hover { color: var(--on-dark); }
.bar__cta { display: none; min-height: 46px; padding: 0 20px; border-radius: var(--r-bar); }
.menu-btn { width: 46px; height: 46px; border-radius: var(--r-bar); border: 1px solid var(--line-dark); background: transparent; color: var(--on-dark); cursor: pointer; display: grid; place-items: center; }
.menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.menu { pointer-events: auto; max-width: 80rem; margin: 8px auto 0; padding: 12px; border-radius: var(--r-panel); background: var(--navy-deep); border: 1px solid var(--line-dark); color: var(--on-dark); display: none; }
.menu.open { display: block; }
.menu a { display: block; padding: 14px 12px; text-decoration: none; border-radius: var(--r-img); font-size: 1.0625rem; }
.menu a:hover { background: rgba(241, 245, 255, 0.06); }
.menu .btn { width: 100%; justify-content: center; margin-top: 8px; }
@media (min-width: 560px) { .bar__cta { display: inline-flex; } }
@media (min-width: 960px) { .nav { display: flex; gap: 2px; } .menu-btn { display: none; } .menu { display: none !important; } }

/* hero */
.hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(168deg, #001060 0%, #001478 100%); color: var(--on-dark); padding: 112px 0 56px; }
.hero__grid { position: relative; display: grid; gap: 24px; align-items: center; }
.hero .lead { margin-top: 28px; color: var(--on-dark-muted); max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__meta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.875rem; color: var(--on-dark-muted); }
.hero__meta li { display: flex; align-items: center; gap: 8px; }
.hero__meta li::before { content: ""; width: 6px; height: 6px; background: var(--lime); border-radius: 1px; }
.stage { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; justify-self: center; perspective: 1100px; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--t-enter) var(--ease-sig); }
.stage.live canvas { opacity: 1; }
.stage .logo { position: absolute; left: 50%; top: 50%; width: 52%; height: auto; transform: translate(-50%, -50%) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; filter: drop-shadow(0 28px 24px rgba(0, 8, 60, 0.45)); }
@media (min-width: 960px) {
  .hero { padding: 120px 0 72px; min-height: min(100svh, 60rem); display: flex; align-items: center; }
  .hero > .wrap { width: 100%; }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; }
  .stage { max-width: none; width: 112%; margin-right: -12%; justify-self: stretch; }
}

/* mascara silaba a silaba */
.mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.04em 0.12em; margin: -0.06em -0.04em -0.12em; }
.mask > span { display: inline-block; }
.js .mask > span { transform: translateX(var(--from, 2rem)); transition: transform var(--t-title) var(--ease-sig); transition-delay: calc(var(--f) * var(--d, 0)); }
.js.ready .mask > span { transform: none; }
.js .rise { opacity: 0; translate: 0 0.5rem; transition: opacity var(--t-enter) var(--ease-sig), translate var(--t-enter) var(--ease-out); transition-delay: calc(var(--f) * var(--d, 0)); }
.js.ready .rise { opacity: 1; translate: 0 0; }

/* reveal on scroll */
.js [data-reveal] { opacity: 0; translate: 0 12px; transition: opacity var(--t-enter) var(--ease-sig), translate var(--t-enter) var(--ease-out); transition-delay: calc(var(--f) * 4 * var(--i, 0)); }
.js [data-reveal].in { opacity: 1; translate: 0 0; }

section { position: relative; }

/* o que e */
.about { padding: clamp(4rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem); }
.about__grid { display: grid; gap: 48px; }
.about h2 { max-width: 14ch; }
.about__text { margin-top: 28px; color: var(--muted); font-size: 1.1875rem; max-width: 52ch; }
.pillars li { padding: 24px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.pillars li:last-child { border-bottom: 1px solid var(--line); }
.pillars p { color: var(--muted); }
@media (min-width: 960px) { .about__grid { grid-template-columns: 7fr 5fr; gap: 96px; align-items: end; } .pillars li { padding: 28px 0; } }

/* funcionalidades */
.features { padding: 0 0 clamp(4rem, 9vw, 8rem); }
.features h2 { max-width: 16ch; margin-bottom: 40px; }
.bento { display: grid; gap: 16px; }
.fcard { position: relative; padding: 28px 24px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; transition: transform var(--t-hover) var(--ease-out); }
.fcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 1px 2px rgba(0, 24, 120, 0.08), 0 18px 32px -14px rgba(0, 72, 200, 0.3); transition: opacity var(--t-hover) var(--ease-out); }
.fcard:hover { transform: translateY(-4px); }
.fcard:hover::after { opacity: 1; }
.fcard p { color: var(--muted); font-size: 1rem; }
.ico { width: 44px; height: 44px; border-radius: var(--r-img); background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; flex: none; }
.ico--g { background: var(--green-tint); color: #007a4e; }
.ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fcard--app { background: var(--grad-blue); border-color: transparent; color: #fff; border-radius: var(--r-panel); overflow: hidden; }
.fcard--app h3 { color: #fff; font-size: clamp(1.75rem, 3.4vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.05; max-width: 14ch; }
.fcard--app p { color: #fff; }
.fcard--app .ico { background: rgba(255, 255, 255, 0.18); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 20px; }
.chips li { padding: 6px 12px; border-radius: var(--r-ctl); background: rgba(0, 16, 96, 0.28); font-size: 0.875rem; }
.chips li:first-child { background: var(--lime); color: var(--navy-deep); font-weight: 600; }
.flow { margin-top: 8px; display: grid; gap: 0; }
.flow li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--text); }
.flow li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); flex: none; }
.regua { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.regua li { padding: 6px 10px; border-radius: var(--r-ctl); font-size: 0.8125rem; background: var(--paper-2); color: var(--text); }
.regua li:nth-child(3) { background: var(--blue-tint); color: #0045b8; }
.split { margin-top: 8px; display: flex; gap: 3px; height: 36px; }
.split i { display: block; border-radius: var(--r-ctl); }
.split i:nth-child(1) { flex: 34; background: var(--blue); }
.split i:nth-child(2) { flex: 22; background: var(--azure); }
.split i:nth-child(3) { flex: 26; background: var(--teal); }
.split i:nth-child(4) { flex: 18; background: var(--green); }
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  .fcard { grid-column: span 6; padding: 32px 28px; }
  .fcard--app { grid-column: span 12; padding: 40px; }
}
@media (min-width: 1100px) {
  .fcard { grid-column: span 4; }
  .fcard--app { grid-column: span 7; min-height: 24rem; }
  .fcard--captura { grid-column: span 5; }
  .fcard--half { grid-column: span 6; }
}

/* demo do app */
.demo { background: linear-gradient(176deg, #001060 0%, #001a82 100%); color: var(--on-dark); padding: clamp(4rem, 9vw, 8rem) 0; overflow: hidden; --focus: var(--lime); }
.demo__head { position: relative; display: grid; gap: 40px; }
.demo h2 { max-width: 13ch; }
.demo .lead { color: var(--on-dark-muted); margin-top: 20px; }
.todo li { padding: 14px 0; border-top: 1px solid var(--line-dark); }
.todo li:last-child { border-bottom: 1px solid var(--line-dark); }
.todo strong { display: block; font-weight: 600; font-size: 1.0625rem; }
.todo span { color: var(--on-dark-muted); font-size: 0.9375rem; }
@media (min-width: 960px) { .demo__head { grid-template-columns: 6fr 5fr; gap: 96px; align-items: end; } }

.rail { position: relative; display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 56px; padding: 8px max(var(--gutter), calc((100vw - 80rem) / 2 + var(--gutter))) 24px; scroll-padding-inline: max(var(--gutter), calc((100vw - 80rem) / 2 + var(--gutter))); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.slot { flex: none; scroll-snap-align: start; }
.slot:nth-child(even) { margin-top: 36px; }
.slot figcaption { margin-top: 18px; font-size: 0.9375rem; color: var(--on-dark-muted); max-width: 248px; }
.slot figcaption b { display: block; color: var(--on-dark); font-weight: 600; font-size: 1rem; }
.rail-ctl { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.rail-btn { width: 48px; height: 48px; border-radius: var(--r-img); border: 1px solid var(--line-dark); background: transparent; color: var(--on-dark); cursor: pointer; display: grid; place-items: center; transition: border-color var(--t-micro) var(--ease-sig), color var(--t-micro) var(--ease-sig); }
.rail-btn:hover { border-color: var(--lime); color: var(--lime); }
.rail-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn--next svg { transform: scaleX(-1); }
.demo .cap { color: var(--on-dark-muted); margin-left: 12px; }

.phone { position: relative; width: 248px; height: 508px; padding: 8px; border-radius: 46px; background: linear-gradient(152deg, #2d3b78, #0a1448); border: 1px solid rgba(241, 245, 255, 0.2); box-shadow: 0 40px 50px -30px rgba(0, 4, 40, 0.7); }
.phone::before { content: ""; position: absolute; z-index: 3; top: 18px; left: 50%; width: 68px; height: 20px; translate: -50% 0; border-radius: var(--r-bar); background: #02061c; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: var(--paper); color: var(--text); padding: 46px 14px 0; display: flex; flex-direction: column; gap: 9px; font-size: 12px; line-height: 1.35; }
.sb { position: absolute; top: 15px; left: 24px; right: 24px; display: flex; justify-content: space-between; font: 500 11px/1 var(--font-mono); z-index: 4; }
.screen--dark-top .sb { color: #fff; }
.app-top { display: flex; align-items: center; justify-content: space-between; }
.app-brand { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12px; color: var(--navy); }
.tile { width: 22px; height: 22px; border-radius: var(--r-ctl); background: var(--grad-blue); color: #fff; display: grid; place-items: center; font: 700 10px/1 var(--font-display); }
.tile--lg { width: 44px; height: 44px; border-radius: var(--r-img); font-size: 17px; }
.avatar { width: 28px; height: 28px; border-radius: var(--r-ctl); background: var(--paper-2); display: grid; place-items: center; font-weight: 600; font-size: 11px; color: var(--muted); }
.s-hello { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.025em; color: var(--navy); line-height: 1.15; }
.s-card { border-radius: var(--r-card); padding: 13px; background: var(--card); border: 1px solid var(--line); }
.s-card--blue { background: var(--grad-blue); color: #fff; border-color: transparent; }
.s-label { font-size: 11px; opacity: 0.9; }
.s-big { font: 500 30px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1; letter-spacing: -0.04em; margin-top: 3px; }
.s-big small { font-size: 14px; letter-spacing: 0; opacity: 0.85; margin-right: 2px; }
.s-chart { margin-top: 8px; width: 100%; height: 42px; }
.s-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s-row + .s-row { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.s-val { font: 500 12px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-ctl); font-size: 11px; font-weight: 500; background: var(--blue-tint); color: #0045b8; white-space: nowrap; }
.chip--ok { background: var(--green-tint); color: #006b45; }
.chip--ok::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: currentColor; }
.chip--lime { background: var(--lime); color: var(--navy-deep); font-weight: 600; }
.s-btn { display: grid; place-items: center; min-height: 40px; border-radius: var(--r-ctl); background: var(--blue); color: #fff; font-weight: 600; font-size: 13px; }
.s-btn--line { background: transparent; color: var(--blue); border: 1px solid var(--line); }
.s-btn--grow { background: var(--lime); color: var(--navy-deep); }
.tabs { margin: auto -14px 0; padding: 7px 6px 13px; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--line); }
.tabs div { display: grid; justify-items: center; gap: 2px; font-size: 9.5px; color: var(--muted); }
.tabs svg, .s-ico { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tabs .on { color: var(--blue); font-weight: 600; }
.s-back { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--navy); }
.s-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.quick div { display: grid; justify-items: center; gap: 4px; padding: 9px 2px 7px; border-radius: var(--r-img); background: var(--card); border: 1px solid var(--line); font-size: 10px; color: var(--text); }
.quick .s-ico { color: var(--blue); }
/* login */
.screen--login { padding: 0; gap: 0; background: var(--card); }
.login-top { position: relative; padding: 52px 18px 20px; background: linear-gradient(160deg, #001060 0%, #0060f0 100%); color: #fff; display: grid; gap: 10px; }
.login-top h4 { margin: 0; font: 600 20px/1.15 var(--font-display); letter-spacing: -0.025em; }
.login-top p { font-size: 11.5px; opacity: 0.9; }
.login-form { position: relative; margin-top: -14px; padding: 16px 16px 0; border-radius: 28px 28px 0 0; background: var(--card); display: grid; gap: 9px; flex: 1; align-content: start; }
.field { display: grid; gap: 3px; }
.field span { font-size: 10.5px; color: var(--muted); }
.field div { height: 36px; border-radius: var(--r-ctl); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 10px; font: 500 12px/1 var(--font-mono); background: #fff; }
.field div.on { border-color: var(--blue); }
.s-link { text-align: center; font-size: 11px; color: var(--blue); font-weight: 500; }
.bio { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; border-radius: var(--r-ctl); border: 1px solid var(--line); font-weight: 600; font-size: 12px; color: var(--navy); }
.bio .s-ico { color: var(--teal); }
/* fatura */
.steps-mini { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 10px; color: var(--muted); }
.steps-mini i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.steps-mini i.on { background: var(--teal); }
.steps-mini span.on { color: #006b45; font-weight: 600; }
/* creditos */
.ring { position: relative; width: 78px; height: 78px; flex: none; }
.ring svg { width: 78px; height: 78px; transform: rotate(-90deg); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 500 14px/1 var(--font-mono); letter-spacing: -0.04em; color: var(--navy); }
/* clube */
.pills { display: flex; gap: 5px; }
.pills span { padding: 4px 9px; border-radius: var(--r-ctl); background: var(--paper-2); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.pills .on { background: var(--navy); color: #fff; }
.offer { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.offer i { width: 40px; height: 40px; border-radius: var(--r-img); display: grid; place-items: center; color: #fff; }
.offer i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.offer b { display: block; font-size: 12px; color: var(--navy); line-height: 1.2; }
.offer small { font-size: 10.5px; color: var(--muted); }
.offer em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--blue); }
/* indicacoes */
.code { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--r-img); background: rgba(255, 255, 255, 0.16); font: 500 15px/1 var(--font-mono); letter-spacing: 0.02em; }
.code span { display: inline-flex; align-items: center; gap: 4px; font: 600 11px/1 var(--font-ui); background: var(--lime); color: var(--navy-deep); padding: 6px 8px; border-radius: var(--r-ctl); }
.code svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.who { display: flex; align-items: center; gap: 9px; }
.who + .who { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.who .avatar { width: 26px; height: 26px; }
.who b { flex: 1; font-size: 12px; font-weight: 500; color: var(--navy); }
/* perfil */
.perfil-head { display: grid; justify-items: center; gap: 4px; text-align: center; padding-top: 2px; }
.avatar--lg { width: 56px; height: 56px; border-radius: var(--r-card); background: var(--grad-blue); color: #fff; font: 600 19px/1 var(--font-display); }
.toggle { width: 32px; height: 19px; border-radius: 60px; background: var(--line); position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; }
.toggle.on { background: var(--teal); }
.toggle.on::after { left: 15px; }

/* como funciona */
.steps { padding: clamp(4rem, 9vw, 8rem) 0; }
.steps h2 { max-width: 15ch; }
.steps ol { margin-top: 48px; display: grid; gap: 0; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; padding: 24px 0; border-top: 1px solid var(--line); align-items: baseline; }
.step__n { font: 600 clamp(3.5rem, 9vw, 7rem)/0.9 var(--font-display); letter-spacing: -0.05em; color: var(--blue); grid-row: span 2; min-width: 1.1ch; }
.step:last-child .step__n { color: var(--teal); }
.step p { color: var(--muted); }
@media (min-width: 960px) {
  .steps ol { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .step { grid-template-columns: 1fr; padding: 24px 0 0; gap: 12px; position: relative; border-top: 0; }
  .step::before { content: ""; position: absolute; top: 0; left: 0; right: -32px; height: 3px; border-radius: 2px; background: var(--blue); }
  .step:nth-child(2)::before { background: linear-gradient(90deg, #0060f0, #0090f0); }
  .step:nth-child(3)::before { background: linear-gradient(90deg, #0090f0, #00b070); }
  .step:nth-child(4)::before { right: 0; background: linear-gradient(90deg, #00b070, #a0f040); }
  .step__n { grid-row: auto; margin: 16px 0 24px; }
  .step:nth-child(2) { margin-top: 40px; }
  .step:nth-child(3) { margin-top: 80px; }
  .step:nth-child(4) { margin-top: 120px; }
}

/* para cooperativas */
.coop { background: linear-gradient(160deg, #0050d4 0%, #0064f0 100%); color: #fff; padding: clamp(4rem, 9vw, 8rem) 0; overflow: hidden; --focus: #fff; }
.coop__grid { position: relative; display: grid; gap: 48px; }
.coop h2 { max-width: 11ch; color: #fff; }
.coop .lead { margin-top: 24px; color: #fff; }
.gains li { display: grid; gap: 6px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.34); }
.gains li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.34); }
.gains h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.025em; display: flex; align-items: center; gap: 12px; }
.gains h3::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--lime); flex: none; }
.gains p { color: #fff; }
@media (min-width: 960px) {
  .coop__grid { grid-template-columns: 5fr 7fr; gap: 96px; }
  .coop__side { position: sticky; top: 120px; align-self: start; }
  .gains li { grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: baseline; padding: 32px 0; }
}

/* cta final */
.cta { position: relative; isolation: isolate; background: linear-gradient(168deg, #001060 0%, #001478 100%); color: var(--on-dark); padding: clamp(5rem, 12vw, 11rem) 0 clamp(4rem, 8vw, 6rem); overflow: hidden; --focus: var(--lime); }
.cta h2 { max-width: 15ch; font-size: clamp(2.5rem, 6.6vw, 6rem); }
.cta p { margin-top: 28px; color: var(--on-dark-muted); font-size: var(--fs-lead); max-width: 40ch; }
.cta .btn { margin-top: 40px; }
.cta__logo { display: none; position: absolute; z-index: -1; right: -4%; top: 50%; width: min(38vw, 34rem); height: auto; translate: 0 -50%; }
@media (min-width: 960px) { .cta__logo { display: block; } }

/* footer */
.footer { background: var(--navy-deep); color: var(--on-dark); border-top: 1px solid var(--line-dark); padding-top: 56px; overflow: hidden; --focus: var(--lime); }
.footer__top { display: grid; gap: 32px; padding-bottom: 40px; }
.footer nav ul { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer nav a { display: inline-block; padding: 10px 0; text-decoration: none; color: var(--on-dark-muted); transition: color var(--t-micro) var(--ease-sig); }
.footer nav a:hover { color: var(--on-dark); }
.footer .cap { color: var(--on-dark-muted); max-width: 52ch; }
.footer .cap a { color: var(--on-dark); }
.footer__word { font: 700 clamp(5rem, 24vw, 22rem)/0.8 "Helvetica Neue", var(--font-display); letter-spacing: -0.05em; white-space: nowrap; color: rgba(241, 245, 255, 0.08); margin: 16px 0 -0.14em -0.04em; user-select: none; }
@media (min-width: 960px) { .footer__top { grid-template-columns: 1fr auto; align-items: start; } .footer__meta { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .mask > span { transform: none; transition: opacity var(--t-micro) linear; opacity: 0; }
  .js.ready .mask > span { opacity: 1; }
  .js .rise, .js [data-reveal] { translate: none; transition: opacity var(--t-micro) linear; transition-delay: 0s; }
  .fcard:hover { transform: none; }
  .stage .logo { transform: translate(-50%, -50%); }
  .btn:hover .arrow svg:first-child, .btn:hover .arrow svg + svg { transition: none; }
}