:root {
  --black: #050505;
  --grafite: #0e0e10;
  --carvao: #1a1a1d;
  --stone: #e7e6e3;
  --text: #f6f5f1;
  --bronze: #ca9654;
  --gold: #f1cc83;
  --bronze-ui: #a98348;
  --gold-ui: #d1b173;
  --muted: rgba(231, 230, 227, 0.7);
  --dim: rgba(231, 230, 227, 0.46);
  --txt-card: rgba(231, 230, 227, 0.62);
  --line: rgba(231, 230, 227, 0.1);
  --line-soft: rgba(231, 230, 227, 0.065);
  --line-gold: rgba(241, 204, 131, 0.3);
  --line-gold-soft: rgba(241, 204, 131, 0.18);
  --surface: rgba(231, 230, 227, 0.035);
  --surface-2: rgba(231, 230, 227, 0.065);
  --surface-gold: rgba(241, 204, 131, 0.09);
  --success: #39B26A;
  --danger: #d66555;
  --whatsapp: #25d366;
  --f-title: "Space Grotesk", Inter, system-ui, sans-serif;
  --f-body: "DM Sans", Inter, system-ui, sans-serif;
  --f-brand: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --grad-cta: linear-gradient(135deg, #f1cc83 0%, #ca9654 100%);
  --grad-metal: linear-gradient(135deg, #f6f5f1 0%, #f1cc83 54%, #ca9654 100%);
  --grad-card: linear-gradient(180deg, rgba(231, 230, 227, 0.055), rgba(231, 230, 227, 0.02));
  --radius-sm: 8px;
  --radius: 16px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --container: 880px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% 0%, rgba(241, 204, 131, 0.12), transparent 30rem),
    linear-gradient(180deg, #080808 0%, #050505 36rem, #050505 100%);
  color: var(--stone);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(115deg, transparent 0 142px, rgba(241, 204, 131, 0.055) 143px, transparent 144px);
  opacity: 0.35;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

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

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

button,
input,
select,
textarea {
  font: inherit;
}

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

h1,
h2,
h3 {
  margin-bottom: 0;
  color: var(--text);
  font-family: var(--f-title);
  font-weight: 700;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.22;
}

h3 {
  font-size: 18px;
  line-height: 1.18;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 1000;
  transform: translateY(-150%);
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--grafite);
  padding: 10px 14px;
  font-weight: 800;
  transition: transform 180ms var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 22px;
}

.topbar {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 46, 34, 0.5);
  background:
    linear-gradient(90deg, #050505 0%, #3b0505 24%, #b41412 50%, #3b0505 76%, #050505 100%);
  color: #ffe9df;
  font-family: var(--f-title);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 0 18px rgba(255, 46, 34, 0.22);
  text-transform: uppercase;
}

.cta {
  transition:
    transform 180ms var(--ease),
    border-color 180ms var(--ease),
    color 180ms var(--ease),
    box-shadow 180ms var(--ease);
}

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: 34px 0 42px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 74% 28%, rgba(241, 204, 131, 0.075), transparent 26rem),
    linear-gradient(135deg, #050505 0%, #090909 48%, #050505 100%);
  opacity: 1;
}

.hero-inner {
  position: relative;
  display: grid;
  max-width: 1280px;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 0.98fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
}

.logo-img {
  width: min(270px, 72%);
  margin: 0 0 22px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 0 18px;
  border: 1px solid rgba(241, 204, 131, 0.32);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.76), rgba(180, 20, 18, 0.18), rgba(5, 5, 5, 0.76)),
    rgba(5, 5, 5, 0.68);
  color: var(--text);
  padding: 10px 16px;
  font-family: var(--f-title);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 28px rgba(180, 20, 18, 0.12);
}

.hero-eyebrow span {
  color: #ff4b38;
  margin-inline: 4px;
  text-shadow: 0 0 18px rgba(255, 46, 34, 0.18);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-family: var(--f-title);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1.25;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.hero h1 {
  max-width: 560px;
  margin: 0;
  font-size: clamp(26px, 3.3vw, 38px);
  line-height: 1.16;
}

.sub {
  max-width: 640px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.hero .sub {
  max-width: 570px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 18px;
  font-size: 14.5px;
}

.hero-bullets {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 320px));
  justify-content: center;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.hero-bullets li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border: 1px solid var(--line-gold-soft);
  border-radius: var(--radius-sm);
  background: rgba(241, 204, 131, 0.07);
  color: var(--stone);
  padding: 12px 18px;
  font-family: var(--f-title);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.hero-actions {
  display: grid;
  justify-items: start;
  gap: 9px;
  margin-top: 30px;
}

.hero-note {
  margin: 0 0 4px;
  color: var(--gold);
  font-family: var(--f-title);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 300px;
  min-height: 59px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 19px 52px;
  background: var(--success);
  color: #06140c;
  font-family: var(--f-title);
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-align: center;
  box-shadow:
    0 0 34px rgba(57, 178, 106, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -55%;
  width: 44%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
  animation: shimmer 3.2s infinite;
}

.cta:hover,
.cta:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 12px 34px rgba(57, 178, 106, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.whatsapp-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-color: currentColor;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.02 3.2C8.96 3.2 3.22 8.9 3.22 15.91c0 2.24.59 4.43 1.72 6.35L3.1 28.8l6.73-1.76a12.86 12.86 0 0 0 6.19 1.58c7.06 0 12.8-5.7 12.8-12.71S23.08 3.2 16.02 3.2Zm0 23.24c-2.02 0-4-.54-5.73-1.55l-.41-.24-3.99 1.04 1.06-3.87-.27-.4a10.43 10.43 0 0 1-1.6-5.51c0-5.8 4.91-10.53 10.94-10.53s10.94 4.72 10.94 10.53-4.91 10.53-10.94 10.53Zm6-7.88c-.33-.16-1.95-.96-2.25-1.07-.3-.11-.52-.16-.74.16-.22.33-.85 1.07-1.04 1.29-.19.22-.38.25-.71.08-.33-.16-1.39-.51-2.65-1.62-.98-.87-1.64-1.95-1.83-2.28-.19-.33-.02-.5.14-.66.15-.15.33-.38.49-.57.16-.19.22-.33.33-.55.11-.22.05-.41-.03-.57-.08-.16-.74-1.78-1.01-2.44-.27-.64-.54-.55-.74-.56h-.63c-.22 0-.57.08-.87.41-.3.33-1.14 1.11-1.14 2.7s1.17 3.14 1.33 3.36c.16.22 2.3 3.5 5.57 4.91.78.34 1.39.54 1.86.69.78.25 1.49.21 2.05.13.63-.09 1.95-.79 2.22-1.56.27-.77.27-1.43.19-1.56-.08-.14-.3-.22-.63-.38Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.02 3.2C8.96 3.2 3.22 8.9 3.22 15.91c0 2.24.59 4.43 1.72 6.35L3.1 28.8l6.73-1.76a12.86 12.86 0 0 0 6.19 1.58c7.06 0 12.8-5.7 12.8-12.71S23.08 3.2 16.02 3.2Zm0 23.24c-2.02 0-4-.54-5.73-1.55l-.41-.24-3.99 1.04 1.06-3.87-.27-.4a10.43 10.43 0 0 1-1.6-5.51c0-5.8 4.91-10.53 10.94-10.53s10.94 4.72 10.94 10.53-4.91 10.53-10.94 10.53Zm6-7.88c-.33-.16-1.95-.96-2.25-1.07-.3-.11-.52-.16-.74.16-.22.33-.85 1.07-1.04 1.29-.19.22-.38.25-.71.08-.33-.16-1.39-.51-2.65-1.62-.98-.87-1.64-1.95-1.83-2.28-.19-.33-.02-.5.14-.66.15-.15.33-.38.49-.57.16-.19.22-.33.33-.55.11-.22.05-.41-.03-.57-.08-.16-.74-1.78-1.01-2.44-.27-.64-.54-.55-.74-.56h-.63c-.22 0-.57.08-.87.41-.3.33-1.14 1.11-1.14 2.7s1.17 3.14 1.33 3.36c.16.22 2.3 3.5 5.57 4.91.78.34 1.39.54 1.86.69.78.25 1.49.21 2.05.13.63-.09 1.95-.79 2.22-1.56.27-.77.27-1.43.19-1.56-.08-.14-.3-.22-.63-.38Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.note,
.caption,
small {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.4;
}

.note {
  margin: 0;
}

.hero-visual {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center end;
  isolation: isolate;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% -4% 4% 8%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(241, 204, 131, 0.2), transparent 44%),
    radial-gradient(circle at 42% 54%, rgba(202, 150, 84, 0.16), transparent 52%);
  filter: blur(18px);
  opacity: 0.72;
}

.hero-engine {
  position: relative;
  isolation: isolate;
  width: min(100%, 690px);
  min-height: 430px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-size: auto;
  padding: 0;
  box-shadow:
    none;
}

.hero-engine::before {
  content: "";
  position: absolute;
  inset: 14% 4% 8% 0;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 44%, rgba(241, 204, 131, 0.14), transparent 42%),
    radial-gradient(circle at 76% 58%, rgba(57, 178, 106, 0.09), transparent 34%);
  filter: blur(18px);
  opacity: 0.78;
}

.hero-engine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0;
  border: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

.hero-engine-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-engine-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.hero-engine-brand img {
  width: 112px;
  height: auto;
  display: block;
}

.hero-system-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(241, 204, 131, 0.2);
  border-radius: var(--radius-pill);
  background: rgba(241, 204, 131, 0.045);
  color: rgba(241, 204, 131, 0.88);
  font-family: var(--f-title);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-system-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 16px rgba(57, 178, 106, 0.78);
}

