@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";

:root {
  --ink: #081527;
  --paper: #fbfaf5;
  --paper-strong: #f5f1e8;
  --mint: #e7f8f1;
  --mint-strong: #bcebd8;
  --sun: #f3ec86;
  --rose: #f8e9e7;
  --signal-lime: #b8ff45;
  --signal-lime-soft: rgba(184, 255, 69, 0.18);
  --signal-lime-line: rgba(184, 255, 69, 0.54);
  --hairline: rgba(8, 21, 39, 0.1);
  --glass: rgba(255, 255, 255, 0.74);
  --page-max: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --page-pad: calc(var(--gutter) * 2);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(circle at 22% -4%, rgba(226, 214, 191, 0.5), transparent 34rem),
    linear-gradient(180deg, #ffffff 0%, var(--paper) 42%, #ffffff 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(8, 21, 39, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 21, 39, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, black 88%, transparent 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

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

h1,
h2,
h3,
p {
  margin: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  width: min(var(--page-max), calc(100% - var(--page-pad)));
  height: 72px;
  margin: 14px auto 0;
  padding: 0 14px 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(22px);
  animation: header-in 700ms var(--ease-standard) both;
}

.brand img {
  width: 98px;
  height: auto;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 30px;
  color: rgba(8, 21, 39, 0.68);
  font-size: 14px;
  font-weight: 560;
}

.nav-links a {
  transition: color 180ms var(--ease-standard);
}

.nav-links a:hover {
  color: var(--cria-navy);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 180ms var(--ease-standard),
    background 180ms var(--ease-standard),
    box-shadow 180ms var(--ease-standard),
    border-color 180ms var(--ease-standard);
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0) scale(0.985);
}

.button-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--cria-navy), #1265ad 58%, var(--cria-blue-600));
  box-shadow: 0 16px 32px rgba(0, 45, 100, 0.22);
}

.button-primary:hover {
  box-shadow: 0 18px 42px rgba(0, 45, 100, 0.28);
}

.button-soft {
  color: var(--cria-navy);
  background: rgba(239, 248, 254, 0.86);
  border-color: rgba(0, 45, 100, 0.08);
}

.button-ghost {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  border-color: var(--hairline);
}

.button-large {
  min-height: 52px;
  padding: 0 24px;
  font-size: 15px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  width: min(var(--page-max), calc(100% - var(--page-pad)));
  min-height: min(820px, calc(100dvh - 86px));
  margin: 0 auto;
  padding: clamp(36px, 5vw, 58px) 0 clamp(52px, 7vw, 82px);
  overflow: visible;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

/* hero descriptor: type only, no marks, no pill, no caps */
.label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  color: rgba(8, 21, 39, 0.58);
}

.hero h1 {
  max-width: 100%;
  margin-top: 24px;
  color: var(--cria-navy);
  font-size: clamp(52px, 6vw, 86px);
  font-weight: 720;
  letter-spacing: -0.05em;
  line-height: 0.92;
  text-wrap: balance;
}

.hero h1 span {
  display: block;
  color: var(--cria-blue-600);
}

.hero-copy .label,
.hero-copy h1,
.hero-copy p,
.hero-actions {
  animation: rise-in 820ms var(--ease-standard) both;
}

.hero-copy h1 {
  animation-delay: 90ms;
}

.hero-copy p {
  animation-delay: 160ms;
}

.hero-actions {
  animation-delay: 230ms;
}

.hero-copy p {
  max-width: 50ch;
  margin-top: 28px;
  color: rgba(8, 21, 39, 0.68);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.48;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.product-stage {
  position: relative;
  min-width: 0;
  padding: 8px 0 22px;
  overflow: visible;
  perspective: 1600px;
  animation: product-in 980ms var(--ease-standard) 120ms both;
}

.workspace {
  position: relative;
  overflow: clip;
  border: 1px solid rgba(0, 45, 100, 0.12);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 44px 80px rgba(0, 45, 100, 0.18),
    0 12px 28px rgba(15, 23, 42, 0.12);
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  animation: workspace-drift 7s ease-in-out 1.1s infinite;
  contain: paint;
}

.workspace::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.62), transparent 42%);
  animation: sheen 6s ease-in-out 1.4s infinite;
}

.workspace-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(248, 250, 252, 0.78);
}

.workspace-top img {
  width: 70px;
}

.window-controls {
  display: flex;
  gap: 7px;
}

.window-controls span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #f26c60;
}

.window-controls span:nth-child(2) {
  background: #f5c451;
}

.window-controls span:nth-child(3) {
  background: #43c667;
}

.patient-chip {
  justify-self: end;
  padding: 8px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: rgba(8, 21, 39, 0.65);
  background: #ffffff;
  font-size: 12px;
  font-weight: 620;
}

.workspace-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(136px, 0.55fr) minmax(0, 1fr) minmax(0, 0.9fr);
  min-height: clamp(430px, 42vw, 506px);
}

.session-rail,
.transcript-pane,
.soap-pane {
  min-width: 0;
  padding: 18px;
}

.session-rail {
  border-right: 1px solid var(--hairline);
  background: rgba(248, 250, 252, 0.72);
}

.rail-title {
  margin-bottom: 14px;
  color: rgba(8, 21, 39, 0.42);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.session {
  display: grid;
  gap: 5px;
  margin-bottom: 9px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 16px;
  min-width: 0;
  overflow: hidden;
}

.session.active {
  border-color: rgba(47, 159, 224, 0.28);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
  animation: soft-pulse 3.8s ease-in-out infinite;
}

.session strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 720;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
}

.session span {
  display: block;
  overflow: hidden;
  color: rgba(8, 21, 39, 0.48);
  font-size: 11px;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
}

.transcript-pane {
  border-right: 1px solid var(--hairline);
}

.pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.pane-head span {
  color: var(--cria-navy);
  font-size: 15px;
  font-weight: 760;
}

.pane-head strong {
  color: rgba(8, 21, 39, 0.42);
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.conversation {
  display: grid;
  gap: 14px;
}

.turn {
  max-width: min(88%, 210px);
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--paper);
  animation: message-in 620ms var(--ease-standard) both;
}

.turn:nth-child(2) {
  animation-delay: 140ms;
}

.turn:nth-child(3) {
  animation-delay: 280ms;
}

.turn small {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.turn p {
  color: rgba(8, 21, 39, 0.78);
  font-size: 13px;
  line-height: 1.45;
}

.turn.clinician {
  background: var(--cria-blue-50);
}

.turn.clinician small {
  color: var(--cria-navy);
}

.turn.patient {
  justify-self: end;
  background: #ffffff;
  border: 1px solid var(--hairline);
}

.turn.patient small {
  color: var(--cria-blue-600);
}

.assistant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding: 13px 14px;
  border: 1px solid rgba(74, 158, 118, 0.24);
  border-radius: 16px;
  color: rgba(8, 21, 39, 0.62);
  background: var(--mint);
  font-size: 12px;
  font-weight: 650;
}

.bars {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 18px;
}

.bars i {
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: var(--success);
  animation: equalize 900ms ease-in-out infinite;
}

.bars i:nth-child(2) {
  height: 15px;
  animation-delay: 100ms;
}

.bars i:nth-child(3) {
  height: 11px;
  animation-delay: 200ms;
}

.bars i:nth-child(4) {
  height: 17px;
  animation-delay: 300ms;
}

.soap-pane {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.82), rgba(255, 255, 255, 0.92));
}

.soap-list {
  display: grid;
  gap: 12px;
}

.soap-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: #ffffff;
}

.soap-item b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  color: #ffffff;
  background: var(--cria-navy);
  font-size: 13px;
}

.soap-item p {
  color: rgba(8, 21, 39, 0.68);
  font-size: 12.5px;
  line-height: 1.44;
}

.conduct-card {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(47, 159, 224, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(239, 248, 254, 0.98), rgba(255, 255, 255, 0.9)),
    #ffffff;
}

.conduct-card span {
  display: block;
  margin-bottom: 6px;
  color: var(--cria-navy);
  font-size: 13px;
  font-weight: 760;
}

.conduct-card p {
  color: rgba(8, 21, 39, 0.64);
  font-size: 12.5px;
  line-height: 1.45;
}

.floating-note {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  color: rgba(8, 21, 39, 0.76);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(18px);
  font-family: var(--font-metrics);
  font-size: 12px;
  font-weight: 650;
  animation: float-note 4.2s ease-in-out infinite;
}

.note-top {
  top: 0;
  right: 46px;
}

.note-bottom {
  right: 10px;
  bottom: 0;
  animation-delay: 800ms;
}

.pulse,
.quality-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.pulse {
  background: var(--danger);
  animation: pulse 1.2s ease-in-out infinite;
}

.quality-dot {
  background: var(--success);
}

.variant-card {
  position: relative;
  z-index: 2;
  display: block;
  overflow: clip;
  min-height: clamp(470px, 43vw, 540px);
  border: 1px solid rgba(0, 45, 100, 0.11);
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 14%, rgba(89, 188, 243, 0.16), transparent 25rem),
    radial-gradient(circle at 86% 70%, rgba(74, 158, 118, 0.12), transparent 20rem),
    rgba(255, 255, 255, 0.84);
  box-shadow:
    0 44px 80px rgba(0, 45, 100, 0.16),
    0 12px 28px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(18px);
  animation: widget-variant-in 420ms var(--ease-standard);
  transition:
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 720ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 520ms var(--ease-standard);
}

.recording-widget,
.soap-widget,
.clinical-sheet,
.recorder-dock,
.audio-capsule,
.note-stack article {
  border: 1px solid rgba(0, 45, 100, 0.1);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(16px);
}

.widget-large {
  position: absolute;
  top: clamp(36px, 5vw, 58px);
  left: clamp(20px, 4vw, 44px);
  width: min(58%, 430px);
  padding: 22px;
  border-radius: 34px;
}

.widget-meta,
.soap-widget-head,
.sheet-head,
.dock-title,
.capsule-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(8, 21, 39, 0.58);
  font-size: 12px;
  font-weight: 700;
}

.widget-meta strong,
.soap-widget-head span,
.sheet-head span,
.dock-title strong {
  color: var(--cria-navy);
  font-size: 14px;
  font-weight: 780;
}

