/* Turni — Landing layer. Built on colors_and_type.css (tokens) + _kit.css (components).
   Mono-teal + neutrals. PT-BR. Light only. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--td-white); color: var(--td-ink-900); overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--td-teal-200); }

/* warm paper tone matching the creatives */
:root {
  --paper: #FAF6EE;       /* cream from the illustrations */
  --paper-2: #F4EEE2;
  --ink-soft: #3B4248;
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
}

/* ---------- layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--paper { background: var(--paper); }
.section--ink { background: var(--td-gray-900); color: #fff; }
.eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--td-teal-700); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--td-teal-500); border-radius: 2px; }
.section--ink .eyebrow { color: var(--td-teal-400); }
.lead { color: var(--ink-soft); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; max-width: 60ch; }
.section--ink .lead { color: rgba(255,255,255,.72); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lead { margin-inline: auto; }

.sec-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.sec-head.center { margin-inline: auto; align-items: center; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.022em; line-height: 1.02; color: var(--td-ink-900); }
.t-display { font-size: clamp(40px, 6.4vw, 76px); }
.t-h1 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; }
.t-h2 { font-size: clamp(25px, 3vw, 36px); line-height: 1.1; }
.t-h3 { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.25; }
.section--ink .display, .section--ink h2, .section--ink h3 { color: #fff; }

/* ---------- header / nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.82); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s, background .25s; }
.nav.is-stuck { border-color: var(--td-gray-200); box-shadow: var(--shadow-xs); }
.nav__in { display: flex; align-items: center; gap: 28px; height: 72px; }
.nav__logo { height: 30px; width: auto; aspect-ratio: 715 / 204; }
.nav__logo svg, .nav__logo img { height: 100%; width: auto; display: block; }
.nav__links { display: flex; align-items: center; gap: 26px; margin-left: 8px; }
.nav__links a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); transition: color .15s; }
.nav__links a:hover { color: var(--td-teal-700); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav__cross { font-size: 14px; font-weight: 600; color: var(--td-ink-900); display: inline-flex; align-items: center; gap: 6px; }
.nav__cross:hover { color: var(--td-teal-700); }
.nav__menu { display: none; }
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cross span.lbl { display: none; }
}

/* ---------- hero ---------- */
/* hero is a brand banner: the illustration shows in full, faded into the cream at its
   bottom edge, with the logo + kicker sitting high inside it. */
.hero { position: relative; isolation: isolate; background: var(--paper); height: min(clamp(300px, 34vw, 380px), 40vh); }
.hero__art { position: absolute; inset: 0; z-index: -2; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.35) 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.35) 86%, transparent 100%); }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
/* keep the cream halo only behind the logo near the top. */
.hero__scrim { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(46% 40% at 50% 26%, rgba(250,246,238,.6) 0%, rgba(250,246,238,.16) 54%, rgba(250,246,238,0) 78%),
    linear-gradient(to bottom, rgba(250,246,238,0) 70%, rgba(250,246,238,.85) 100%); }