.hero-engine-top p {
  max-width: 210px;
  margin: 0;
  color: rgba(240, 239, 235, 0.92);
  font-family: var(--f-title);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
}

.hero-engine-top p span {
  color: var(--gold);
}

.hero-route {
  position: relative;
  min-height: 410px;
  margin-top: 0;
  overflow: visible;
}

.hero-route-line {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 28px;
  z-index: 1;
  width: 96%;
  height: 370px;
  overflow: visible;
  pointer-events: none;
}

.hero-route-glow,
.hero-route-stroke {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.hero-route-glow {
  stroke: rgba(241, 204, 131, 0.18);
  stroke-width: 9;
  filter: blur(8px);
}

.hero-route-stroke {
  stroke: url(#heroRouteGradient);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(241, 204, 131, 0.16));
}

.hero-route-steps {
  position: relative;
  z-index: 2;
  min-height: 370px;
}

.hero-route-step {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 150px;
  display: grid;
  justify-items: center;
  text-align: center;
  animation: heroFloatStep 4.8s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transform: translate(-50%, -39px);
  transition: filter 220ms var(--ease);
  will-change: transform;
}

.hero-route-step:nth-child(1) { --x: 13%; --y: 30%; --delay: 0s; }
.hero-route-step:nth-child(2) { --x: 31%; --y: 62%; --delay: -0.9s; }
.hero-route-step:nth-child(3) { --x: 50%; --y: 30%; --delay: -1.8s; }
.hero-route-step:nth-child(4) { --x: 69%; --y: 62%; --delay: -2.7s; }
.hero-route-step:nth-child(5) { --x: 87%; --y: 30%; --delay: -3.6s; }

.hero-route-step:hover {
  filter: brightness(1.12);
}

.hero-route-node {
  position: relative;
  z-index: 2;
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  margin-bottom: 11px;
  border: 1px solid rgba(241, 204, 131, 0.4);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 24%, rgba(241, 204, 131, 0.23), transparent 42%),
    linear-gradient(145deg, rgba(31, 29, 26, 0.98), rgba(7, 7, 7, 0.98));
  color: var(--gold);
  font-family: var(--f-title);
  font-size: 17px;
  font-weight: 800;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.36),
    0 0 0 9px rgba(241, 204, 131, 0.035);
  animation: heroNodePulse 3.6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.hero-route-node::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(241, 204, 131, 0.08);
  border-radius: 50%;
}

.hero-route-step.is-final .hero-route-node {
  border-color: rgba(57, 178, 106, 0.55);
  color: #bdf5d2;
  animation-name: heroNodePulseGreen;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.36),
    0 0 0 9px rgba(57, 178, 106, 0.045),
    0 0 38px rgba(57, 178, 106, 0.12);
}

.hero-route-step strong {
  position: relative;
  z-index: 3;
  color: #fff;
  font-family: var(--f-title);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.08;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.72);
}

.hero-route-step span {
  position: relative;
  z-index: 3;
  max-width: 125px;
  margin-top: 7px;
  color: rgba(240, 239, 235, 0.62);
  font-size: 10.8px;
  font-weight: 800;
  line-height: 1.28;
}

.hero-engine-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 4px;
}

.hero-engine-bottom p {
  margin: 0;
  border: 1px solid rgba(241, 204, 131, 0.2);
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(240, 239, 235, 0.74);
  padding: 13px 15px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.hero-engine-bottom p strong {
  color: var(--gold);
}

.hero-engine-bottom div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.hero-engine-bottom span {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(240, 239, 235, 0.72);
  padding: 8px 10px;
  font-family: var(--f-title);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

@keyframes heroFloatStep {
  0%, 100% {
    transform: translate(-50%, -39px) translateY(0);
  }
  50% {
    transform: translate(-50%, -39px) translateY(-15px);
  }
}

@keyframes heroNodePulse {
  0%, 100% {
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.36),
      0 0 0 9px rgba(241, 204, 131, 0.035);
  }
  50% {
    box-shadow:
      0 25px 54px rgba(0, 0, 0, 0.46),
      0 0 0 13px rgba(241, 204, 131, 0.055),
      0 0 28px rgba(241, 204, 131, 0.13);
  }
}

@keyframes heroNodePulseGreen {
  0%, 100% {
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.36),
      0 0 0 9px rgba(57, 178, 106, 0.045),
      0 0 38px rgba(57, 178, 106, 0.12);
  }
  50% {
    box-shadow:
      0 25px 54px rgba(0, 0, 0, 0.46),
      0 0 0 13px rgba(57, 178, 106, 0.07),
      0 0 42px rgba(57, 178, 106, 0.2);
  }
}