.record-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ff3949;
  box-shadow: 0 0 0 7px rgba(255, 57, 73, 0.12);
  animation: pulse 1.2s ease-in-out infinite;
}

.wave-panel {
  position: relative;
  display: flex;
  align-items: center;
  height: 126px;
  margin-top: 18px;
  padding: 0 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, rgba(244, 248, 252, 0.92));
}

.wave-bars,
.dock-wave,
.capsule-wave {
  display: flex;
  align-items: center;
  width: 100%;
}

.wave-bars {
  justify-content: space-between;
  gap: 5px;
}

.wave-bars span,
.dock-wave span,
.capsule-wave span {
  display: block;
  width: 3px;
  border-radius: 999px;
  background: rgba(8, 21, 39, 0.82);
}

.wave-bars span {
  height: 22px;
  background: linear-gradient(180deg, #ff5261, #ff7180);
  animation: waveform-live 1200ms ease-in-out infinite;
}

.wave-bars span:nth-child(2n),
.dock-wave span:nth-child(2n),
.capsule-wave span:nth-child(2n) {
  height: 42px;
  animation-delay: 120ms;
}

.wave-bars span:nth-child(3n),
.dock-wave span:nth-child(3n),
.capsule-wave span:nth-child(3n) {
  height: 66px;
  animation-delay: 220ms;
}

.wave-bars span:nth-child(5n),
.dock-wave span:nth-child(5n),
.capsule-wave span:nth-child(5n) {
  height: 34px;
  animation-delay: 340ms;
}

.wave-bars span:nth-child(n + 13) {
  background: rgba(8, 21, 39, 0.22);
  animation: none;
}

.playhead {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 57%;
  width: 2px;
  border-radius: 999px;
  background: #ff3949;
}

.playhead::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #ff3949;
  transform: translateX(-50%);
  box-shadow: 0 0 0 5px rgba(255, 57, 73, 0.13);
}

.recorder-actions,
.dock-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.recorder-actions button,
.dock-actions button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: rgba(8, 21, 39, 0.72);
  background: rgba(229, 234, 244, 0.9);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
}

.recorder-actions .danger,
.dock-actions button:last-child {
  color: #ffffff;
  background: #ff3949;
}

.soap-widget {
  position: absolute;
  right: clamp(20px, 4vw, 42px);
  bottom: clamp(30px, 5vw, 58px);
  width: min(48%, 336px);
  padding: 20px;
  border-radius: 28px;
}

.soap-widget-head strong {
  color: var(--success);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.soap-mini-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.soap-mini-list div,
.soap-strip div,
.note-stack article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.soap-mini-list div {
  padding: 12px;
  border: 1px solid rgba(8, 21, 39, 0.07);
  border-radius: 15px;
  background: rgba(248, 250, 252, 0.72);
}

.soap-mini-list b,
.soap-strip b,
.note-stack b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 10px;
  color: #ffffff;
  background: var(--cria-navy);
  font-size: 12px;
  font-weight: 820;
}

.soap-mini-list p,
.note-stack p {
  color: rgba(8, 21, 39, 0.66);
  font-size: 12.5px;
  line-height: 1.38;
}

.focus-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.focus-footer span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(0, 45, 100, 0.08);
  border-radius: 999px;
  color: rgba(8, 21, 39, 0.54);
  background: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  font-weight: 720;
}

.variant-focus {
  display: block;
  color: #ffffff;
  background:
    radial-gradient(circle at 30% 20%, rgba(47, 159, 224, 0.32), transparent 22rem),
    radial-gradient(circle at 82% 68%, rgba(255, 57, 73, 0.12), transparent 18rem),
    linear-gradient(135deg, #071427, #0d2851 70%, #0c3e6a);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 54px 92px rgba(0, 22, 56, 0.28),
    0 16px 36px rgba(0, 0, 0, 0.16);
  transform: rotateX(2.5deg) rotateY(-7deg) rotateZ(1deg) translateY(4px);
  transform-origin: center;
  transition:
    transform 1400ms cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 1400ms cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 1400ms cubic-bezier(0.25, 0.1, 0.25, 1),
    border-color 720ms var(--ease-standard);
  will-change: transform;
}

.variant-focus:hover {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 62px 108px rgba(0, 22, 56, 0.34),
    0 20px 44px rgba(0, 0, 0, 0.2);
  filter: saturate(1.04) contrast(1.02);
  transform: rotateX(1.2deg) rotateY(-2.4deg) rotateZ(0deg) translate3d(0, -10px, 0);
}

.focus-backdrop {
  position: absolute;
  inset: 26px;
  transform: translateZ(0);
}

.focus-recorder {
  position: absolute;
  left: 18px;
  top: 56px;
  width: min(55%, 400px);
  padding: 22px;
  border-radius: 34px;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    transform 1250ms cubic-bezier(0.25, 0.1, 0.25, 1),
    background 820ms var(--ease-standard),
    box-shadow 1250ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.variant-focus:hover .focus-recorder {
  box-shadow:
    0 36px 78px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translate3d(-10px, -8px, 0);
}

.focus-recorder .widget-meta,
.focus-recorder .widget-meta strong,
.focus-recorder .widget-meta span,
.focus-soap .soap-widget-head,
.focus-soap .soap-widget-head span {
  color: rgba(255, 255, 255, 0.88);
}

.focus-recorder .wave-panel {
  background: rgba(255, 255, 255, 0.08);
  animation: focus-wave-glow 5.2s ease-in-out infinite;
}

.focus-recorder .wave-bars span:nth-child(n + 13) {
  background: rgba(255, 255, 255, 0.28);
}

.focus-recorder .playhead {
  animation: focus-playhead-live 2.4s ease-in-out infinite;
}

.focus-soap {
  right: 18px;
  bottom: 44px;
  width: min(47%, 344px);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  box-shadow:
    0 32px 72px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  animation: focus-soap-reveal 1.8s cubic-bezier(0.16, 1, 0.3, 1) 360ms both;
  transition:
    transform 1300ms cubic-bezier(0.25, 0.1, 0.25, 1),
    background 820ms var(--ease-standard),
    box-shadow 1300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.variant-focus:hover .focus-soap {
  box-shadow:
    0 38px 82px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translate3d(11px, -9px, 0);
}

.focus-soap .soap-mini-list div {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.1);
  animation:
    focus-soap-item 1.1s cubic-bezier(0.16, 1, 0.3, 1) 520ms both,
    focus-soap-breathe 4.8s ease-in-out 2.1s infinite;
}

.focus-soap .soap-mini-list div:nth-child(2) {
  animation-delay: 660ms, 2.35s;
}

.focus-soap .soap-mini-list div:nth-child(3) {
  animation-delay: 800ms, 2.6s;
}

.focus-soap .soap-mini-list div:nth-child(4) {
  animation-delay: 940ms, 2.85s;
}

.focus-soap .soap-mini-list p {
  color: rgba(255, 255, 255, 0.72);
}

.focus-footer {
  position: absolute;
  left: 20px;
  bottom: 10px;
}

.focus-footer span {
  color: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.variant-dock {
  padding: clamp(24px, 3vw, 34px);
  background:
    radial-gradient(circle at 30% 8%, rgba(89, 188, 243, 0.17), transparent 25rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(239, 248, 254, 0.82));
}

.clinical-sheet {
  position: absolute;
  inset: 48px 42px 76px;
  padding: 30px;
  border-radius: 32px;
}

.sheet-head strong {
  color: rgba(8, 21, 39, 0.46);
  font-size: 12px;
}

.sheet-grid {
  display: grid;
  gap: 12px;
  width: 62%;
  margin-top: 32px;
}

.sheet-line {
  height: 12px;
  border-radius: 999px;
  background: rgba(8, 21, 39, 0.08);
}

.sheet-line.strong {
  width: 74%;
  background: rgba(47, 159, 224, 0.22);
}

.sheet-line.short {
  width: 46%;
}

.soap-strip {
  position: absolute;
  right: 26px;
  bottom: 28px;
  display: grid;
  gap: 10px;
  width: min(44%, 260px);
}

.soap-strip div {
  padding: 12px;
  border: 1px solid rgba(8, 21, 39, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
}

.soap-strip span {
  color: rgba(8, 21, 39, 0.62);
  font-size: 12px;
  font-weight: 650;
}

.recorder-dock {
  position: absolute;
  left: clamp(28px, 5vw, 54px);
  top: 48%;
  width: min(76%, 500px);
  padding: 18px;
  border-radius: 28px;
  transform: translateY(-50%);
}

.dock-title em {
  color: rgba(8, 21, 39, 0.46);
  font-style: normal;
  font-family: var(--font-metrics);
  font-size: 12px;
}

.dock-wave {
  position: relative;
  gap: 7px;
  height: 92px;
  margin-top: 14px;
  padding: 0 12px;
  border-radius: 22px;
  background: rgba(248, 250, 252, 0.82);
}

.dock-wave span {
  animation: waveform-live 1300ms ease-in-out infinite;
}

.dock-wave i,
.capsule-wave i {
  display: block;
  width: 2px;
  height: 58px;
  margin-left: 4px;
  border-radius: 999px;
  background: #ff3949;
}

.variant-capsule {
  padding: clamp(24px, 4vw, 42px);
  background:
    radial-gradient(circle at 76% 22%, rgba(47, 159, 224, 0.12), transparent 22rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 252, 0.88));
}

.audio-capsule {
  position: absolute;
  top: clamp(58px, 8vw, 92px);
  left: 50%;
  width: min(70%, 440px);
  padding: 20px 22px 22px;
  border-radius: 28px;
  transform: translateX(-50%);
}

.capsule-top span,
.capsule-top strong {
  color: rgba(8, 21, 39, 0.38);
  font-family: var(--font-metrics);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.capsule-wave {
  position: relative;
  justify-content: center;
  gap: 6px;
  height: 84px;
}

.capsule-wave span {
  animation: waveform-live 1250ms ease-in-out infinite;
}

.note-stack {
  position: absolute;
  left: 50%;
  bottom: clamp(52px, 8vw, 86px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(86%, 560px);
  transform: translateX(-50%);
}

.note-stack article {
  min-height: 116px;
  padding: 16px;
  border-radius: 20px;
}

.note-stack article:nth-child(2) {
  transform: translateY(-12px);
}

.note-stack article:nth-child(3) {
  transform: translateY(8px);
}

.cred-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  width: min(var(--page-max), calc(100% - var(--page-pad)));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--hairline);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
  animation: reveal-on-load 900ms var(--ease-standard) 380ms both;
}

.cred-strip span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 18px;
  color: rgba(8, 21, 39, 0.64);
  background: rgba(255, 255, 255, 0.78);
  text-align: center;
  font-size: 14px;
  font-weight: 650;
}

.section {
  width: min(var(--page-max), calc(100% - var(--page-pad)));
  margin: 0 auto;
  padding-inline: 0;
}

.section,
.manifesto,
.final-cta {
  animation: section-reveal both;
  animation-timeline: view();
  animation-range: entry 0% cover 24%;
}

.final-cta h2 {
  color: var(--cria-navy);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.final-cta p {
  color: rgba(8, 21, 39, 0.62);
  font-size: 17px;
  line-height: 1.55;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: var(--sec-head-gap);
}

.timeline article {
  min-height: clamp(190px, 18vw, 226px);
  padding: 26px;
  border: 1px solid rgba(8, 21, 39, 0.09);
  border-top: 4px solid rgba(47, 159, 224, 0.38);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
  transition:
    transform 260ms var(--ease-standard),
    box-shadow 260ms var(--ease-standard),
    border-color 260ms var(--ease-standard);
}

.timeline article:nth-child(2) {
  background: var(--cria-blue-50);
  border-top-color: rgba(0, 45, 100, 0.5);
}

.timeline article:nth-child(3) {
  background: var(--mint);
  border-top-color: rgba(74, 158, 118, 0.5);
}

.timeline article:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.1);
}

.timeline h3 {
  margin-top: clamp(44px, 6vw, 72px);
  color: var(--ink);
  font-size: 26px;
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.15;
  min-height: 2.3em;
}

.timeline p {
  margin-top: 12px;
  color: rgba(8, 21, 39, 0.62);
  font-size: 15px;
  line-height: 1.52;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: var(--sec-head-gap);
}

.capability {
  position: relative;
  min-height: clamp(224px, 20vw, 252px);
  padding: clamp(22px, 2.5vw, 28px) clamp(18px, 2.2vw, 24px) 24px;
  border: 1px solid var(--hairline);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
  transition:
    transform 260ms var(--ease-standard),
    box-shadow 260ms var(--ease-standard),
    background 260ms var(--ease-standard);
}

.capability::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--cria-blue-600), transparent);
  opacity: 0.38;
}