.hero__in { position: relative; min-height: 100%; padding-block: clamp(20px, 2.6vw, 36px) 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: clamp(6px, 1vw, 12px); }
.hero__lottie { width: min(462px, 88vw); height: auto; aspect-ratio: 462 / 141; filter: drop-shadow(0 6px 22px rgba(20,24,27,.1)); }
.hero__lottie svg { width: 100% !important; height: auto !important; display: block; }
.hero h1 { max-width: 15ch; font-size: clamp(46px, 7.2vw, 92px); line-height: 0.98; }
.hero__kicker { color: var(--td-teal-800); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; }
.hero__kicker b { color: var(--td-gray-400); font-weight: 700; margin-inline: 8px; }
.hero__sub { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2.1vw, 24px); color: var(--td-teal-800); letter-spacing: -0.01em; }
.hero__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 4px; }
.badge { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; white-space: nowrap; background: rgba(255,255,255,.82); border: 1px solid var(--td-gray-200); color: var(--td-ink-900); box-shadow: var(--shadow-xs); }
.badge.is-accent { background: var(--td-teal-700); color: #fff; border-color: transparent; }
.badge svg { width: 15px; height: 15px; }

/* buttons reuse .tk-btn from kit; add a hero scale */
.tk-btn.is-xl svg { width: 19px; height: 19px; }

/* ---------- offer screen (headline + line + badges + CTA) ---------- */
.hero-band { background: var(--paper); border-bottom: 1px solid var(--td-gray-200); }
.hero-band__in { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; column-gap: clamp(32px, 5vw, 72px); row-gap: clamp(20px, 3vw, 32px); padding-block: clamp(28px, 4vw, 56px) clamp(36px, 5vw, 68px); text-align: left; }
.hero-band__right { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2vw, 22px); }
.hero-band__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.024em; line-height: 1.0; color: var(--td-ink-900); font-size: clamp(34px, 4.6vw, 62px); max-width: 14ch; text-wrap: balance; margin: 0; }
.hero-band__line { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -0.014em; line-height: 1.15; color: var(--td-ink-700); max-width: 22ch; margin: 0; }
.hero-band__right .hero__badges, .hero-band__right .hero__cta { justify-content: flex-start; }
@media (max-width: 820px) {
  .hero-band__in { grid-template-columns: 1fr; text-align: center; }
  .hero-band__title { max-width: 18ch; margin-inline: auto; }
  .hero-band__right { align-items: center; }
  .hero-band__line { margin-inline: auto; }
  .hero-band__right .hero__badges, .hero-band__right .hero__cta { justify-content: center; }
}
.hero-band__line b { color: var(--td-teal-700); font-weight: 600; }

/* ---------- generic card grids ---------- */
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.feature { background: #fff; border: 1px solid var(--td-gray-200); border-radius: var(--radius-2xl); padding: 26px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s; }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--td-teal-200); }
.feature__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--td-teal-50); color: var(--td-teal-700); border: 1px solid var(--td-teal-100); }
.feature__ic svg { width: 24px; height: 24px; }
.feature h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.feature p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