.dashboard-cockpit {
  position: relative;
  width: min(100%, 480px);
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(231, 230, 227, 0.12), rgba(231, 230, 227, 0.015) 32%, rgba(5, 5, 5, 0.72)),
    #080808;
  padding: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 44px 120px rgba(0, 0, 0, 0.72),
    0 0 52px rgba(241, 204, 131, 0.1);
  transform: perspective(1200px) rotateY(-7deg) rotateX(2deg);
  transform-style: preserve-3d;
  cursor: pointer;
  transition:
    transform 420ms var(--ease),
    border-color 280ms var(--ease),
    box-shadow 280ms var(--ease);
  will-change: transform;
}

.dashboard-cockpit::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -48%;
  width: 38%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  opacity: 0;
  pointer-events: none;
}

.dashboard-cockpit:hover,
.dashboard-cockpit:focus-visible,
.dashboard-cockpit.is-active {
  border-color: rgba(241, 204, 131, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 54px 130px rgba(0, 0, 0, 0.78),
    0 0 68px rgba(241, 204, 131, 0.18);
  transform: perspective(1200px) rotateY(-2deg) rotateX(0deg) translateY(-8px) scale(1.012);
}

.dashboard-cockpit:hover::after,
.dashboard-cockpit:focus-visible::after,
.dashboard-cockpit.is-active::after {
  animation: cockpitShine 1050ms var(--ease) both;
}

.cockpit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 14px;
}

.cockpit-top span,
.cockpit-kpis span,
.gauge span {
  color: var(--dim);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.cockpit-top strong {
  color: var(--gold);
  font-family: var(--f-title);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cockpit-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.cockpit-kpis div,
.funnel-card,
.gauge,
.cockpit-chart {
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(231, 230, 227, 0.055), rgba(231, 230, 227, 0.018)),
    rgba(5, 5, 5, 0.68);
}

.cockpit-kpis div {
  padding: 12px;
  transition:
    transform 260ms var(--ease),
    border-color 260ms var(--ease),
    background 260ms var(--ease);
}

.cockpit-kpis strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-family: var(--f-title);
  font-size: 18px;
  line-height: 1;
}

.cockpit-main {
  display: grid;
  grid-template-columns: 1fr 112px;
  gap: 12px;
  margin-top: 12px;
}

.funnel-card {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.funnel-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 38px;
  border-radius: 10px;
  color: var(--grafite);
  padding: 0 14px;
  font-family: var(--f-title);
  font-weight: 800;
  line-height: 1;
  transition:
    transform 260ms var(--ease),
    box-shadow 260ms var(--ease),
    filter 260ms var(--ease);
}

.funnel-row span {
  font-size: 12px;
}

.funnel-row strong {
  font-size: 13px;
}

.row-1 {
  width: 100%;
  background: linear-gradient(135deg, #f1cc83, #ca9654);
}

.row-2 {
  width: 84%;
  margin-inline: auto;
  background: linear-gradient(135deg, #d1b173, #a98348);
}

.row-3 {
  width: 66%;
  margin-inline: auto;
  background: linear-gradient(135deg, #e7e6e3, #c4bda9);
}

.row-4 {
  width: 44%;
  margin-inline: auto;
  background: linear-gradient(135deg, #f6f5f1, #d9d3c4);
}

.gauge-stack {
  display: grid;
  gap: 10px;
}

.gauge {
  position: relative;
  overflow: hidden;
  padding: 13px 12px;
  transition:
    transform 260ms var(--ease),
    border-color 260ms var(--ease);
}

.gauge::before {
  content: "";
  position: absolute;
  inset: auto 10px 8px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--bronze), var(--gold), transparent);
}

.gauge strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-family: var(--f-title);
  font-size: 17px;
  line-height: 1;
}

.cockpit-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 8px;
  height: 122px;
  margin-top: 12px;
  padding: 16px;
}

.cockpit-chart span {
  min-height: 16px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--gold), var(--bronze));
  box-shadow: 0 0 22px rgba(241, 204, 131, 0.12);
  transform-origin: bottom;
  transition:
    transform 260ms var(--ease),
    filter 260ms var(--ease);
}

.dashboard-cockpit:hover .cockpit-kpis div,
.dashboard-cockpit:focus-visible .cockpit-kpis div,
.dashboard-cockpit.is-active .cockpit-kpis div {
  border-color: var(--line-gold-soft);
  background:
    radial-gradient(circle at 80% 0%, rgba(241, 204, 131, 0.11), transparent 34%),
    linear-gradient(180deg, rgba(231, 230, 227, 0.07), rgba(231, 230, 227, 0.022)),
    rgba(5, 5, 5, 0.7);
  transform: translateY(-3px);
}

.dashboard-cockpit:hover .funnel-row,
.dashboard-cockpit:focus-visible .funnel-row,
.dashboard-cockpit.is-active .funnel-row {
  filter: brightness(1.06);
  box-shadow: 0 8px 24px rgba(241, 204, 131, 0.12);
}

.dashboard-cockpit:hover .row-1,
.dashboard-cockpit:focus-visible .row-1,
.dashboard-cockpit.is-active .row-1 {
  transform: translateX(4px);
}

.dashboard-cockpit:hover .row-2,
.dashboard-cockpit:focus-visible .row-2,
.dashboard-cockpit.is-active .row-2 {
  transform: translateX(-4px);
}

.dashboard-cockpit:hover .row-3,
.dashboard-cockpit:focus-visible .row-3,
.dashboard-cockpit.is-active .row-3 {
  transform: translateX(5px);
}

.dashboard-cockpit:hover .row-4,
.dashboard-cockpit:focus-visible .row-4,
.dashboard-cockpit.is-active .row-4 {
  transform: translateX(-3px);
}

.dashboard-cockpit:hover .gauge,
.dashboard-cockpit:focus-visible .gauge,
.dashboard-cockpit.is-active .gauge {
  border-color: var(--line-gold-soft);
  transform: translateY(-2px);
}

.dashboard-cockpit:hover .cockpit-chart span,
.dashboard-cockpit:focus-visible .cockpit-chart span,
.dashboard-cockpit.is-active .cockpit-chart span {
  animation: barLift 900ms var(--ease) both;
  filter: brightness(1.08);
}