.capability h3 {
  margin-top: clamp(52px, 6vw, 78px);
  color: var(--ink);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.08;
  min-height: 2.3em;
}

.capability p {
  margin-top: 12px;
  color: rgba(8, 21, 39, 0.62);
  font-size: 15px;
  line-height: 1.52;
}

/* privacidade */
.assurance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: var(--sec-head-gap);
}

.assurance {
  padding: 32px 26px;
  border: 1px solid var(--hairline);
  border-top: 4px solid rgba(0, 45, 100, 0.42);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
  transition:
    transform 260ms var(--ease-standard),
    box-shadow 260ms var(--ease-standard);
}

.assurance:nth-child(2) {
  border-top-color: rgba(47, 159, 224, 0.5);
}

.assurance:nth-child(3) {
  border-top-color: rgba(74, 158, 118, 0.5);
}

.assurance:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.1);
}

.assurance h3 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.14;
  min-height: 2.3em;
}

.assurance p {
  margin-top: 12px;
  color: rgba(8, 21, 39, 0.62);
  font-size: 14px;
  line-height: 1.5;
}

/* integração / SDK */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: var(--sec-head-gap);
}

.integration-card {
  padding: 34px;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
  transition:
    transform 260ms var(--ease-standard),
    box-shadow 260ms var(--ease-standard);
}

.integration-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.11);
}

.integration-card h3 {
  color: var(--cria-navy);
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.12;
  min-height: 2.3em;
}

.integration-card p {
  margin-top: 12px;
  color: rgba(8, 21, 39, 0.64);
  font-size: 15px;
  line-height: 1.5;
}

.code-tag {
  display: inline-block;
  margin-top: 16px;
  padding: 7px 11px;
  border: 1px solid rgba(0, 45, 100, 0.14);
  border-radius: 10px;
  background: var(--cria-blue-50);
  color: var(--cria-navy);
  font-family: var(--font-metrics);
  font-size: 12.5px;
  font-weight: 600;
}

/* prova social */
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: var(--sec-head-gap);
}

.quote-card {
  padding: 32px;
  border: 1px solid var(--hairline);
  border-left: 4px solid rgba(47, 159, 224, 0.42);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
}

.quote-card blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.01em;
}

.quote-card cite {
  display: block;
  margin-top: 18px;
  color: rgba(8, 21, 39, 0.62);
  font-size: 13.5px;
  font-style: normal;
  font-weight: 620;
}

.quote-card cite span {
  display: block;
  margin-top: 2px;
  color: rgba(8, 21, 39, 0.46);
  font-weight: 500;
}

.social-note {
  margin-top: 16px;
  color: rgba(8, 21, 39, 0.42);
  font-size: 12.5px;
}

.manifesto {
  display: grid;
  justify-items: center;
  gap: 24px;
  margin: 0;
  min-height: clamp(420px, 44vw, 620px);
  padding: var(--sec-py) max(var(--gutter), calc((100vw - var(--page-max)) / 2));
  color: #ffffff;
  background:
    radial-gradient(circle at 78% 18%, rgba(91, 190, 242, 0.36), transparent 30rem),
    radial-gradient(circle at 16% 82%, rgba(65, 178, 126, 0.2), transparent 28rem),
    linear-gradient(135deg, #0a4f93 0%, #083d7a 44%, #082d61 72%, #071f43 100%);
  isolation: isolate;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.1), transparent 34%),
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.08), transparent 30rem);
  pointer-events: none;
}

.manifesto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 49%, rgba(3, 18, 44, 0.78) 0%, rgba(5, 36, 76, 0.52) 34%, rgba(5, 44, 90, 0.18) 58%, transparent 74%),
    linear-gradient(180deg, rgba(3, 17, 39, 0.3), rgba(3, 18, 42, 0.04) 34%, rgba(3, 18, 42, 0.06) 66%, rgba(3, 17, 39, 0.42));
  pointer-events: none;
}

.manifesto .wave {
  position: absolute;
  inset: -76px -96px;
  z-index: 0;
  width: calc(100% + 192px);
  height: calc(100% + 152px);
  color: #6cccf4;
  opacity: 0.64;
  filter: drop-shadow(0 18px 30px rgba(2, 16, 38, 0.18));
  mask-image: linear-gradient(180deg, transparent 0%, #000000 20%, #000000 80%, transparent 100%);
  mix-blend-mode: screen;
  shape-rendering: geometricPrecision;
  pointer-events: none;
}

.manifesto .wave rect {
  transform-origin: center;
  transform-box: fill-box;
  animation: wave-drift 18s linear infinite;
}

.manifesto-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 24px;
  isolation: isolate;
  padding: clamp(14px, 3vw, 32px) clamp(10px, 4vw, 74px);
}

.manifesto-inner::before {
  content: "";
  position: absolute;
  inset: -28px clamp(-64px, -5vw, -20px);
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(3, 18, 44, 0.86) 0%, rgba(3, 25, 56, 0.7) 42%, rgba(3, 28, 62, 0.34) 68%, transparent 76%);
  filter: blur(2px);
}

.manifesto img {
  width: 118px;
  filter: drop-shadow(0 2px 10px rgba(0, 13, 31, 0.22));
}

.manifesto h2 {
  max-width: 920px;
  color: #ffffff;
  font-size: clamp(38px, 6.2vw, 82px);
  font-weight: 720;
  letter-spacing: -0.055em;
  line-height: 0.94;
  text-shadow: 0 1px 2px rgba(0, 9, 25, 0.28), 0 2px 14px rgba(0, 9, 25, 0.18);
  text-wrap: balance;
}

.manifesto h2 span {
  color: #d2f3ff;
}

.manifesto p {
  color: rgba(238, 250, 255, 0.84);
  font-size: 16px;
  text-shadow: 0 1px 6px rgba(0, 9, 25, 0.22);
}

.final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  width: min(var(--page-max), calc(100% - var(--page-pad)));
  margin: 0 auto;
  padding: var(--sec-py) 0;
}

.final-cta h2 {
  max-width: 760px;
  text-wrap: balance;
}

.final-cta p {
  margin-top: 18px;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 54px max(var(--gutter), calc((100vw - var(--page-max)) / 2)) 42px;
  color: #ffffff;
  background: var(--neutral-900);
}

.site-footer img {
  width: 94px;
}

.site-footer p {
  max-width: 310px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  line-height: 1.55;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px 26px;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.site-footer a:hover {
  color: #ffffff;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(200, 90, 80, 0.28);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 0 7px rgba(200, 90, 80, 0);
  }
}

@keyframes equalize {
  0%,
  100% {
    transform: scaleY(0.75);
  }
  50% {
    transform: scaleY(1.2);
  }
}

@keyframes waveform-live {
  0%,
  100% {
    transform: scaleY(0.78);
  }
  50% {
    transform: scaleY(1.18);
  }
}

@keyframes widget-variant-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes soap-reveal-cycle {
  0%,
  8% {
    opacity: 0.72;
    transform: translateY(-12px);
  }
  20%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }
  92%,
  100% {
    opacity: 0.88;
    transform: translateY(8px);
  }
}

@keyframes soap-item-slide {
  0%,
  14% {
    opacity: 0;
    transform: translateY(-10px);
  }
  28%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }
  92%,
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes focus-soap-reveal {
  0% {
    opacity: 0.86;
    clip-path: inset(0 0 72% 0 round 28px);
  }
  46% {
    opacity: 0.98;
    clip-path: inset(0 0 24% 0 round 28px);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 28px);
  }
}