/* ---------- como funciona stepper ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.steps__line { position: absolute; top: 27px; left: 8%; right: 8%; height: 2px; background: var(--td-gray-200); z-index: 0; }
.steps__fill { position: absolute; top: 27px; left: 8%; height: 2px; background: var(--td-teal-500); z-index: 1; width: 0; transition: width 2.4s var(--ease-in-out); }
.step { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 0 14px; }
.step__num { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--td-gray-200); color: var(--td-ink-300); font-family: var(--font-display); font-weight: 600; font-size: 20px; transition: all .7s var(--ease-spring); }
.step.is-on .step__num { background: var(--td-teal-600); border-color: var(--td-teal-600); color: #fff; box-shadow: 0 10px 22px -8px rgba(46,150,136,.6); transform: scale(1.06); }
.step h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--td-ink-900); letter-spacing: -0.01em; }
.step p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.45; }
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .steps__line, .steps__fill { left: 26px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .steps__fill { height: 0; transition: height 2.4s var(--ease-in-out); }
  .step { flex-direction: row; text-align: left; align-items: flex-start; gap: 18px; }
  .step__txt { padding-top: 6px; }
}

/* ---------- compliance diagram ---------- */
.compliance { display: grid; grid-template-columns: 1fr auto 1.3fr auto 1fr; gap: 0; align-items: stretch; }
.cnode { background: #fff; border: 1px solid var(--td-gray-200); border-radius: var(--radius-2xl); padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.cnode .cap { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.cnode h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.cnode p { font-size: 14px; color: var(--ink-soft); }
.ccore { background: linear-gradient(165deg, var(--td-teal-600), var(--td-teal-800)); border-color: transparent; color: #fff; box-shadow: var(--shadow-lg); position: relative; z-index: 2; }
.ccore .cap { color: rgba(255,255,255,.72); }
.ccore h3, .ccore p { color: #fff; }
.ccore__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ccore__pills span { white-space: nowrap; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-pill); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); }
.cconn { display: grid; place-items: center; color: var(--td-teal-500); padding: 0 14px; }
.cconn svg { width: 38px; height: 38px; }
@media (max-width: 880px) {
  .compliance { grid-template-columns: 1fr; }
  .cconn { transform: rotate(90deg); padding: 6px 0; }
}

/* ---------- persona / dores tabs ---------- */
.dores { display: grid; grid-template-columns: 280px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.persona-tabs { display: flex; flex-direction: column; gap: 10px; }
.ptab { display: flex; gap: 14px; align-items: center; text-align: left; font: inherit; padding: 16px 18px; border-radius: var(--radius-xl); border: 1px solid var(--td-gray-200); background: #fff; cursor: pointer; transition: all .2s var(--ease-out); }
.ptab:hover { border-color: var(--td-teal-300); }
.ptab.is-active { border-color: var(--td-teal-600); background: var(--td-teal-50); box-shadow: var(--shadow-focus); }
.ptab__ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--td-teal-100); color: var(--td-teal-700); }
.ptab__ic svg { width: 21px; height: 21px; }
.ptab b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.ptab span { font-size: 13px; color: var(--fg-muted); }
.persona-panel { display: none; background: #fff; border: 1px solid var(--td-gray-200); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.persona-panel.is-on { display: block; animation: paneFade .45s var(--ease-out); }
@keyframes paneFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.persona-panel__media { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: var(--paper-2); }
.persona-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.persona-panel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,24,27,.35), transparent 55%); }
.persona-panel__media .tag { position: absolute; left: 18px; bottom: 16px; z-index: 2; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.beforeafter { display: grid; grid-template-columns: 1fr 1fr; }
.ba { padding: 24px 26px; }
.ba--now { border-right: 1px solid var(--td-gray-200); }
.ba__h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 14px; }
.ba__h svg { width: 17px; height: 17px; flex: none; }
.ba--now .ba__h { color: var(--td-red-600); }
.ba--turni .ba__h { color: var(--td-green-700); }
.ba ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ba li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--ink-soft); }
.ba li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ba--now li svg { color: var(--td-red-500); }
.ba--turni li svg { color: var(--td-green-600); }
@media (max-width: 820px) {
  .dores { grid-template-columns: 1fr; }
  .persona-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .ptab { flex: 1 0 220px; }
  .beforeafter { grid-template-columns: 1fr; }
  .ba--now { border-right: none; border-bottom: 1px solid var(--td-gray-200); }
}

/* ---------- economics CLT vs Turni ---------- */
.econ { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
.bar { background: #fff; border: 1px solid var(--td-gray-200); border-radius: var(--radius-2xl); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bar__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.bar__val { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px,3vw,34px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar__track { height: 16px; border-radius: var(--radius-pill); background: var(--td-gray-100); overflow: hidden; }
.bar__fill { height: 100%; border-radius: var(--radius-pill); width: 0; transition: width 1.1s var(--ease-out); }
.bar--clt .bar__fill { background: var(--td-navy-500); }
.bar--turni { border-color: var(--td-teal-300); box-shadow: 0 18px 40px -22px rgba(46,150,136,.5); }
.bar--turni .bar__fill { background: linear-gradient(90deg, var(--td-teal-500), var(--td-teal-700)); }
.bar--turni .bar__val { color: var(--td-teal-700); }
.bar__legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; color: var(--fg-muted); }
.bar__legend span { display: inline-flex; align-items: center; gap: 6px; }
.bar__legend i { width: 8px; height: 8px; border-radius: 3px; background: var(--td-gray-300); }
.econ__delta { margin-top: 22px; text-align: center; }
.econ__delta .big { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px,7vw,84px); color: var(--td-teal-600); letter-spacing: -.03em; line-height: 1; }
@media (max-width: 720px){ .econ { grid-template-columns: 1fr; } }