.dashboard-cockpit:hover .bar-2,
.dashboard-cockpit:focus-visible .bar-2,
.dashboard-cockpit.is-active .bar-2 {
  animation-delay: 60ms;
}

.dashboard-cockpit:hover .bar-3,
.dashboard-cockpit:focus-visible .bar-3,
.dashboard-cockpit.is-active .bar-3 {
  animation-delay: 120ms;
}

.dashboard-cockpit:hover .bar-4,
.dashboard-cockpit:focus-visible .bar-4,
.dashboard-cockpit.is-active .bar-4 {
  animation-delay: 180ms;
}

.dashboard-cockpit:hover .bar-5,
.dashboard-cockpit:focus-visible .bar-5,
.dashboard-cockpit.is-active .bar-5 {
  animation-delay: 240ms;
}

.dashboard-cockpit:hover .bar-6,
.dashboard-cockpit:focus-visible .bar-6,
.dashboard-cockpit.is-active .bar-6 {
  animation-delay: 300ms;
}

.dashboard-cockpit:hover .bar-7,
.dashboard-cockpit:focus-visible .bar-7,
.dashboard-cockpit.is-active .bar-7 {
  animation-delay: 360ms;
}

.bar-1 {
  height: 38%;
}

.bar-2 {
  height: 54%;
}

.bar-3 {
  height: 46%;
}

.bar-4 {
  height: 72%;
}

.bar-5 {
  height: 64%;
}

.bar-6 {
  height: 86%;
}

.bar-7 {
  height: 78%;
}

.section {
  padding: 56px 0;
  border-top: 1px solid var(--line-soft);
}

.section.alt {
  background: #050505;
}

.section-heading {
  text-align: center;
}

.section-heading h2 {
  max-width: 760px;
  margin: 0 auto;
}

.section-heading .sub {
  margin-top: 12px;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    var(--grad-card),
    #080808;
}

.card.is-featured,
.num.is-featured,
.ab-card.is-featured {
  border-color: rgba(241, 204, 131, 0.26);
  background:
    radial-gradient(circle at 85% 0%, rgba(241, 204, 131, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(241, 204, 131, 0.08), rgba(231, 230, 227, 0.02)),
    #080808;
  box-shadow: 0 0 48px rgba(241, 204, 131, 0.08);
}

.numbers-section {
  background: #050505;
}

.numbers-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 34px;
}

.numbers-proof-card {
  min-height: 184px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 26px 18px;
  text-align: center;
}

.metric-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  color: var(--gold);
  font-family: var(--f-title);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.metric-value small {
  color: var(--text);
  font-size: clamp(15px, 1.55vw, 22px);
  letter-spacing: -0.02em;
}

.numbers-proof-card p {
  max-width: 210px;
  margin: 16px auto 0;
  color: var(--txt-card);
  font-size: 13.5px;
  line-height: 1.35;
}

.testimonial-carousel {
  margin-top: 34px;
}

.carousel-head {
  display: grid;
  justify-items: center;
  gap: 24px;
  margin-bottom: 24px;
  text-align: center;
}

.carousel-head h3 {
  max-width: 760px;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.16;
}

.carousel-head p {
  max-width: 540px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
}

.carousel-controls {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.carousel-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  background: rgba(241, 204, 131, 0.08);
  color: var(--gold);
  font-family: var(--f-title);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 180ms var(--ease),
    border-color 180ms var(--ease),
    background 180ms var(--ease);
}

.carousel-btn:hover,
.carousel-btn:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(241, 204, 131, 0.58);
  background: rgba(241, 204, 131, 0.14);
}

.testimonial-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 420px);
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 8px 2px 2px;
  padding: 8px 2px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(241, 204, 131, 0.36) rgba(231, 230, 227, 0.06);
}

.testimonial-track::-webkit-scrollbar {
  height: 8px;
}

.testimonial-track::-webkit-scrollbar-track {
  background: rgba(231, 230, 227, 0.06);
  border-radius: var(--radius-pill);
}

.testimonial-track::-webkit-scrollbar-thumb {
  background: rgba(241, 204, 131, 0.36);
  border-radius: var(--radius-pill);
}

.testimonial-slide {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  padding: 24px;
  transition:
    transform 220ms var(--ease),
    border-color 220ms var(--ease),
    box-shadow 220ms var(--ease),
    background 220ms var(--ease);
}

.testimonial-slide:hover,
.testimonial-slide:focus-within,
.testimonial-slide:active {
  transform: translateY(-4px);
  border-color: var(--line-gold);
  background:
    radial-gradient(circle at 85% 0%, rgba(241, 204, 131, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(231, 230, 227, 0.07), rgba(231, 230, 227, 0.02)),
    #080808;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
}

.stars {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.16em;
}

.testimonial-slide p {
  margin: 16px 0 22px;
  color: var(--txt-card);
  font-size: 13.5px;
  line-height: 1.48;
}

.testimonial-slide strong {
  margin-top: auto;
  color: var(--text);
  font-family: var(--f-title);
  font-size: 15px;
}

.testimonial-slide small {
  display: block;
  margin-top: 4px;
  color: var(--dim);
}

.diagnosis-section {
  position: relative;
  overflow: hidden;
  background: #050505;
}

.diagnosis-section::before,
.diagnosis-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.diagnosis-section::before {
  display: none;
}

.diagnosis-section::after {
  display: none;
}

.diagnosis-inner {
  position: relative;
  z-index: 1;
}

.method-section {
  position: relative;
  overflow: hidden;
  border-top-color: rgba(241, 204, 131, 0.08);
  background: #000;
}

.method-section::before,
.method-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.method-section::before {
  display: none;
}

.method-section::after {
  display: none;
}

.method-inner {
  position: relative;
  z-index: 1;
}

.method-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.method-display {
  position: relative;
  isolation: isolate;
  width: min(100%, 560px);
  margin: 0 auto 4px;
  text-align: center;
  background: #000;
}

.method-display::before {
  display: none;
}

.method-display::after {
  display: none;
}

.method-display img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
}

.method-head h2 {
  max-width: 680px;
  margin: 12px auto 0;
  border: 1px solid rgba(241, 204, 131, 0.28);
  border-radius: 4px;
  background: rgba(5, 5, 5, 0.68);
  color: rgba(231, 230, 227, 0.82);
  padding: 7px 14px;
  font-family: var(--f-title);
  font-size: clamp(13px, 1.6vw, 17px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(202, 150, 84, 0.07);
}

.diagnosis-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: start;
}

.diagnosis-head h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.18;
}

.diagnosis-head h2 span {
  color: var(--gold);
}

.diagnosis-head p {
  max-width: 460px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.48;
}

.diagnosis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 54px;
}

.diagnosis-card {
  min-height: 330px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 86% 0%, rgba(241, 204, 131, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(231, 230, 227, 0.055), rgba(231, 230, 227, 0.02)),
    #080808;
  padding: 34px 28px 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 70px rgba(0, 0, 0, 0.32);
  transition:
    transform 220ms var(--ease),
    border-color 220ms var(--ease),
    box-shadow 220ms var(--ease);
}