@keyframes focus-soap-item {
  0% {
    opacity: 0;
    transform: translateY(-12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes focus-soap-breathe {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  45%,
  55% {
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  }
}

@keyframes focus-wave-glow {
  0%,
  100% {
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.07);
  }
}

@keyframes focus-playhead-live {
  0%,
  100% {
    opacity: 0.88;
    transform: translateX(0);
  }
  50% {
    opacity: 1;
    transform: translateX(4px);
  }
}

@keyframes header-in {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes product-in {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes workspace-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes sheen {
  0%,
  100% {
    opacity: 0.24;
    transform: translateX(-12%);
  }
  50% {
    opacity: 0.62;
    transform: translateX(10%);
  }
}

@keyframes soft-pulse {
  0%,
  100% {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
  }
  50% {
    box-shadow: 0 10px 26px rgba(47, 159, 224, 0.15);
  }
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float-note {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes reveal-on-load {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes section-reveal {
  from {
    opacity: 1;
    transform: translateY(44px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blue-breathe {
  0%,
  100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 18% 12%;
  }
}

@keyframes wave-drift {
  from {
    transform: translate3d(-42px, -8px, 0) scale(1.12);
  }
  to {
    transform: translate3d(42px, 8px, 0) scale(1.12);
  }
}

@keyframes stage-glow {
  0%,
  100% {
    opacity: 0.78;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate3d(-12px, 10px, 0) scale(1.04);
  }
}

@keyframes orbit-chip {
  0%,
  100% {
    opacity: 0.54;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    opacity: 0.9;
    transform: translate3d(-34px, 54px, 0) rotate(18deg);
  }
}

@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: auto 1fr;
  }

  .nav-links {
    display: none;
  }

  .nav-actions {
    justify-self: end;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 34px;
  }

  .hero h1 {
    max-width: 900px;
    font-size: clamp(58px, 8vw, 82px);
  }

  .product-stage {
    width: 100%;
    max-width: none;
  }

  .variant-card {
    min-height: 520px;
  }

  .widget-large {
    width: min(56%, 430px);
  }

  .soap-widget {
    width: min(48%, 340px);
  }

  .focus-recorder {
    width: min(54%, 390px);
  }

  .workspace {
    transform: none;
    animation: mobile-workspace-drift 6s ease-in-out 1s infinite;
  }

  .workspace-body {
    grid-template-columns: 148px minmax(0, 1fr) minmax(0, 0.9fr);
  }

  .capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .variant-card {
    min-height: 640px;
  }

  .widget-large {
    top: 28px;
    left: 50%;
    width: min(88%, 460px);
    transform: translateX(-50%);
  }

  .soap-widget {
    right: 50%;
    bottom: 32px;
    width: min(88%, 430px);
    transform: translateX(50%);
  }

  .focus-recorder {
    left: 50%;
    top: 28px;
    width: min(88%, 460px);
    transform: translateX(-50%);
  }

  .focus-soap {
    right: 50%;
    bottom: 32px;
    top: auto;
    width: min(88%, 430px);
    transform: translateX(50%);
  }

  .clinical-sheet {
    inset: 34px 24px 70px;
  }

  .recorder-dock {
    left: 50%;
    top: 44%;
    width: min(86%, 470px);
    transform: translate(-50%, -50%);
  }

  .soap-strip {
    left: 50%;
    right: auto;
    width: min(84%, 420px);
    transform: translateX(-50%);
  }

  .focus-backdrop {
    inset: 20px;
  }

  .side-tags,
  .focus-footer {
    display: none;
  }

  .audio-capsule {
    width: min(86%, 460px);
  }

  .note-stack {
    grid-template-columns: 1fr;
    width: min(82%, 420px);
    bottom: 34px;
  }

  .note-stack article,
  .note-stack article:nth-child(2),
  .note-stack article:nth-child(3) {
    min-height: auto;
    transform: none;
  }

  .workspace-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr);
  }

  .session-rail {
    display: none;
  }

  .transcript-pane {
    border-left: 0;
    border-right: 1px solid var(--hairline);
  }

  .cred-strip {
    grid-template-columns: 1fr;
  }

  .cred-strip span {
    min-height: 56px;
  }

  .timeline {
    grid-template-columns: 1fr;
  }

  .timeline article {
    min-height: auto;
  }

  .timeline h3 {
    margin-top: 36px;
  }
}

@media (max-width: 760px) {
  .site-header {
    height: 64px;
    margin-top: 10px;
    padding-left: 18px;
  }

  .brand img {
    width: 86px;
  }

  .button-soft {
    display: none;
  }

  .button {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }

  .hero {
    padding: 36px 0 56px;
  }

  .hero h1 {
    font-size: clamp(44px, 13vw, 62px);
    line-height: 0.95;
  }

  .hero-copy p {
    max-width: 100%;
    font-size: 16px;
  }

  .workspace-body {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .session-rail {
    display: none;
  }

  .transcript-pane {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .workspace-top {
    grid-template-columns: auto 1fr;
  }

  .workspace-top img {
    display: none;
  }

  .patient-chip {
    font-size: 11px;
  }

  .floating-note {
    position: static;
    margin: 10px 0;
  }

  .capability-grid {
    grid-template-columns: 1fr;
  }

  .feature-large {
    grid-column: span 1;
  }

  .sec-head h2,
  .final-cta h2 {
    font-size: clamp(32px, 10vw, 48px);
    line-height: 1;
  }

  .timeline h3 {
    margin-top: 28px;
  }

  .capability h3 {
    margin-top: 44px;
  }

  .manifesto h2 {
    font-size: clamp(34px, 11vw, 50px);
  }

  .manifesto .wave {
    inset: -58px -76px;
    width: calc(100% + 152px);
    height: calc(100% + 116px);
    opacity: 0.56;
  }

  .final-cta,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer nav {
    justify-content: flex-start;
  }
}

@keyframes mobile-workspace-drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 460px) {
  .site-header {
    grid-template-columns: auto auto;
    gap: 12px;
    padding: 0 12px 0 18px;
  }

  .brand img {
    width: 78px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .button-large {
    width: 100%;
  }

  .label {
    max-width: 100%;
    font-size: 12px;
    letter-spacing: 0;
  }

  .workspace-top {
    gap: 8px;
    padding: 0 12px;
  }

  .window-controls span {
    width: 8px;
    height: 8px;
  }

  .pane-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .turn {
    max-width: 100%;
  }

  .soap-item {
    grid-template-columns: 28px 1fr;
  }

  .capability h3 {
    margin-top: 34px;
  }
}

@media (max-width: 1080px) {
  .assurance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .integration-grid,
  .social-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .assurance-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Card media (Fluxo / Recursos / Rede SUS) - image-led cards
   ============================================================ */
.card-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f2efe9, #eaece9);
}

.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-standard);
}

.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 45, 100, 0) 52%, rgba(0, 45, 100, 0.12));
  pointer-events: none;
}

/* Fluxo timeline */
.timeline article {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.timeline .card-media {
  aspect-ratio: 16 / 10;
}

.timeline .card-body {
  padding: 28px 28px 32px;
}

.timeline h3 {
  margin-top: 0;
}

.timeline p {
  margin-top: 12px;
}

.timeline article:hover .card-media img {
  transform: scale(1.045);
}

/* Recursos capabilities - image cards (feature-large stays a text banner) */
.capability:not(.feature-large) {
  padding: 0;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.capability:not(.feature-large)::before {
  display: none;
}

.capability .card-media {
  aspect-ratio: 3 / 2;
}

.capability .card-body {
  padding: 24px 24px 28px;
}

.capability:not(.feature-large) h3 {
  margin-top: 0;
}

.capability:not(.feature-large):hover .card-media img {
  transform: scale(1.045);
}

/* ============================================================
   UI UNIFICATION (Heidi-clean): one borderless card system,
   navy-tinted shadow, single radius, no color-jumping,
   image sits on a soft blue panel.
   ============================================================ */
:root {
  --card-bg: #ffffff;
  --card-radius: 20px;
  --card-radius-lg: 24px;
  --card-shadow: 0 1px 2px rgba(0, 45, 100, 0.05), 0 14px 34px rgba(0, 45, 100, 0.09);
  --card-shadow-hover: 0 2px 4px rgba(0, 45, 100, 0.06), 0 24px 50px rgba(0, 45, 100, 0.14);
  --card-media-bg: linear-gradient(165deg, #eef6fd 0%, #e1edfb 100%);
}

/* one look for every content card */
.timeline article,
.capability:not(.feature-large),
.assurance,
.integration-card,
.quote-card,
.rede-item {
  background: var(--card-bg) !important;
  border: none !important;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

/* remove every colored accent / tinted per-card background (the "color jump") */
.timeline article:nth-child(n) {
  background: var(--card-bg) !important;
  border-top: none !important;
}
.assurance:nth-child(n) {
  border-top: none !important;
}
.quote-card {
  border-left: none !important;
}
.capability:not(.feature-large)::before {
  display: none !important;
}

/* image on a soft blue panel (Heidi "on background" look); no dark overlay */
.card-media {
  background: var(--card-media-bg) !important;
}
.card-media::after {
  display: none !important;
}
.card-media img {
  filter: saturate(0.97) contrast(1.02);
}
.timeline .card-media,
.capability .card-media {
  aspect-ratio: 4 / 3;
}

/* the single emphasis block on the whole page */
.capability.feature-large {
  border: none !important;
  border-radius: var(--card-radius-lg);
}

/* trust strip: borderless, soft */
.cred-strip {
  border: none !important;
  box-shadow: var(--card-shadow);
}

/* a touch more air, like Heidi */
.timeline,
.capability-grid,
.assurance-grid,
.integration-grid,
.social-grid {
  margin-top: clamp(46px, 5vw, 62px);
}

/* ============================================================
   v3 REFINE - stacked section headers, alternating color bands,
   subtle hover, Rede SUS icon cards.
   ============================================================ */
:root {
  --band-blue: #f4f0e8;
  --sec-py: clamp(84px, 9vw, 130px);
}

/* full-bleed alternating band (content stays centered) */
.section { position: relative; }
.band-blue::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: var(--band-blue);
}

/* de-slop: neutral alternating washes so blue stays an accent, not the page */
/* Recursos: dark neutral color-block (deliberate theme switch), white cards float on it */
.capabilities { --band-blue: #24272e; }
.capabilities .sec-head h2 { color: #ffffff; }
.capabilities .sec-head p { color: rgba(255, 255, 255, 0.72); }
.capabilities .sec-head .eyebrow { color: var(--cria-blue-400); }
.capabilities .capability { background: #ffffff; }

.integration  { --band-blue: #edf3ef; } /* soft sage (clinical, not blue) */

/* unified stacked, centered section header */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto clamp(46px, 5vw, 62px);
}
.sec-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 680;
  letter-spacing: 0.01em;
  color: var(--cria-blue-600);
}
.sec-head h2 {
  margin: 0;
  color: var(--cria-navy);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1.03;
  text-wrap: balance;
}
.sec-head p {
  margin: 0;
  max-width: 52ch;
  color: rgba(8, 21, 39, 0.6);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.5;
}

/* subtle, professional hover (issue 3): replaces translateY(-4px) + heavy shadow */
.timeline article, .capability, .assurance,
.integration-card, .quote-card, .rede-item {
  transition:
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.timeline article:hover, .capability:hover, .assurance:hover,
.integration-card:hover, .quote-card:hover, .rede-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 4px rgba(0, 45, 100, 0.05), 0 14px 28px rgba(0, 45, 100, 0.11) !important;
}
/* remove gimmicky image zoom on hover */
.timeline article:hover .card-media img,
.capability:hover .card-media img { transform: none !important; }

/* Recursos: 4 clean cards (feature-large removed) */
.capabilities .capability-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }

/* Rede SUS - clean icon cards (issue 5) */
.rede-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(46px, 5vw, 62px);
}
.rede-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 26px;
  text-align: center;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.rede-item .ico {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--cria-blue-50);
  color: var(--cria-navy);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.rede-item .ico svg { width: 20px; height: 20px; }
.rede-item span {
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 620;
  line-height: 1.4;
}

/* section rhythm */
.section { padding-top: var(--sec-py); padding-bottom: var(--sec-py); }

@media (max-width: 900px) {
  .rede-grid,
  .capabilities .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .capabilities .capability-grid { gap: 18px; }
}
@media (max-width: 560px) {
  .rede-grid { grid-template-columns: 1fr; }
  .capabilities .capability-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   Card content alignment + more breathing room.
   Reserve 2 lines for titles so descriptions align across a row.
   ============================================================ */
.timeline .card-body,
.capability .card-body {
  padding: 26px 28px 30px;
}
.assurance {
  padding: 32px 28px;
}
.integration-card {
  padding: 32px 30px;
}
.timeline .card-body h3,
.capability .card-body h3,
.assurance h3,
.integration-card h3 {
  min-height: 2.35em;
  margin-bottom: 4px;
}
.timeline .card-body p,
.capability .card-body p,
.assurance p,
.integration-card p {
  margin-top: 8px;
}

/* ============================================================
   v3 GLOW-UP: bigger headers, numbered flow timeline, icon
   privacy feature, authority credentials, wave signature echoes,
   per-family card depth.
   ============================================================ */

/* bigger, bolder section headers (modern_v2 scale) */
.sec-head h2 {
  font-size: clamp(36px, 5vw, 68px) !important;
  letter-spacing: -0.035em;
  line-height: 1.0;
}
.sec-head p { font-size: clamp(17px, 1.5vw, 20px); }

/* left-aligned header variant (breaks the all-centered rhythm) */
.sec-head-left {
  align-items: flex-start;
  text-align: left;
  max-width: 780px;
  margin-left: 0;
  margin-right: auto;
}

/* ---- Fluxo: numbered timeline, not a card grid ---- */
.flow-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(44px, 5vw, 60px);
}
.flow-timeline::before {
  content: "";
  position: absolute;
  top: 30px; left: 6%; right: 6%;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='20' viewBox='0 0 240 20'%3E%3Cpath d='M0 10 C 30 2 50 2 60 10 S 90 18 120 10 S 150 2 180 10 S 210 18 240 10' fill='none' stroke='%232f9fe0' stroke-width='2' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  pointer-events: none;
}
.flow-step { position: relative; display: flex; flex-direction: column; }
.flow-num {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--cria-blue-600);
  line-height: 1;
  padding: 4px 16px 4px 0;
  background: linear-gradient(90deg, var(--paper) 72%, transparent);
}
.flow-step .card-media {
  margin-top: 12px;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.flow-step .card-media img { width: 100%; height: 100%; object-fit: cover; }
.flow-step h3 {
  margin: 20px 0 0;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 720;
  letter-spacing: -0.02em;
  color: var(--cria-navy);
}
.flow-step p { margin: 8px 0 0; color: rgba(8, 21, 39, 0.62); font-size: 15px; line-height: 1.5; }

@media (max-width: 900px) {
  .flow-timeline {
    grid-template-columns: 1fr;
    gap: clamp(40px, 9vw, 56px);
  }
  .flow-timeline::before {
    top: 4px;
    bottom: 4px;
    left: 3px;
    right: auto;
    width: 16px;
    height: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='180' viewBox='0 0 16 180'%3E%3Cpath d='M8 0 C 15 22 15 34 8 45 S 1 68 8 90 S 15 112 8 135 S 1 158 8 180' fill='none' stroke='%232f9fe0' stroke-width='2' opacity='0.55'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: center;
  }
  .flow-step {
    padding-left: 36px;
  }
  .flow-num {
    padding: 0;
    background: none;
    font-size: 28px;
  }
  .flow-step .card-media {
    margin-top: 14px;
  }
  .flow-step h3 {
    margin-top: 16px;
  }
}

/* ---- Privacidade: icon feature card ---- */
.privacy .assurance-grid { grid-template-columns: repeat(3, 1fr) !important; }
.assurance-feature {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(28px, 3vw, 40px) !important;
}
.assurance-feature .assurance-ico {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: var(--cria-blue-50);
  color: var(--cria-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.assurance-feature .assurance-ico svg {
  width: 34px;
  height: 34px;
}
.assurance-feature .assurance-feature-txt h3 { min-height: 0 !important; font-size: clamp(20px, 2vw, 26px); }
.assurance-feature .assurance-feature-txt p { margin-top: 8px; max-width: 54ch; }
@media (max-width: 760px) {
  .privacy .assurance-grid { grid-template-columns: 1fr !important; }
  .assurance-feature { flex-direction: column !important; align-items: flex-start; }
}

/* ---- Credenciais: authority band with icons ---- */
.cred-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 !important;
  background: var(--card-bg) !important;
  border-radius: 22px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.cred-strip .cred-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px;
  min-height: 0;
  background: transparent;
}
.cred-strip .cred-item + .cred-item { border-left: 1px solid var(--hairline); }
.cred-strip .cred-ico {
  flex: none;
  width: 40px; height: 40px;
  min-height: 0;
  padding: 0;
  border-radius: 11px;
  background: var(--cria-blue-50);
  color: var(--cria-navy);
  display: flex; align-items: center; justify-content: center;
}
.cred-strip .cred-ico svg { width: 21px; height: 21px; }
.cred-strip .cred-text {
  min-height: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  justify-content: flex-start;
}
@media (max-width: 760px) {
  .cred-strip { grid-template-columns: 1fr; }
  .cred-strip .cred-item + .cred-item { border-left: none; border-top: 1px solid var(--hairline); }
}

/* ---- footer wave echo (signature, navy on navy) ---- */
.site-footer { position: relative; }
.site-footer .foot-wave {
  position: absolute;
  top: 16px; left: 0;
  width: 100%; height: 34px;
  color: rgba(255, 255, 255, 0.09);
  pointer-events: none;
}

/* ---- per-family card depth (stop the identical shadow copied 5x) ---- */
.capability { box-shadow: 0 1px 2px rgba(0, 45, 100, 0.05), 0 16px 36px rgba(0, 45, 100, 0.10) !important; }
.assurance { box-shadow: 0 1px 2px rgba(47, 159, 224, 0.06), 0 14px 30px rgba(47, 159, 224, 0.10) !important; }
.integration-card { box-shadow: 0 1px 2px rgba(0, 45, 100, 0.05), 0 18px 40px rgba(0, 45, 100, 0.09) !important; }

/* ============================================================
   product-stage widget fixes (hero)
   ============================================================ */

/* let the product-stage perspective reach the card (was flattened by the
   unstyled .variant-showcase) so the tilt reads as real 3D, plus a gentle
   idle float so the stage is always alive */
.variant-showcase { transform-style: preserve-3d; }
@media (prefers-reduced-motion: no-preference) {
  .variant-showcase { animation: stage-float 7s ease-in-out infinite; }
}
@keyframes stage-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* smoother, springy hover so the card glides between its two tilt states */
.variant-focus {
  transition:
    transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 1000ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 900ms ease,
    border-color 500ms var(--ease-standard) !important;
}

/* SOAP note: smooth, sliding, looped stream (as if generated live) */
.focus-soap .soap-mini-list div {
  animation: soap-stream 6.5s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
  will-change: transform, opacity;
}
.focus-soap .soap-mini-list div:nth-child(1) { animation-delay: 0ms !important; }
.focus-soap .soap-mini-list div:nth-child(2) { animation-delay: 500ms !important; }
.focus-soap .soap-mini-list div:nth-child(3) { animation-delay: 1000ms !important; }
.focus-soap .soap-mini-list div:nth-child(4) { animation-delay: 1500ms !important; }
@keyframes soap-stream {
  0%   { opacity: 0; transform: translateY(15px); }
  11%  { opacity: 1; transform: translateY(0); }
  86%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-9px); }
}

/* < 900px: kill the float and stop the recorder/soap from flying apart on
   hover (their hover transforms were dropping the translateX centering) */
@media (max-width: 900px) {
  .variant-showcase { animation: none; }
  .variant-focus,
  .variant-focus:hover { transform: none !important; }
  .focus-recorder,
  .variant-focus:hover .focus-recorder { transform: translateX(-50%) !important; }
  .focus-soap,
  .variant-focus:hover .focus-soap { transform: translateX(50%) !important; }
}

/* ============================================================
   product-stage widget: sequential SOAP, recording pulse,
   crisp mobile/tablet. Appended last = wins.
   ============================================================ */

/* SOAP builds in order (empty -> S -> O -> A -> P), holds, fades all, restarts */
.focus-soap .soap-mini-list div { animation: none !important; opacity: 0; }
.focus-soap .soap-mini-list div:nth-child(1) { animation: soap-seq-1 9s cubic-bezier(0.16, 1, 0.3, 1) infinite !important; }
.focus-soap .soap-mini-list div:nth-child(2) { animation: soap-seq-2 9s cubic-bezier(0.16, 1, 0.3, 1) infinite !important; }
.focus-soap .soap-mini-list div:nth-child(3) { animation: soap-seq-3 9s cubic-bezier(0.16, 1, 0.3, 1) infinite !important; }
.focus-soap .soap-mini-list div:nth-child(4) { animation: soap-seq-4 9s cubic-bezier(0.16, 1, 0.3, 1) infinite !important; }
@keyframes soap-seq-1 {
  0% { opacity: 0; transform: translateY(12px); }
  6% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes soap-seq-2 {
  0%, 8% { opacity: 0; transform: translateY(12px); }
  14% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes soap-seq-3 {
  0%, 16% { opacity: 0; transform: translateY(12px); }
  22% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes soap-seq-4 {
  0%, 24% { opacity: 0; transform: translateY(12px); }
  30% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* "Gravando consulta" pulses like a live recording indicator */
.focus-recorder .widget-meta strong { animation: rec-pulse 1.5s ease-in-out infinite; }
@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* mobile / tablet: kill the frosted glass so the widget reads crisp, not soapy */
@media (max-width: 900px) {
  .variant-card,
  .recording-widget,
  .soap-widget,
  .focus-recorder,
  .focus-soap { backdrop-filter: none !important; }
  .focus-recorder { background: rgba(255, 255, 255, 0.15) !important; }
  .focus-soap { background: rgba(255, 255, 255, 0.15) !important; }
  .focus-soap .soap-mini-list div { background: rgba(255, 255, 255, 0.17) !important; }
  .focus-recorder .widget-meta strong,
  .focus-recorder .widget-meta span,
  .focus-soap .soap-widget-head span { color: #ffffff !important; }
  /* keep "pronta para revisao" the same success color as desktop */
  .focus-soap .soap-widget-head strong { color: var(--success) !important; }
  .focus-soap .soap-mini-list p { color: rgba(255, 255, 255, 0.88) !important; }
  .focus-recorder .wave-panel { background: rgba(255, 255, 255, 0.12) !important; }
}

/* ============================================================
   product-stage hover + recording indicator refinement
   ============================================================ */

/* on hover the panels stop jumping sideways; they ride the card's
   smooth rotation as one piece. Desktop only: below 900 the panels are
   stacked and centered with translateX, so we must not clear their
   transform there (that made them fly apart on hover). */
@media (min-width: 901px) {
  .variant-focus:hover .focus-recorder,
  .variant-focus:hover .focus-soap {
    transform: none !important;
  }
}

/* "Gravando consulta": clear recording pulse (red dot ring + label) */
.focus-recorder .record-dot {
  animation: rec-dot-pulse 1.4s ease-in-out infinite !important;
}
@keyframes rec-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 57, 73, 0.55); transform: scale(1); }
  70%  { box-shadow: 0 0 0 11px rgba(255, 57, 73, 0); transform: scale(1.14); }
  100% { box-shadow: 0 0 0 0 rgba(255, 57, 73, 0); transform: scale(1); }
}
.focus-recorder .widget-meta strong {
  animation: rec-pulse 1.4s ease-in-out infinite !important;
}

/* ============================================================
   product-stage: faster SOAP loop + live recording waveform
   ============================================================ */

/* SOAP loops faster (5.5s cycle, tighter tail so it restarts sooner) */
.focus-soap .soap-mini-list div:nth-child(1) { animation: soap-seq-1 5.5s cubic-bezier(0.16,1,0.3,1) infinite !important; }
.focus-soap .soap-mini-list div:nth-child(2) { animation: soap-seq-2 5.5s cubic-bezier(0.16,1,0.3,1) infinite !important; }
.focus-soap .soap-mini-list div:nth-child(3) { animation: soap-seq-3 5.5s cubic-bezier(0.16,1,0.3,1) infinite !important; }
.focus-soap .soap-mini-list div:nth-child(4) { animation: soap-seq-4 5.5s cubic-bezier(0.16,1,0.3,1) infinite !important; }
@keyframes soap-seq-1 { 0%{opacity:0;transform:translateY(12px)} 8%{opacity:1;transform:translateY(0)} 80%{opacity:1;transform:translateY(0)} 90%,100%{opacity:0;transform:translateY(-8px)} }
@keyframes soap-seq-2 { 0%,10%{opacity:0;transform:translateY(12px)} 18%{opacity:1;transform:translateY(0)} 80%{opacity:1;transform:translateY(0)} 90%,100%{opacity:0;transform:translateY(-8px)} }
@keyframes soap-seq-3 { 0%,20%{opacity:0;transform:translateY(12px)} 28%{opacity:1;transform:translateY(0)} 80%{opacity:1;transform:translateY(0)} 90%,100%{opacity:0;transform:translateY(-8px)} }
@keyframes soap-seq-4 { 0%,30%{opacity:0;transform:translateY(12px)} 38%{opacity:1;transform:translateY(0)} 80%{opacity:1;transform:translateY(0)} 90%,100%{opacity:0;transform:translateY(-8px)} }

/* live recording waveform: every bar moves (incl. the faint right half),
   desynced for an organic "audio coming in" look */
.focus-recorder .wave-bars span {
  animation: rec-wave 1s ease-in-out infinite;
  transform-origin: center;
}
.focus-recorder .wave-bars span:nth-child(4n)   { animation-duration: 1.3s;  animation-delay: -0.20s; }
.focus-recorder .wave-bars span:nth-child(4n+1) { animation-duration: 0.85s; animation-delay: -0.55s; }
.focus-recorder .wave-bars span:nth-child(4n+2) { animation-duration: 1.1s;  animation-delay: -0.35s; }
.focus-recorder .wave-bars span:nth-child(4n+3) { animation-duration: 0.95s; animation-delay: -0.72s; }
@keyframes rec-wave {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1.05); }
}

/* force the recording waveform to play, like the SOAP/pulse (intentional
   always-on product demo); varied per-bar timing kept via !important */
.focus-recorder .wave-bars span { animation: rec-wave 1s ease-in-out infinite !important; }
.focus-recorder .wave-bars span:nth-child(4n)   { animation-duration: 1.3s !important;  animation-delay: -0.20s !important; }
.focus-recorder .wave-bars span:nth-child(4n+1) { animation-duration: 0.85s !important; animation-delay: -0.55s !important; }
.focus-recorder .wave-bars span:nth-child(4n+2) { animation-duration: 1.1s !important;  animation-delay: -0.35s !important; }
.focus-recorder .wave-bars span:nth-child(4n+3) { animation-duration: 0.95s !important; animation-delay: -0.72s !important; }

.capabilities .capability-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: minmax(244px, auto);
  gap: clamp(18px, 2.4vw, 30px);
}

.capability {
  overflow: hidden;
  padding: 0;
}

.capability:first-child {
  grid-row: span 2;
}

.capability:nth-child(4) {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(220px, 0.86fr) minmax(0, 1fr);
  align-items: stretch;
}

.capability .card-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--card-radius-lg) var(--card-radius-lg) 0 0;
  box-shadow: none;
}

.capability:first-child .card-media {
  aspect-ratio: 1 / 1;
}

.capability:nth-child(4) .card-media {
  height: 100%;
  min-height: 100%;
  border-radius: var(--card-radius-lg) 0 0 var(--card-radius-lg);
}

.capability .card-body {
  padding: 22px 24px 26px;
}

.capability h3,
.capability .card-body h3 {
  min-height: 0;
  margin-top: 0;
}

.capability p,
.capability .card-body p {
  max-width: 34ch;
}

.clinical-control {
  position: relative;
}

.clinical-control::before {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(32px, 4vw, 54px);
  width: min(100vw, 1440px);
  height: 90px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='42' viewBox='0 0 240 42'%3E%3Cpath d='M0 21 C 30 3 50 3 60 21 S 90 39 120 21 S 150 3 180 21 S 210 39 240 21' fill='none' stroke='%23002d64' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}

.clinical-control-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.58fr);
  align-items: stretch;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid rgba(0, 45, 100, 0.1);
  border-radius: 32px;
  background:
    radial-gradient(circle at 86% 20%, var(--signal-lime-soft), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 254, 0.76));
  box-shadow: 0 1px 2px rgba(0, 45, 100, 0.04), 0 28px 70px rgba(0, 45, 100, 0.1);
  overflow: hidden;
}