/* ---------- roles strip ---------- */
.roles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.role { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--td-gray-200); background: var(--paper-2); aspect-ratio: 4/3; transition: transform .3s var(--ease-out), box-shadow .3s; }
.role img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.role:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.role:hover img { transform: scale(1.06); }
.role__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px; color: #fff; font-size: 13px; font-weight: 600; background: linear-gradient(to top, rgba(20,24,27,.78), transparent); }
.role--more { display: grid; place-items: center; background: var(--td-teal-50); border-color: var(--td-teal-200); color: var(--td-teal-800); text-align: center; padding: 14px; }
.role--more b { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.role--more span { font-size: 12.5px; color: var(--td-teal-700); }
@media (max-width: 980px){ .roles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .roles { grid-template-columns: repeat(2, 1fr); } }

/* ---------- guarantees ---------- */
.guarantee { background: #fff; border: 1px solid var(--td-gray-200); border-radius: var(--radius-2xl); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.guarantee__n { font-family: var(--font-display); font-weight: 600; font-size: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--td-teal-600); color: #fff; }
.guarantee h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.guarantee p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

/* ---------- CTA / form ---------- */
.cta { background: var(--td-gray-900); color: #fff; border-radius: clamp(24px, 4vw, 36px); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; width: 460px; height: 460px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(46,150,136,.55), transparent 68%); z-index: 0; }
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; }
.cta .lead { color: rgba(255,255,255,.74); }
.cta__contacts { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.cta__contacts a { display: inline-flex; align-items: center; gap: 11px; font-size: 15px; color: rgba(255,255,255,.9); }
.cta__contacts a:hover { color: var(--td-teal-400); }
.cta__contacts svg { width: 18px; height: 18px; color: var(--td-teal-400); }
.form { background: #fff; border-radius: var(--radius-2xl); padding: clamp(22px,3vw,30px); color: var(--td-ink-900); box-shadow: var(--shadow-lg); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .tk-field { margin-bottom: 14px; }
.form__ok { display: none; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 20px 8px; }
.form__ok.is-on { display: flex; }
.form__ok .chk { width: 60px; height: 60px; border-radius: 50%; background: var(--td-green-100); color: var(--td-green-600); display: grid; place-items: center; }
.form__ok .chk svg { width: 30px; height: 30px; }
@media (max-width: 860px){ .cta { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { background: var(--td-gray-900); color: rgba(255,255,255,.66); padding-block: 56px 34px; }
.foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.1); }
.foot__logo { height: 28px; margin-bottom: 16px; }
.foot__logo img { height: 100%; width: auto; }
.foot p { font-size: 14px; line-height: 1.6; max-width: 38ch; }
.foot h2 { font-family: var(--font-sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 14px; font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot a { font-size: 14px; color: rgba(255,255,255,.78); }
.foot a:hover { color: var(--td-teal-400); }
.foot__bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; padding-top: 26px; font-size: 13px; }
.foot__legal { max-width: 70ch; color: rgba(255,255,255,.5); font-size: 12.5px; line-height: 1.6; }
@media (max-width: 760px){ .foot__top { grid-template-columns: 1fr 1fr; } }

/* ---------- UI demo (product layer) shared ---------- */
.demo-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; }
.demo-wrap.rev { direction: rtl; } .demo-wrap.rev > * { direction: ltr; }
@media (max-width: 920px){ .demo-wrap { grid-template-columns: 1fr; } .demo-wrap.rev { direction: ltr; } }
.demo-feats { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.demo-feat { display: flex; gap: 13px; padding: 13px 15px; border-radius: var(--radius-lg); cursor: pointer; border: 1px solid transparent; transition: all .2s var(--ease-out); }
.demo-feat:hover { background: var(--td-gray-50); }
.demo-feat.is-active { background: #fff; border-color: var(--td-teal-200); box-shadow: var(--shadow-sm); }
.demo-feat__ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--td-teal-50); color: var(--td-teal-700); border: 1px solid var(--td-teal-100); }
.demo-feat__ic svg { width: 20px; height: 20px; }
.demo-feat b { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.demo-feat p { font-size: 13.5px; color: var(--fg-muted); margin-top: 2px; }

/* browser frame */
.browser { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--td-gray-200); box-shadow: var(--shadow-lg); }
.browser__bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--td-gray-50); border-bottom: 1px solid var(--td-gray-200); }
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--td-gray-300); }
.browser__url { margin-left: 8px; height: 24px; flex: 1; max-width: 260px; border-radius: 7px; background: #fff; border: 1px solid var(--td-gray-200); display: flex; align-items: center; padding: 0 10px; font-size: 11.5px; color: var(--fg-muted); font-family: var(--font-mono); }
.browser__body { position: relative; aspect-ratio: 4 / 3; background: var(--td-gray-50); }
.screen { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); pointer-events: none; overflow: hidden; }
.screen.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* phone frame (doer) */
.phone { width: 300px; max-width: 82vw; margin-inline: auto; border-radius: 42px; background: #14181B; padding: 11px; box-shadow: var(--shadow-lg); position: relative; }
.phone__screen { border-radius: 32px; overflow: hidden; background: var(--paper); aspect-ratio: 9 / 19; position: relative; }
.phone__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 110px; height: 26px; background: #14181B; border-radius: 14px; z-index: 30; }

/* small UI atoms inside demos */
.ui-tabs { display: flex; gap: 4px; padding: 4px; background: var(--td-gray-100); border-radius: 9px; }
.ui-tab { flex: 1; text-align: center; padding: 7px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.ui-tab.is-on { background: #fff; color: var(--td-teal-700); box-shadow: var(--shadow-xs); }

/* ---------- reveal anim ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay: .08s; } .reveal[data-d="2"]{ transition-delay: .16s; }
.reveal[data-d="3"]{ transition-delay: .24s; } .reveal[data-d="4"]{ transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- JET proof ---------- */
.proof { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px,4vw,56px); align-items: center; }
.proof__media { border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--td-gray-200); aspect-ratio: 5/4; }
.proof__media img { width: 100%; height: 100%; object-fit: cover; }
.proof__logo { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.02em; color: var(--td-ink-900); display: inline-flex; align-items: center; gap: 10px; }
.proof blockquote { margin: 18px 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px,2.4vw,28px); line-height: 1.32; letter-spacing: -.01em; color: var(--td-ink-900); }
@media (max-width: 760px){ .proof { grid-template-columns: 1fr; } }