.diagnosis-card:hover,
.diagnosis-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--line-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 30px 80px rgba(0, 0, 0, 0.42),
    0 0 40px rgba(241, 204, 131, 0.08);
}

.diagnosis-card > span {
  display: inline-flex;
  border: 1px solid var(--line-gold-soft);
  border-radius: var(--radius-sm);
  background: rgba(241, 204, 131, 0.08);
  color: var(--gold);
  padding: 5px 9px;
  font-family: var(--f-title);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.diagnosis-card h3 {
  margin-top: 28px;
  color: var(--text);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.2;
  text-transform: none;
}

.diagnosis-card p {
  margin: 18px 0 0;
  color: var(--txt-card);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.48;
}

.dor-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 30px;
}

.dor-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px;
}

.panel-label {
  color: var(--gold);
  font-family: var(--f-title);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dor-panel strong {
  display: block;
  margin-top: 12px;
  color: var(--text);
  font-family: var(--f-title);
  font-size: 22px;
  line-height: 1.16;
  letter-spacing: -0.035em;
}

.dor-panel p {
  margin: 12px 0 0;
  color: var(--txt-card);
  font-size: 13.5px;
  line-height: 1.45;
}

.pain-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  counter-reset: pain;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pain-list li {
  position: relative;
  min-height: 128px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 92% 0%, rgba(241, 204, 131, 0.09), transparent 36%),
    linear-gradient(180deg, rgba(231, 230, 227, 0.052), rgba(231, 230, 227, 0.018)),
    rgba(8, 8, 8, 0.76);
  color: var(--stone);
  padding: 46px 18px 18px;
  font-size: 14.5px;
  line-height: 1.4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 42px rgba(0, 0, 0, 0.18);
  transition:
    transform 200ms var(--ease),
    border-color 200ms var(--ease),
    box-shadow 200ms var(--ease),
    background 200ms var(--ease);
}

.pain-list li::before {
  counter-increment: pain;
  content: "0" counter(pain);
  position: absolute;
  top: 16px;
  left: 18px;
  color: var(--gold);
  font-family: var(--f-title);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
}

.pain-list li::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 21px;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(241, 204, 131, 0.58));
}

.pain-list li:nth-child(1) {
  grid-column: span 3;
}

.pain-list li:nth-child(2) {
  grid-column: span 3;
}

.pain-list li:nth-child(3) {
  grid-column: span 2;
}

.pain-list li:nth-child(4) {
  grid-column: span 2;
}

.pain-list li:nth-child(5) {
  grid-column: span 2;
}

.pain-list li:hover,
.pain-list li:focus-within {
  transform: translateY(-3px);
  border-color: var(--line-gold);
  background:
    radial-gradient(circle at 92% 0%, rgba(241, 204, 131, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(231, 230, 227, 0.068), rgba(231, 230, 227, 0.02)),
    rgba(8, 8, 8, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 62px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(241, 204, 131, 0.06);
}

.nums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
}

.num {
  border: 1px solid rgba(214, 185, 140, 0.4);
  border-radius: var(--radius-sm);
  padding: 16px 14px;
  text-align: center;
}

.num .big {
  display: block;
  color: var(--gold);
  font-family: var(--f-title);
  font-size: clamp(21px, 2.5vw, 28px);
  font-weight: 800;
  line-height: 1;
}

.num .lbl {
  display: block;
  margin-top: 8px;
  color: var(--txt-card);
  font-size: 12.5px;
  line-height: 1.3;
}

.journey-wrap {
  max-width: 860px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.journey-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 22px;
  align-items: center;
  padding: 28px 32px;
}

.journey-num {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--f-title);
  font-size: 46px;
  font-weight: 800;
}

.journey-card p,
.review p,
.service-card p,
.process-card p,
.qcard li,
.faq p,
.ab-card p,
.footer p {
  color: var(--txt-card);
  font-size: 13.5px;
  line-height: 1.45;
}

.journey-card p {
  margin: 8px 0 0;
}

.method-steps {
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 52px auto 0;
}

.method-steps .journey-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  border-color: rgba(241, 204, 131, 0.16);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0%, rgba(241, 204, 131, 0.075), transparent 36%),
    linear-gradient(180deg, rgba(231, 230, 227, 0.045), rgba(231, 230, 227, 0.014)),
    #060606;
  padding: 28px 28px 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 64px rgba(0, 0, 0, 0.26);
  transition:
    transform 220ms var(--ease),
    border-color 220ms var(--ease),
    box-shadow 220ms var(--ease),
    background 220ms var(--ease);
}

.method-steps .journey-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(202, 150, 84, 0.42), transparent 72%);
  opacity: 0.76;
}

.method-steps .journey-card::after {
  position: absolute;
  right: 22px;
  bottom: -16px;
  z-index: 0;
  color: rgba(241, 204, 131, 0.045);
  font-family: var(--f-title);
  font-size: clamp(84px, 10vw, 136px);
  font-weight: 800;
  line-height: 0.8;
  pointer-events: none;
}

.method-steps .journey-card:nth-child(1)::after {
  content: "N";
}

.method-steps .journey-card:nth-child(2)::after {
  content: "O";
}

.method-steps .journey-card:nth-child(3)::after {
  content: "R";
}

.method-steps .journey-card:nth-child(4)::after {
  content: "D";
}

.method-steps .journey-card:hover,
.method-steps .journey-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--line-gold);
  background:
    radial-gradient(circle at 100% 0%, rgba(241, 204, 131, 0.11), transparent 38%),
    linear-gradient(180deg, rgba(231, 230, 227, 0.06), rgba(231, 230, 227, 0.016)),
    #080808;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 30px 78px rgba(0, 0, 0, 0.36),
    0 0 34px rgba(241, 204, 131, 0.07);
}