.clinical-control-layout::after {
  content: "";
  position: absolute;
  left: clamp(28px, 4vw, 54px);
  right: clamp(28px, 4vw, 54px);
  bottom: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--signal-lime), rgba(47, 159, 224, 0.2), transparent);
}

.privacy-kicker {
  display: inline-flex;
  width: max-content;
  margin-bottom: 16px;
  color: var(--cria-blue-600);
  font-size: 13px;
  font-weight: 740;
}

.clinical-control-copy h2 {
  max-width: 760px;
  color: var(--cria-navy);
  font-size: clamp(38px, 5.2vw, 72px);
  font-weight: 740;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.clinical-control-copy p {
  max-width: 62ch;
  margin-top: 22px;
  color: rgba(8, 21, 39, 0.66);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.5;
}

.review-board {
  display: grid;
  align-content: start;
  min-height: 280px;
  padding: 22px;
  border: 1px solid rgba(0, 45, 100, 0.1);
  border-radius: 28px;
  color: var(--cria-navy);
  background:
    radial-gradient(circle at 88% 12%, rgba(184, 255, 69, 0.28), transparent 9rem),
    rgba(255, 255, 255, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: rgba(8, 21, 39, 0.58);
  font-size: 13px;
  font-weight: 760;
}

.review-head span {
  color: var(--cria-navy);
  font-size: 16px;
  font-weight: 780;
}

.review-head strong {
  color: var(--signal-lime);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.review-list div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(0, 45, 100, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.review-list b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #ffffff;
  background: var(--cria-navy);
  font-size: 12px;
}

.review-list p {
  color: rgba(8, 21, 39, 0.66);
  font-size: 13px;
  line-height: 1.38;
}

.review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.review-actions span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  color: rgba(8, 21, 39, 0.68);
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 760;
}

.review-actions span:last-child {
  color: var(--cria-navy);
  background: var(--signal-lime);
}

.clinical-control .assurance-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid rgba(0, 45, 100, 0.12);
}

.clinical-control .assurance {
  padding: 28px 26px 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.clinical-control .assurance + .assurance {
  border-left: 1px solid rgba(0, 45, 100, 0.1);
}

.clinical-control .assurance h3 {
  min-height: 0;
  color: var(--cria-navy);
  font-size: clamp(19px, 1.8vw, 24px);
}

.clinical-control .assurance p {
  max-width: 32ch;
  color: rgba(8, 21, 39, 0.62);
}

.integration-grid {
  align-items: stretch;
}

.integration-card {
  box-shadow: none !important;
}

.integration-code {
  color: #ffffff;
  background:
    radial-gradient(circle at 80% 12%, rgba(184, 255, 69, 0.18), transparent 13rem),
    linear-gradient(145deg, #071427, #0b2b52) !important;
}

.integration-code h3,
.integration-code p {
  color: #ffffff;
}

.integration-code p {
  color: rgba(255, 255, 255, 0.72);
}

.integration-terminal {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: rgba(232, 247, 255, 0.82);
  background: rgba(1, 11, 28, 0.42);
  font-family: var(--font-metrics);
  font-size: 13px;
  line-height: 1.35;
}

.integration-terminal span:nth-child(2),
.integration-terminal span:nth-child(3) {
  color: var(--signal-lime);
}

@media (max-width: 900px) {
  .capabilities .capability-grid,
  .capability:nth-child(4) {
    grid-template-columns: 1fr;
  }

  .capability:first-child,
  .capability:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }

  .capability:nth-child(4) .card-media {
    height: auto;
    min-height: 0;
    border-radius: var(--card-radius-lg) var(--card-radius-lg) 0 0;
  }

  .clinical-control-layout {
    grid-template-columns: 1fr;
  }

  .clinical-control .assurance-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
    border-top: 0;
  }

  .clinical-control .assurance {
    padding: 22px 0 0;
    border-top: 1px solid rgba(0, 45, 100, 0.1);
  }

  .clinical-control .assurance + .assurance {
    border-left: 0;
  }
}

/* ============================================================
   wide "Preenchimento do prontuário" card (horizontal) +
   header scrollspy active highlight
   ============================================================ */

/* wide bento card: image left, text vertically centered right (was clipped) */
.capabilities .capability:nth-child(4) {
  grid-column: span 2;
  display: grid !important;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr) !important;
  align-items: stretch !important;
  overflow: hidden;
}
.capabilities .capability:nth-child(4) .card-media {
  aspect-ratio: auto !important;
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  border-radius: var(--card-radius-lg) 0 0 var(--card-radius-lg) !important;
}
.capabilities .capability:nth-child(4) .card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.capabilities .capability:nth-child(4) .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px clamp(24px, 3vw, 40px) !important;
}
.capabilities .capability:nth-child(4) .card-body h3 { min-height: 0 !important; }
@media (max-width: 760px) {
  .capabilities .capability:nth-child(4) { grid-template-columns: 1fr !important; }
  .capabilities .capability:nth-child(4) .card-media {
    aspect-ratio: 16 / 10 !important; height: auto !important; min-height: 0 !important;
    border-radius: var(--card-radius-lg) var(--card-radius-lg) 0 0 !important;
  }
}