/* ---------- in-demo client screens ---------- */
.scr { position: absolute; inset: 0; padding: 20px; display: flex; flex-direction: column; gap: 13px; background: #fff; font-family: var(--font-sans); }
.scr--center { justify-content: center; align-items: center; }
.scr__head { display: flex; align-items: center; justify-content: space-between; }
.scr__head b { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.scr__field { display: flex; flex-direction: column; gap: 5px; }
.scr__field label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); }
.scr__pick { height: 38px; border-radius: 10px; border: 1.5px solid var(--td-gray-200); background: var(--td-gray-50); display: flex; align-items: center; padding: 0 13px; font-size: 13.5px; font-weight: 500; }
.scr__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.scr__cta { margin-top: auto; height: 42px; border: 0; border-radius: 10px; background: var(--td-teal-600); color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-cta); }
.scr__rows { display: flex; flex-direction: column; gap: 9px; }
.scr__row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--td-gray-200); border-radius: 12px; }
.scr__row .av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--td-teal-600); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.scr__rowmain { flex: 1; line-height: 1.2; } .scr__rowmain b { font-size: 14px; } .scr__rowmain small { display: block; color: var(--fg-muted); font-size: 12px; margin-top: 2px; }
.scr__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.scr__stat { background: var(--td-gray-50); border: 1px solid var(--td-gray-200); border-radius: 12px; padding: 12px; }
.scr__stat span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
.scr__stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 22px; margin-top: 6px; }
.scr__bars { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.scr__bar { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; }
.scr__bar i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg,var(--td-teal-500),var(--td-teal-700)); }