.method-steps .journey-num {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(241, 204, 131, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(241, 204, 131, 0.1), rgba(241, 204, 131, 0.02)),
    rgba(5, 5, 5, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 22px rgba(241, 204, 131, 0.055);
  font-size: 24px;
  line-height: 1;
}

.method-steps .journey-card > div:not(.journey-num) {
  position: relative;
  z-index: 1;
  max-width: 610px;
}

.method-steps h3::before {
  display: block;
  margin-bottom: 7px;
  color: var(--gold);
  font-family: var(--f-title);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.method-steps .journey-card:nth-child(1) h3::before {
  content: "N / Norte";
}

.method-steps .journey-card:nth-child(2) h3::before {
  content: "O / Oferta";
}

.method-steps .journey-card:nth-child(3) h3::before {
  content: "R / Roteiro";
}

.method-steps .journey-card:nth-child(4) h3::before {
  content: "D / Dados";
}

.method-steps h3 {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.18;
}

.method-steps .journey-card p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.method-proof {
  max-width: 720px;
  margin: 30px auto 0;
  color: var(--muted);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

.method-proof strong {
  color: var(--gold);
  font-family: var(--f-title);
  font-weight: 800;
}

.method-cta {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.comparison {
  margin-top: 34px;
  overflow: hidden;
}

.comparison-row {
  display: grid;
  grid-template-columns: 0.58fr 0.82fr 1.2fr;
  gap: 12px;
  align-items: start;
  padding: 15px 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--txt-card);
  font-size: 13.5px;
  line-height: 1.4;
}

.comparison-row:first-child {
  border-top: 0;
}

.comparison-head {
  color: var(--gold);
  font-family: var(--f-title);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.criterion {
  color: var(--text);
  font-family: var(--f-title);
  font-weight: 800;
}

.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.review {
  padding: 24px 22px;
}

.score {
  display: inline-flex;
  margin-bottom: 12px;
  border: 1px solid var(--line-gold-soft);
  border-radius: var(--radius-pill);
  color: var(--gold);
  padding: 4px 10px;
  font-family: var(--f-title);
  font-size: 12px;
  font-weight: 800;
}

.review strong {
  display: block;
  color: var(--text);
  font-family: var(--f-title);
}

.review small {
  display: block;
  margin-top: 2px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 34px;
}

.service-card,
.process-card,
.qcard {
  padding: 22px;
}

.service-card span,
.process-card span,
.ab-card span {
  color: var(--gold);
  font-family: var(--f-title);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.service-card p,
.process-card p,
.ab-card p {
  margin: 14px 0 0;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 34px;
}

.process-card h3 {
  margin-top: 14px;
}

.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 40px;
}

.qcard h3 {
  margin-bottom: 16px;
}

.qcard ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qcard li {
  position: relative;
  padding-left: 18px;
}

.qcard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.qcard:not(.is-featured) li::before {
  background: var(--danger);
}

.about-section {
  position: relative;
  overflow: hidden;
  background: #050505;
}

.about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0 142px,
      rgba(241, 204, 131, 0.045) 143px,
      transparent 144px
    );
  opacity: 0.34;
}

.about-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  gap: 28px;
  align-items: start;
  padding: 30px 32px;
  border-color: var(--line-gold-soft);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 92% 0%, rgba(241, 204, 131, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(231, 230, 227, 0.055), rgba(231, 230, 227, 0.02)),
    #080808;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 26px 70px rgba(0, 0, 0, 0.3);
}

.about-kicker,
.about-chip {
  display: inline-flex;
  color: var(--gold);
  font-family: var(--f-title);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.25;
  text-transform: uppercase;
}

.about-copy h2 {
  margin-top: 10px;
  max-width: 460px;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.22;
}

.about-copy p,
.about-points li {
  margin: 14px 0 0;
  color: var(--txt-card);
  font-size: 13.5px;
  line-height: 1.45;
}

.about-side {
  display: grid;
  gap: 16px;
}

.about-side h3 {
  font-size: clamp(20px, 2.5vw, 25px);
  line-height: 1.16;
}

.origin-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(241, 204, 131, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(5, 5, 5, 0.54);
  color: var(--text);
  padding: 12px 14px;
  font-family: var(--f-title);
  font-size: 14.5px;
  line-height: 1.15;
}

.origin-badge span {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid var(--bronze);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.origin-badge span::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.origin-badge strong {
  font-weight: 800;
}

.about-points {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-points li {
  position: relative;
  margin: 0;
  padding-left: 18px;
}

.about-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.about-cta {
  display: inline-flex;
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 6px;
}

.faqlist {
  max-width: 760px;
  margin: 38px auto 0;
}

.faq details {
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  color: var(--text);
  font-family: var(--f-title);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  color: var(--gold);
}

.faq details[open] summary::after {
  content: "-";
}

.faq p {
  margin: 0;
  padding: 0 22px 18px;
}

.finalcta {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: #050505;
}

.finalcta .inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  padding: 56px 22px;
  text-align: center;
}

.finalcta h2 {
  max-width: 780px;
  margin: 0 auto;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.18;
}

.ab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 760px;
  margin: 28px auto 24px;
}

.ab-card {
  padding: 22px;
  text-align: left;
}

.footer {
  padding: 42px 0 32px;
  border-top: 1px solid var(--line-soft);
  background: #050505;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  justify-content: center;
  justify-items: center;
  align-items: center;
  text-align: center;
  width: 100%;
  margin-inline: auto;
}

.footer img {
  width: 140px;
  margin-inline: auto;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  font-family: var(--f-title);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition:
    color 180ms var(--ease),
    transform 180ms var(--ease);
}

.instagram-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-color: currentColor;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.8 2h8.4A5.8 5.8 0 0 1 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8A5.8 5.8 0 0 1 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2Zm0 2A3.8 3.8 0 0 0 4 7.8v8.4A3.8 3.8 0 0 0 7.8 20h8.4a3.8 3.8 0 0 0 3.8-3.8V7.8A3.8 3.8 0 0 0 16.2 4H7.8Zm8.95 1.65a1.35 1.35 0 1 1 0 2.7 1.35 1.35 0 0 1 0-2.7ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.8 2h8.4A5.8 5.8 0 0 1 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8A5.8 5.8 0 0 1 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2Zm0 2A3.8 3.8 0 0 0 4 7.8v8.4A3.8 3.8 0 0 0 7.8 20h8.4a3.8 3.8 0 0 0 3.8-3.8V7.8A3.8 3.8 0 0 0 16.2 4H7.8Zm8.95 1.65a1.35 1.35 0 1 1 0 2.7 1.35 1.35 0 0 1 0-2.7ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.social-link:hover,
.social-link:focus-visible {
  color: var(--gold);
  transform: translateY(-2px);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 720ms var(--ease),
    transform 720ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes shimmer {
  0% {
    transform: translateX(0) skewX(-20deg);
  }

  100% {
    transform: translateX(360%) skewX(-20deg);
  }
}

@keyframes cockpitShine {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(390%) skewX(-18deg);
  }
}

@keyframes barLift {
  0% {
    transform: scaleY(1);
  }

  46% {
    transform: scaleY(1.13);
  }

  100% {
    transform: scaleY(1.04);
  }
}

@media (min-width: 981px) {
  body {
    font-size: 17px;
  }

  .container {
    max-width: 1040px;
  }

  .topbar {
    padding: 16px 24px;
    font-size: 14px;
  }

  .hero {
    padding: 46px 0 54px;
  }

  .hero-inner {
    max-width: 1200px;
    grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.82fr);
    gap: clamp(34px, 5vw, 76px);
  }

  .logo-img {
    width: min(305px, 74%);
    margin-bottom: 26px;
  }

  .hero-eyebrow {
    margin-bottom: 20px;
    padding: 12px 18px;
    font-size: 18px;
  }

  .hero h1 {
    max-width: 720px;
    font-size: clamp(34px, 3.35vw, 46px);
    line-height: 1.12;
  }

  .hero .sub {
    max-width: 675px;
    margin-top: 20px;
    font-size: 16.5px;
    line-height: 1.55;
  }

  .cta {
    min-height: 64px;
    padding: 20px 58px;
    font-size: 18.5px;
  }

  .hero-bullets li {
    min-height: 60px;
    font-size: 15.5px;
  }

  .section {
    padding: 68px 0;
  }

  h2 {
    font-size: clamp(29px, 3.2vw, 40px);
  }

  h3 {
    font-size: 20px;
  }

  .sub {
    font-size: 16px;
  }

  .section-heading h2 {
    max-width: 860px;
  }

  .numbers-proof-card {
    min-height: 210px;
    padding: 30px 22px;
  }

  .metric-value {
    font-size: clamp(42px, 5.4vw, 64px);
  }

  .metric-value small {
    font-size: clamp(18px, 1.8vw, 25px);
  }

  .numbers-proof-card p,
  .testimonial-slide p,
  .journey-card p,
  .review p,
  .service-card p,
  .process-card p,
  .qcard li,
  .faq p,
  .ab-card p {
    font-size: 15px;
  }

  .testimonial-slide strong {
    font-size: 16px;
  }

  .pain-list li {
    font-size: 15.5px;
  }

  .diagnosis-head h2 {
    font-size: clamp(30px, 3.55vw, 42px);
  }

  .diagnosis-head p {
    font-size: 16.5px;
  }

  .diagnosis-card {
    min-height: 350px;
    padding: 38px 32px 34px;
  }

  .diagnosis-card h3 {
    font-size: clamp(22px, 2.15vw, 26px);
  }

  .diagnosis-card p {
    font-size: 15.5px;
    line-height: 1.54;
  }

  .method-display {
    width: min(100%, 620px);
  }

  .method-head h2 {
    max-width: 760px;
    font-size: clamp(15px, 1.55vw, 19px);
  }

  .method-steps {
    max-width: 1060px;
    gap: 20px;
  }

  .method-steps .journey-card {
    min-height: 230px;
    padding: 32px 32px 30px;
  }

  .method-steps h3 {
    font-size: clamp(22px, 2.1vw, 26px);
  }

  .method-steps .journey-card p {
    font-size: 15.5px;
    line-height: 1.55;
  }

  .method-proof {
    max-width: 800px;
    font-size: clamp(17px, 1.85vw, 20px);
  }

  .about-card {
    padding: 38px 40px;
  }

  .about-copy h2 {
    max-width: 540px;
    font-size: clamp(28px, 3.2vw, 38px);
  }

  .about-copy p,
  .about-points li {
    font-size: 15.5px;
    line-height: 1.55;
  }

  .faq summary {
    padding: 21px 24px;
    font-size: 17px;
  }

  .finalcta h2 {
    max-width: 880px;
    font-size: clamp(30px, 3.4vw, 44px);
  }
}

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

  .hero-copy,
  .hero .sub {
    text-align: center;
  }

  .logo-img,
  .hero h1,
  .hero .sub {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-items: center;
  }

  .hero-visual {
    min-height: auto;
  }

  .dashboard-cockpit {
    transform: none;
  }

  .hero-bullets,
  .reviews,
  .services-grid,
  .process-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dor-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .pain-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pain-list li,
  .pain-list li:nth-child(n) {
    grid-column: auto;
  }

  .method-head {
    gap: 18px;
    text-align: center;
  }

  .method-display {
    margin: 0 auto;
  }

  .method-head h2 {
    max-width: 650px;
    margin: 8px auto 0;
  }

  .method-steps {
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .about-card {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 720px;
    margin: 0 auto;
  }

  .about-copy h2 {
    max-width: 620px;
  }
}