/* header: the section in view gets a quiet underline indicator, no loud fill */
.nav-links { gap: 22px; align-items: center; }
.nav-links a {
  position: relative;
  padding: 6px 2px;
  color: rgba(8, 21, 39, 0.58);
  transition: color 200ms var(--ease-standard);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cria-blue-600);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.nav-links a:hover {
  color: var(--cria-navy);
}
.nav-links a.active {
  color: var(--cria-navy);
  font-weight: 600;
}
.nav-links a.active::after {
  transform: scaleX(1);
}
.nav-links a.active:hover { color: var(--cria-navy); }

/* ============================================================
   Recursos section - tablet/mobile grid fix (source-order wins).
   Consolidated override for the capability-grid responsive
   layout. Desktop (over 900px) is untouched here; only widths
   at or below 900px and 560px are affected. Selectors below
   match or exceed the specificity of the rules being overridden
   (including !important where the existing nth-child(4) rules
   use !important), and this block sits after every other rule
   in the file so it wins ties on equal specificity.
   ============================================================ */
@media (max-width: 900px) {
  .capabilities .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 18px;
  }

  .capabilities .capability:first-child {
    grid-column: auto;
    grid-row: auto;
  }

  .capabilities .capability:first-child .card-media {
    aspect-ratio: 16 / 10;
  }

  .capabilities .capability:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
    display: block !important;
    grid-template-columns: none !important;
    align-items: initial !important;
  }

  .capabilities .capability:nth-child(4) .card-media {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    border-radius: var(--card-radius-lg) var(--card-radius-lg) 0 0 !important;
  }

  .capabilities .capability:nth-child(4) .card-body {
    display: block;
    padding: 26px 28px 30px !important;
  }
}