/* NFS-e mini demo */
.nfse { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 280px; }
.nfse__doc { position: relative; width: 100%; background: var(--td-gray-50); border: 1.5px solid var(--td-gray-200); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: border-color .4s, box-shadow .4s; }
.nfse__top { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.nfse__id { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); font-weight: 500; }
.nfse__line { height: 9px; border-radius: 5px; background: var(--td-gray-200); }
.nfse__line.short { width: 60%; }
.nfse__amt { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -.02em; margin-top: 2px; }
.nfse__seal { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--td-green-600); color: #fff; opacity: 0; transform: scale(.4) rotate(-20deg); transition: all .5s var(--ease-spring); }
.nfse__tap { height: 44px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--td-teal-600); color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-cta); transition: transform .2s var(--ease-spring); }
.nfse__cap { font-size: 12.5px; color: var(--fg-muted); text-align: center; }
[data-nfse].is-ready .nfse__tap { animation: nfsePulse 1s var(--ease-out) infinite; }
[data-nfse].is-tapped .nfse__tap { transform: scale(.94); }
[data-nfse].is-done .nfse__doc { border-color: var(--td-green-200); box-shadow: 0 12px 28px -14px rgba(31,163,79,.6); }
[data-nfse].is-done .nfse__seal { opacity: 1; transform: scale(1) rotate(0); }
[data-nfse].is-done .nfse__tap { background: var(--td-green-600); box-shadow: var(--shadow-green); }
@keyframes nfsePulse { 0%,100%{ box-shadow: var(--shadow-cta);} 50%{ box-shadow: 0 8px 26px -4px rgba(46,150,136,.7);} }