@media (max-width: 640px) {
  .topbar {
    white-space: normal;
    padding: 8px 16px;
    font-size: 9.5px;
  }

  .hero {
    padding: 14px 0 22px;
  }

  .hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "eyebrow"
      "title"
      "sub"
      "visual"
      "actions"
      "bullets";
    gap: 9px;
  }

  .hero-copy {
    display: contents;
  }

  .logo-img {
    grid-area: logo;
  }

  .hero h1 {
    grid-area: title;
  }

  .hero-eyebrow {
    grid-area: eyebrow;
    justify-self: center;
  }

  .hero .sub {
    grid-area: sub;
  }

  .hero-visual {
    grid-area: visual;
    min-height: auto;
    margin-top: 0;
  }

  .hero-visual::before {
    inset: 0 12% 4%;
    filter: blur(12px);
    opacity: 0.42;
  }

  .hero-engine {
    width: min(100%, 320px);
    min-height: 170px;
    border-radius: 0;
    padding: 0;
    background: transparent;
    background-size: auto;
  }

  .hero-engine::before {
    inset: 6% 4% 0;
    filter: blur(10px);
  }

  .hero-engine-top {
    gap: 8px;
    padding-bottom: 8px;
  }

  .hero-engine-brand {
    gap: 7px;
  }

  .hero-engine-brand img {
    width: 78px;
  }

  .hero-system-pill {
    padding: 5px 7px;
    font-size: 6.8px;
    letter-spacing: 0.08em;
  }

  .hero-system-pill::before {
    width: 4px;
    height: 4px;
  }

  .hero-engine-top p {
    display: none;
  }

  .hero-route {
    min-height: 142px;
    margin-top: 8px;
  }

  .hero-route-line {
    top: 0;
    height: 132px;
  }

  .hero-route-steps {
    min-height: 132px;
  }

  .hero-route-step {
    width: 66px;
    transform: translate(-50%, -18px);
    animation: heroFloatStepMobile 4.8s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
  }

  .hero-route-node {
    width: 36px;
    height: 36px;
    margin-bottom: 5px;
    font-size: 9px;
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.34),
      0 0 0 5px rgba(241, 204, 131, 0.035);
  }

  .hero-route-node::after {
    inset: -4px;
  }

  .hero-route-step strong {
    font-size: 8.4px;
    line-height: 1.05;
  }

  .hero-route-step span,
  .hero-engine-bottom {
    display: none;
  }

  .hero-actions {
    grid-area: actions;
    justify-self: center;
    margin-top: 2px;
    position: relative;
    z-index: 2;
  }

  .hero-bullets {
    grid-area: bullets;
  }

  .logo-img {
    width: 152px;
    margin-bottom: 4px;
  }

  .hero-eyebrow {
    margin: 0 auto 2px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .hero h1 {
    font-size: 19.5px;
    line-height: 1.12;
  }

  .hero .sub,
  .sub {
    font-size: 12.2px;
    line-height: 1.36;
  }

  .hero-note {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-align: center;
  }

  @keyframes heroFloatStepMobile {
    0%, 100% {
      transform: translate(-50%, -18px) translateY(0);
    }
    50% {
      transform: translate(-50%, -18px) translateY(-8px);
    }
  }

  .hero-bullets,
  .nums,
  .numbers-proof-grid,
  .reviews,
  .services-grid,
  .process-grid,
  .qgrid,
  .ab-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-bullets li {
    font-size: 12.5px;
  }

  .numbers-proof-grid {
    gap: 12px;
    margin-top: 28px;
  }

  .numbers-proof-card {
    min-height: 146px;
    padding: 22px 18px;
  }

  .numbers-proof-card p {
    margin-top: 12px;
    font-size: 13px;
  }

  .testimonial-carousel {
    margin-top: 30px;
  }

  .carousel-head {
    gap: 16px;
    margin-bottom: 20px;
  }

  .carousel-head p {
    font-size: 13.5px;
  }

  .carousel-controls {
    align-self: center;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
  }

  .testimonial-track {
    grid-auto-columns: minmax(280px, 84vw);
    gap: 12px;
    margin-inline: -4px;
    padding-inline: 4px;
  }

  .testimonial-slide {
    min-height: 360px;
    padding: 22px;
  }

  .testimonial-slide p {
    font-size: 13.25px;
  }

  .diagnosis-section::before {
    inset: 0;
  }

  .diagnosis-section::after {
    width: 460px;
    height: 460px;
    right: -260px;
    top: -220px;
  }

  .diagnosis-head {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }

  .diagnosis-head h2 {
    font-size: 27px;
  }

  .diagnosis-head p {
    margin: 0 auto;
    font-size: 13.5px;
    line-height: 1.45;
  }

  .diagnosis-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 34px;
  }

  .diagnosis-card {
    min-height: auto;
    padding: 30px 22px 24px;
  }

  .diagnosis-card h3 {
    margin-top: 22px;
    font-size: 20px;
  }

  .diagnosis-card p {
    font-size: 14px;
  }

  .method-head {
    gap: 24px;
  }

  .method-display {
    width: min(100%, 520px);
    margin: 0 auto;
  }

  .method-head h2 {
    max-width: 620px;
    margin: 8px auto 0;
  }

  .method-steps {
    grid-template-columns: 1fr;
    margin-top: 42px;
  }

  .about-card {
    padding: 24px 20px;
  }

  .about-copy h2 {
    font-size: 22px;
  }

  .about-copy p,
  .about-points li {
    font-size: 13.5px;
  }

  .origin-badge {
    width: 100%;
    justify-content: center;
    font-size: 13.5px;
  }

  .cta {
    width: 100%;
    max-width: 304px;
    min-width: 0;
    min-height: 48px;
    padding: 14px 22px;
    font-size: 14px;
  }

  .dashboard-cockpit {
    width: min(100%, 232px);
    margin: 2px auto 0;
    border-radius: 13px;
    padding: 6px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 14px 40px rgba(0, 0, 0, 0.42),
      0 0 18px rgba(241, 204, 131, 0.07);
  }

  .cockpit-top {
    gap: 6px;
    padding-bottom: 5px;
  }

  .cockpit-top span,
  .cockpit-kpis span,
  .gauge span {
    font-size: 6.6px;
  }

  .cockpit-top strong {
    font-size: 6.8px;
    letter-spacing: 0.1em;
  }

  .cockpit-kpis,
  .cockpit-main {
    gap: 5px;
    margin-top: 5px;
  }

  .cockpit-kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  .cockpit-kpis div {
    border-radius: 8px;
    padding: 6px 5px;
  }

  .cockpit-kpis strong {
    font-size: 9.5px;
  }

  .cockpit-main {
    grid-template-columns: 1fr 52px;
  }

  .funnel-card {
    gap: 4px;
    border-radius: 8px;
    padding: 7px;
  }

  .funnel-row {
    min-height: 18px;
    border-radius: 6px;
    padding: 0 7px;
  }

  .funnel-row span {
    font-size: 7.3px;
  }

  .funnel-row strong {
    font-size: 7.3px;
  }

  .gauge-stack {
    gap: 5px;
  }

  .gauge {
    border-radius: 8px;
    padding: 6px 5px 11px;
  }

  .gauge::before {
    inset: auto 5px 5px;
    height: 2px;
  }

  .gauge strong {
    font-size: 8.5px;
  }

  .cockpit-chart {
    height: 36px;
    gap: 4px;
    border-radius: 8px;
    margin-top: 5px;
    padding: 6px;
  }

  .cockpit-chart span {
    min-height: 5px;
    border-radius: 4px 4px 2px 2px;
  }

  .section {
    padding: 48px 0;
  }

  .kicker {
    font-size: 10.5px;
    letter-spacing: 0.18em;
  }

  .pain-list li {
    font-size: 14px;
  }

  .pain-list {
    grid-template-columns: 1fr;
  }

  .pain-list li {
    min-height: auto;
    padding: 44px 18px 18px;
  }

  .num {
    padding: 12px 8px;
  }

  .num .big {
    font-size: 18px;
  }

  .num .lbl {
    margin-top: 5px;
    font-size: 10.5px;
  }

  .journey-card {
    grid-template-columns: 62px 1fr;
    gap: 14px;
    padding: 20px;
  }

  .method-section::after {
    width: 500px;
    height: 500px;
    left: -300px;
    top: -250px;
  }

  .method-display::before {
    inset: 8% 2% -4%;
  }

  .method-display::after {
    left: 50%;
    right: auto;
    bottom: -13px;
    width: min(250px, 58vw);
    height: 1px;
  }

  .method-display img {
    width: min(100%, 390px);
    margin-inline: auto;
  }

  .method-head h2 {
    max-width: 340px;
    margin: 8px auto 0;
    padding: 7px 10px;
    font-size: 12.5px;
    line-height: 1.25;
  }

  .method-steps .journey-card {
    min-height: auto;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    padding: 20px 18px 20px 18px;
  }

  .journey-num {
    width: 62px;
    height: 62px;
    font-size: 27px;
  }

  .method-steps .journey-num {
    width: 50px;
    height: 50px;
    font-size: 21px;
  }

  .method-steps .journey-card::after {
    right: 10px;
    font-size: 64px;
    opacity: 0.62;
  }

  .method-steps h3::before {
    margin-bottom: 6px;
    font-size: 8.5px;
    letter-spacing: 0.13em;
  }

  .method-steps h3 {
    font-size: 18px;
  }

  .method-steps .journey-card p {
    font-size: 13.5px;
  }

  .comparison-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }

  .comparison-row .criterion {
    grid-column: 1 / -1;
  }

  .faq summary {
    padding: 16px 18px;
    font-size: 14.5px;
  }

  .finalcta {
    min-height: 500px;
  }

  .finalcta .inner {
    padding: 54px 22px;
  }

  .finalcta h2 {
    font-size: 24px;
    line-height: 1.18;
  }

  .footer-grid {
    justify-items: center;
    text-align: center;
  }
}

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