@media (max-width: 560px) {
  .capabilities .capability-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 20px;
  }
}

/* ============================================================
   TABLET TIER PATCH (561px - 900px)
   The base @media (max-width: 900px) breakpoint collapses
   multi-column sections straight to 1 column, which looks
   broken on tablet: content hugs the left edge with a large
   empty right side, and images render oversized. This block
   restores a proper multi-column tablet layout for the two
   sections affected, and only lets true mobile (<=560px)
   keep the single-column stacked treatment. Desktop (>900px)
   rules above are untouched. Appended at end of file so these
   rules win by source order against the earlier 900px block.
   ============================================================ */

/* ISSUE 1: "Assurance" cards (clinical-control) - restore the
   3-column divided layout on tablet instead of the stacked
   list, which left ~32ch-wide text blocks stranded on the
   left of a 772px-wide single column. */
@media (min-width: 561px) and (max-width: 900px) {
  .clinical-control .assurance-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    border-top: 1px solid rgba(0, 45, 100, 0.12) !important;
  }

  .clinical-control .assurance {
    padding: 26px 20px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .clinical-control .assurance + .assurance {
    border-left: 1px solid rgba(0, 45, 100, 0.1) !important;
    border-top: 0 !important;
  }
}

/* ISSUE 2: Fluxo timeline - restore the 3-column horizontal
   layout with the horizontal wavy connector on tablet instead
   of the single-column vertical-wave treatment, which made
   each 16/10 card-media image render ~480px tall. */
@media (min-width: 561px) and (max-width: 900px) {
  #fluxo .flow-timeline {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(18px, 3vw, 32px) !important;
  }

  #fluxo .flow-timeline::before {
    top: 30px !important;
    left: 6% !important;
    right: 6% !important;
    bottom: auto !important;
    width: auto !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='20' viewBox='0 0 240 20'%3E%3Cpath d='M0 10 C 30 2 50 2 60 10 S 90 18 120 10 S 150 2 180 10 S 210 18 240 10' fill='none' stroke='%232f9fe0' stroke-width='2' opacity='0.55'/%3E%3C/svg%3E") !important;
    background-repeat: repeat-x !important;
    background-position: center !important;
  }

  #fluxo .flow-step {
    padding-left: 0 !important;
  }

  #fluxo .flow-num {
    padding: 4px 16px 4px 0 !important;
    background: linear-gradient(90deg, var(--paper) 72%, transparent) !important;
    font-size: clamp(30px, 3.4vw, 40px) !important;
  }
}

/* ISSUE 3: Section vertical padding is never reduced below
   900px, leaving oversized empty gaps between sections on
   tablet and mobile. Scale --sec-py down at both tiers. */
@media (max-width: 900px) {
  :root {
    --gutter: 24px;
    --sec-py: clamp(52px, 8vw, 84px);
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 18px;
    --sec-py: clamp(44px, 12vw, 64px);
  }
}

/* brand endline / tagline in footer */
.site-footer .foot-tagline {
  margin: 6px 0 2px;
  color: #ffffff;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 640;
  letter-spacing: -0.02em;
  opacity: 0.96;
}

/* manifesto proof badge (real "in use" status) */
.manifesto-proof {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 0;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 640;
  letter-spacing: 0.01em;
}
.manifesto-proof::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--signal-lime);
  box-shadow: 0 0 0 4px var(--signal-lime-soft);
}

/* ============================================================
   mobile (<=560): product-stage recorder + SOAP as the approved
   flow-stack cascade (recorder on top with its live waveform,
   SOAP pulled up with a negative margin and anchored right).
   Restores the placement + recording animation the user approved.
   ============================================================ */