/* mobile drawer */
.nav__menu { display: none; }
.drawer { position: fixed; inset: 0 0 auto 0; top: 72px; z-index: 55; background: #fff; border-bottom: 1px solid var(--td-gray-200); box-shadow: var(--shadow-lg); padding: 18px var(--gutter) 24px; flex-direction: column; gap: 4px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.drawer.is-open { display: flex; opacity: 1; transform: none; pointer-events: auto; }
.drawer a { padding: 13px 4px; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--td-gray-100); }
.drawer a.tk-btn { border-bottom: 0; margin-top: 12px; color: #fff; }
@media (max-width: 900px) { .nav__menu { display: inline-flex; } }
@media (min-width: 901px) { .drawer { display: none; } }

/* utility */
.muted { color: var(--fg-muted); }

/* ========== /trabalhe (executores — doer register) ========== */
.hero--doer .hero__scrim {
  background:
    radial-gradient(100% 70% at 50% 26%, rgba(250,246,238,.12) 0%, rgba(250,246,238,.46) 44%, rgba(250,246,238,.74) 74%),
    linear-gradient(to bottom, rgba(250,246,238,.28) 0%, rgba(250,246,238,.08) 28%, rgba(250,246,238,.6) 74%, rgba(250,246,238,.97) 100%); }
/* doer hero keeps a full content layout (kicker + h1 + sub + badges + cta), centered. */
.hero--doer { height: auto; min-height: clamp(540px, 80vh, 760px); }
.hero--doer .hero__art { -webkit-mask-image: none; mask-image: none; }
.hero--doer .hero__in { justify-content: center; padding-block: clamp(56px, 9vw, 110px); gap: 22px; }
.hero--doer .hero__sub { color: var(--td-teal-800); max-width: 56ch; }
.hero--doer h1 { max-width: 14ch; }

/* control points */
.controle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 920px){ .controle { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .controle { grid-template-columns: 1fr; } }
.ctrl { background: #fff; border: 1px solid var(--td-gray-200); border-radius: var(--radius-3xl); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s var(--ease-out), box-shadow .3s; }
.ctrl:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ctrl__ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(160deg,var(--td-teal-500),var(--td-teal-700)); color: #fff; box-shadow: var(--shadow-cta); }
.ctrl__ic svg { width: 26px; height: 26px; }
.ctrl h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.ctrl p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }

/* fluxo de ganhos */
.fluxo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fstep { position: relative; background: #fff; border: 1px solid var(--td-gray-200); border-radius: var(--radius-2xl); padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.fstep__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--td-teal-100); color: var(--td-teal-800); font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.fstep h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.fstep p { font-size: 13.5px; color: var(--fg-muted); }
.fstep__arrow { position: absolute; right: -10px; top: 50%; transform: translateY(-50%); z-index: 3; width: 22px; height: 22px; color: var(--td-teal-500); background: var(--bg-page); border-radius: 50%; display: grid; place-items: center; }
.fstep:last-child .fstep__arrow { display: none; }
@media (max-width: 860px){ .fluxo { grid-template-columns: 1fr 1fr; } .fstep__arrow { display: none; } }
@media (max-width: 480px){ .fluxo { grid-template-columns: 1fr; } }

/* joy card — earnings */
.joy { background: linear-gradient(165deg, var(--td-teal-600), var(--td-teal-800)); color: #fff; border-radius: var(--radius-3xl); padding: clamp(26px,3vw,38px); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; }
.joy::after { content:""; position:absolute; width:280px; height:280px; right:-90px; bottom:-120px; border-radius:50%; background: rgba(255,255,255,.08); }
.joy__cap { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.joy__amt { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px,6vw,64px); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.joy__row { display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; }
.joy__pix { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); padding: 8px 14px; border-radius: var(--radius-pill); font-weight: 600; font-size: 14px; }
.joy__pix svg { width: 16px; height: 16px; }
.joy__meta { display: flex; gap: 22px; position: relative; z-index: 2; }
.joy__meta div span { display: block; font-size: 12px; color: rgba(255,255,255,.7); }
.joy__meta div b { font-family: var(--font-display); font-weight: 600; font-size: 22px; }

/* phone app demo (doer) */
.appdemo { display: grid; grid-template-columns: 1fr 320px; gap: clamp(28px,4vw,56px); align-items: center; }
@media (max-width: 860px){ .appdemo { grid-template-columns: 1fr; } }
.pscreen { position: absolute; inset: 0; opacity: 0; transform: translateY(10px) scale(.99); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); pointer-events: none; display: flex; flex-direction: column; }
.pscreen.is-on { opacity: 1; transform: none; pointer-events: auto; }
.pstatus { height: 44px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 22px 4px; font-size: 12px; font-weight: 600; color: var(--td-ink-900); }
.papp { flex: 1; overflow: hidden; padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 11px; }
.papp__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 2px; }
.papp__head b { font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.vag { background: #fff; border: 1px solid var(--td-gray-200); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: 9px; }
.vag__top { display: flex; align-items: center; justify-content: space-between; }
.vag__role { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.vag__pay { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--td-teal-700); white-space: nowrap; }
.vag__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vag__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--fg-muted); }
.vag__meta span { display: inline-flex; align-items: center; gap: 5px; }
.vag__meta svg { width: 13px; height: 13px; }
.vag__btn { height: 38px; border: 0; border-radius: 11px; background: var(--td-teal-600); color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow-cta); }
/* carteira */
.cart__bal { background: linear-gradient(165deg,var(--td-teal-600),var(--td-teal-800)); color: #fff; border-radius: 20px; padding: 18px; box-shadow: var(--shadow-md); }
.cart__bal span { font-size: 12px; color: rgba(255,255,255,.78); font-weight: 600; }
.cart__bal b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -.02em; margin-top: 4px; }
.cart__list { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.cart__item { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--td-gray-200); border-radius: 14px; padding: 11px 13px; }
.cart__ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--td-green-100); color: var(--td-green-700); }
.cart__ic svg { width: 17px; height: 17px; }
.cart__main { flex: 1; line-height: 1.25; } .cart__main b { font-size: 13.5px; } .cart__main small { display: block; color: var(--fg-muted); font-size: 11.5px; }
.cart__amt { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--td-green-600); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 800px; margin-inline: auto; }
.faq__item { background: #fff; border: 1px solid var(--td-gray-200); border-radius: var(--radius-xl); overflow: hidden; transition: border-color .2s; }
.faq__item[open] { border-color: var(--td-teal-300); }
.faq__item summary { list-style: none; cursor: pointer; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .ico { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--td-teal-50); color: var(--td-teal-700); transition: transform .25s; }
.faq__item[open] summary .ico { transform: rotate(45deg); }
.faq__item summary .ico svg { width: 15px; height: 15px; }
.faq__body { padding: 0 22px 20px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

/* app screen tabs (doer demo) */
.appfeat { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.fineprint { font-size: 12px; color: var(--fg-muted); line-height: 1.5; }
.stack-sm { display:flex; flex-direction:column; gap: 10px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.divider-soft { height:1px; background: var(--td-gray-200); border:0; margin:0; }