@media (max-width: 560px) {
  .variant-card.variant-focus {
    min-height: 0 !important;
    height: auto !important;
  }
  .focus-backdrop {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    padding: 22px 20px !important;
    transform: none !important;
  }
  .focus-recorder {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 82% !important;
    margin: 0 auto 0 0 !important;
    transform: none !important;
    z-index: 1 !important;
  }
  .variant-focus:hover .focus-recorder { transform: none !important; }
  .focus-soap {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 84% !important;
    margin: -54px 0 0 auto !important;
    transform: none !important;
    z-index: 3 !important;
    box-shadow:
      0 26px 54px rgba(0, 10, 30, 0.36),
      inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  }
  .variant-focus:hover .focus-soap { transform: none !important; }
  .focus-recorder,
  .focus-soap {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
  .focus-recorder { background: rgba(255, 255, 255, 0.10) !important; }
  .focus-soap { background: rgba(255, 255, 255, 0.13) !important; }
  .focus-soap .soap-mini-list div { background: rgba(255, 255, 255, 0.11) !important; }
}

/* ============================================================
   tablet (561-900): same diagonal frosted overlap as desktop
   (recorder upper-left, SOAP lower-right, layered).
   ============================================================ */
@media (min-width: 561px) and (max-width: 900px) {
  .variant-card.variant-focus { min-height: 486px !important; }
  .focus-recorder {
    left: 20px !important;
    top: 52px !important;
    right: auto !important;
    bottom: auto !important;
    width: min(56%, 430px) !important;
    transform: none !important;
    z-index: 1 !important;
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
  .variant-focus:hover .focus-recorder { transform: none !important; }
  .focus-soap {
    right: 20px !important;
    bottom: 40px !important;
    left: auto !important;
    top: auto !important;
    width: min(52%, 400px) !important;
    transform: none !important;
    z-index: 3 !important;
    background: rgba(255, 255, 255, 0.13) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow:
      0 30px 64px rgba(0, 10, 30, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  }
  .variant-focus:hover .focus-soap { transform: none !important; }
  .focus-soap .soap-mini-list div { background: rgba(255, 255, 255, 0.11) !important; }
}

/* ============================================================
   mobile (<=560): "Controle clinico" assurance items become a
   clean divided list (hairline between each), full-width text,
   even rhythm - aligned and tidy instead of loose stacked blocks.
   ============================================================ */
@media (max-width: 560px) {
  .clinical-control .assurance-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: 22px !important;
    border-top: 1px solid rgba(0, 45, 100, 0.12) !important;
  }
  .clinical-control .assurance {
    padding: 18px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 45, 100, 0.1) !important;
    background: transparent !important;
  }
  .clinical-control .assurance:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .clinical-control .assurance h3 { margin-bottom: 4px !important; }
  .clinical-control .assurance p { max-width: none !important; }
}

/* ============================================================
   Lead modal + request form (Web3Forms)
   ============================================================ */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 32px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.lead-modal[hidden] { display: none; }
.lead-modal.is-open { opacity: 1; }

.lead-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 20, 48, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lead-modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 40px);
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 45, 100, 0.08), 0 40px 90px rgba(0, 45, 100, 0.28);
  transform: translateY(14px) scale(0.99);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.lead-modal.is-open .lead-modal-panel { transform: none; }

.lead-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: var(--cria-blue-50);
  color: var(--cria-navy);
  cursor: pointer;
  transition: background 0.18s ease;
}
.lead-modal-close:hover { background: #dcecfb; }
.lead-modal-close svg { width: 18px; height: 18px; }

.lead-modal-kicker {
  display: inline-block;
  color: var(--cria-blue-600);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.lead-modal-body h2 {
  margin: 8px 0 0;
  color: var(--cria-navy);
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1.06;
  max-width: 22ch;
}
.lead-modal-sub {
  margin: 10px 0 0;
  color: rgba(8, 21, 39, 0.62);
  font-size: 15px;
  line-height: 1.5;
}

.lead-form {
  margin-top: 22px;
  display: grid;
  gap: 15px;
}
.lead-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.lead-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.lead-field label {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 620;
}
.lead-field label span[aria-hidden] { color: var(--cria-blue-600); }
.lead-field .lead-opt {
  color: rgba(8, 21, 39, 0.45);
  font-weight: 500;
}
.lead-field input,
.lead-field select,
.lead-field textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: #f6f8fc;
  border: 1px solid rgba(8, 21, 39, 0.3);
  border-radius: 11px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.lead-field textarea { resize: vertical; min-height: 76px; }
.lead-field input::placeholder,
.lead-field textarea::placeholder { color: rgba(8, 21, 39, 0.55); }
.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus {
  outline: none;
  border-color: var(--cria-blue-600);
  box-shadow: 0 0 0 3px rgba(47, 159, 224, 0.18);
}
.lead-field select { appearance: none; cursor: pointer; background-image: none; }

.lead-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.lead-submit { width: 100%; margin-top: 4px; justify-content: center; }
.lead-submit:disabled { opacity: 0.6; cursor: progress; }

.lead-status {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  min-height: 0;
}
.lead-status.is-error { color: #b3261e; }

.lead-success {
  text-align: center;
  padding: 20px 0 6px;
}
.lead-success-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--cria-blue-50);
  color: var(--cria-navy);
}
.lead-success-ico svg { width: 30px; height: 30px; }
.lead-success h3 {
  margin: 16px 0 0;
  color: var(--cria-navy);
  font-size: 22px;
  font-weight: 720;
  letter-spacing: -0.02em;
}
.lead-success p {
  margin: 8px 0 18px;
  color: rgba(8, 21, 39, 0.62);
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .lead-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lead-modal,
  .lead-modal-panel { transition: none; }
}

/* ============================================================
   TYPE SCALE v2 - one cohesive fluid ramp for mobile/tablet/
   desktop. Every display role maps to a token whose clamp shares
   a consistent slope, so the size hierarchy (hero > statement >
   section > sub > heading > lede > body) holds at EVERY width
   instead of the old ad-hoc clamps that reshuffled the ranking
   between breakpoints. Character comes from tighter tracking, a
   740->780 weight ramp, and tight leading on the display tiers.
   Appended last so it wins the cascade over the scattered rules.
   ============================================================ */
:root {
  --type-hero:      clamp(44px, 31px + 3.1vw, 76px);
  --type-statement: clamp(40px, 28.5px + 2.75vw, 68px);
  --type-section:   clamp(34px, 24.5px + 2.4vw, 60px);
  --type-sub:       clamp(24px, 20px + 1.0vw, 34px);
  --type-heading:   clamp(19px, 17.5px + 0.4vw, 23px);
  --type-lede:      clamp(17px, 15.8px + 0.32vw, 20px);
  --type-body:      clamp(16px, 15.4px + 0.16vw, 17px);
}

/* Hero - the largest, most expressive voice */
.hero h1 {
  font-size: var(--type-hero) !important;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 780;
}

/* Statement moments (manifesto, closing CTA) - dramatic, unified */
.manifesto h2,
.final-cta h2 {
  font-size: var(--type-statement) !important;
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 760;
}

/* Section headlines - one size for all peer sections */
.sec-head h2,
.clinical-control-copy h2 {
  font-size: var(--type-section) !important;
  line-height: 1.0;
  letter-spacing: -0.032em;
  font-weight: 740;
}

/* Card / step headings - one calm size across the page */
.capability h3,
.capability .card-body h3,
.flow-step h3,
.timeline article h3,
.integration-card h3,
.clinical-control .assurance h3,
.assurance h3 {
  font-size: var(--type-heading) !important;
  line-height: 1.22;
  letter-spacing: -0.012em;
  font-weight: 700;
}

/* Lede - section intro paragraphs, calm and readable.
   NOTE: scope hero to .hero-copy so this never leaks into the
   product-stage widgets (recorder / SOAP) that live inside .hero. */
.sec-head p,
.final-cta p,
.manifesto p,
.hero-copy > p,
.clinical-control-copy > p {
  font-size: var(--type-lede) !important;
  line-height: 1.5;
}

/* ============================================================
   desktop (>=901): SOAP is centered vertically inside the stage
   via auto margins (top/bottom 0 + margin-block auto) instead of
   being pinned to the bottom, so when the viewport shrinks and the
   card resizes the SOAP grows evenly up AND down from its center
   rather than only stretching upward. Auto-margin centering keeps
   transform free for the hover nudge + reveal animation.
   ============================================================ */
@media (min-width: 901px) {
  .focus-soap {
    top: 0 !important;
    bottom: 0 !important;
    height: fit-content !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}

/* ============================================================
   Mobile navigation: hamburger toggle + full-screen overlay menu.
   Desktop nav-links are hidden <=1080; this restores working
   navigation on mobile/tablet. Header (logo + X) stays above the
   overlay so the same control closes it.
   ============================================================ */
.nav-toggle { display: none; }
.mobile-menu { display: none; }

@media (max-width: 1080px) {
  .site-header { z-index: 120; }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--cria-navy);
    transition:
      transform 260ms var(--ease-standard),
      opacity 200ms var(--ease-standard);
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 116px clamp(28px, 8vw, 56px) calc(40px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(239, 248, 254, 0.95));
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 320ms var(--ease-standard),
      transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 320ms;
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .mobile-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  .mobile-menu-nav { display: flex; flex-direction: column; }
  .mobile-menu-nav a {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 45, 100, 0.09);
    color: var(--cria-navy);
    font-size: clamp(28px, 8vw, 40px);
    font-weight: 740;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-decoration: none;
    transition: color 180ms var(--ease-standard);
  }
  .mobile-menu-nav a:active { color: var(--cria-blue-600); }
  .mobile-menu-cta {
    margin-top: 28px;
    width: 100%;
    justify-content: center;
  }
}

/* staggered link reveal (only when motion is allowed) */
@media (prefers-reduced-motion: no-preference) and (max-width: 1080px) {
  .mobile-menu-nav a,
  .mobile-menu-cta { opacity: 0; transform: translateY(10px); }
  body.menu-open .mobile-menu-nav a,
  body.menu-open .mobile-menu-cta {
    opacity: 1;
    transform: none;
    transition:
      opacity 400ms var(--ease-standard),
      transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.menu-open .mobile-menu-nav a:nth-child(1) { transition-delay: 90ms; }
  body.menu-open .mobile-menu-nav a:nth-child(2) { transition-delay: 150ms; }
  body.menu-open .mobile-menu-nav a:nth-child(3) { transition-delay: 210ms; }
  body.menu-open .mobile-menu-nav a:nth-child(4) { transition-delay: 270ms; }
  body.menu-open .mobile-menu-cta { transition-delay: 340ms; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none !important; }
  .nav-toggle span { transition: none !important; }
}

/* active section highlight inside the mobile menu (driven by scrollspy) */
@media (max-width: 1080px) {
  .mobile-menu-nav a.active {
    position: relative;
    color: var(--cria-blue-600);
  }
  .mobile-menu-nav a.active::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 58%;
    border-radius: 4px;
    background: var(--cria-blue-600);
  }
}