@font-face {
  font-family: "Gainsborough Sans";
  src: url("assets/fonts/GainsboroughSans-Regular.ttf") format("truetype"),
       url("assets/fonts/GainsboroughSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0b0f12;
  --ink-soft: #12191e;
  --ink-panel: #10171b;
  --paper: #f7f8fa;
  --white: #ffffff;
  --mint: #17e3b0;
  --mint-soft: #e7fbf5;
  --mint-deep: #0bbf91;
  --blue: #1268ff;
  --cyan: #00d9ff;
  --text: #182127;
  --muted: #68737d;
  --line: #dce2e7;
  --line-dark: rgba(255,255,255,.12);
  --shadow: 0 18px 45px rgba(10, 21, 28, .08);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --container: 1760px;
  --transition: 180ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button { border: 0; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 999;
  padding: 10px 14px;
  background: var(--mint);
  color: var(--ink);
  border-radius: 8px;
  font-weight: 800;
  transition: top var(--transition);
}
.skip-link:focus { top: 16px; }

.container {
  width: min(calc(100% - clamp(32px, 4vw, 80px)), var(--container));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.nav-shell {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--white);
  flex: 0 0 auto;
}
.brand-mark { width: 50px; height: 36px; overflow: visible; }
.brand-mark path { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark-dark { stroke: #f6f8f9; }
.brand-mark-mint { stroke: var(--mint); filter: drop-shadow(0 0 9px rgba(23,227,176,.28)); }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-size: 18px; letter-spacing: -.04em; }
.brand-copy span { margin-top: 4px; color: var(--mint); font-size: 9px; letter-spacing: .34em; font-weight: 800; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  color: #d9e0e4;
  font-size: 14px;
  font-weight: 600;
}
.primary-nav a { position: relative; text-decoration: none; transition: color var(--transition); }
.primary-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -7px;
  height: 1px;
  background: var(--mint);
  transition: right var(--transition);
}
.primary-nav a:hover { color: var(--mint); }
.primary-nav a:hover::after { right: 0; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  color: var(--mint) !important;
  background: transparent;
  border: 1px solid rgba(23,227,176,.82);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(23,227,176,.02);
  transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.nav-cta:hover {
  color: #06110d !important;
  background: var(--mint);
  border-color: var(--mint);
  box-shadow: 0 10px 24px rgba(23,227,176,.18);
  transform: translateY(-1px);
}
.nav-cta span { transition: transform var(--transition); }
.nav-cta:hover span { transform: translateX(4px); }

.menu-toggle {
  display: none;
  width: 42px; height: 42px;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.menu-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 99px; transition: var(--transition); }

.section { padding: 116px 0; }
.section-dark { color: var(--white); background: var(--ink); }
.section-light { background: var(--white); }

.hero {
  min-height: 760px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 7% 43%, rgba(18, 56, 123, .10) 0%, rgba(6, 22, 51, .045) 31%, transparent 57%),
    radial-gradient(ellipse at 46% 50%, rgba(8, 25, 57, .025) 0%, transparent 45%),
    linear-gradient(90deg, #01030a 0%, #000207 36%, #000105 68%, #000 100%);
}

.hero-starfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .96;
  mix-blend-mode: screen;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .075;
  background-image:
    linear-gradient(rgba(127, 169, 222, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 169, 222, .026) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.58) 31%, rgba(0,0,0,.12) 58%, transparent 76%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.58) 31%, rgba(0,0,0,.12) 58%, transparent 76%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.42) 72%, rgba(0,0,0,.68) 100%),
    radial-gradient(ellipse at center, transparent 34%, rgba(0,0,0,.30) 100%);
}

.hero-grid {
  position: relative;
  z-index: 3;
  min-height: 760px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: 64px;
  padding-block: 72px 88px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 24px;
  color: #aeb9c0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.eyebrow.light { color: #75808a; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px rgba(23,227,176,.8); }

.hero h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(62px, 6.6vw, 106px);
  line-height: .91;
  letter-spacing: -.035em;
  font-weight: 760;
}
.hero h1 span { display: block; color: var(--mint); }
.hero-lead {
  max-width: 640px;
  margin: 30px 0 0;
  color: #fff;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.68;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border-radius: 11px;
  text-decoration: none;
  font-weight: 750;
  font-size: 14px;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition);
}
.button span { transition: transform var(--transition); }
.button:hover span { transform: translateX(4px); }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #07110e; background: var(--mint); box-shadow: 0 12px 30px rgba(23,227,176,.18); }
.button-primary:hover { color: #020403; background: #45edc3; box-shadow: 0 14px 36px rgba(23,227,176,.26); }
.button-ghost { color: var(--mint); border: 1px solid rgba(23,227,176,.78); background: #020504; }
.button-ghost:hover { color: #020403; border-color: var(--mint); background: var(--mint); box-shadow: 0 12px 28px rgba(23,227,176,.16); }
.button-outline-small { min-height: 42px; padding-inline: 15px; color: var(--blue); border: 1px solid rgba(18,104,255,.35); background: transparent; }
.button-outline-small:hover { background: rgba(18,104,255,.06); border-color: var(--blue); }
.button-mint-outline { color: var(--mint); border: 1px solid rgba(23,227,176,.75); background: rgba(23,227,176,.02); position: relative; z-index: 2; }
.button-mint-outline:hover { color: var(--ink); background: var(--mint); }

.hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 34px;
}
.hero-benefit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}
.hero-benefit-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--mint);
}
.hero-benefit-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-visual { position: relative; min-width: 0; }
.orb { position: absolute; border-radius: 50%; filter: blur(22px); pointer-events: none; }
.orb-one { width: 260px; height: 260px; right: -20px; top: -30px; background: rgba(18,104,255,.07); }
.orb-two { width: 190px; height: 190px; left: 8%; bottom: -40px; background: rgba(0,217,255,.045); }

.automation-window {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(21,31,37,.94), rgba(12,19,23,.98));
  box-shadow: 0 42px 120px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.03);
  overflow: hidden;
}
.automation-window::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 80% 18%, rgba(23,227,176,.065), transparent 24%);
}
.window-topbar {
  height: 54px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-dark);
  color: #7f8c94;
  font-size: 11px;
}
.window-dots { display: flex; gap: 7px; }
.window-dots span { width: 8px; height: 8px; border-radius: 50%; background: #26343c; }
.window-status { display: flex; align-items: center; gap: 7px; }
.window-status span, .live-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px rgba(23,227,176,.85); }
.flow-heading {
  padding: 28px 30px 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.mini-label { display: block; margin-bottom: 8px; color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .19em; }
.flow-heading h2 { max-width: 500px; margin: 0; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.08; letter-spacing: -.04em; }
.live-pill { height: 30px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid rgba(23,227,176,.18); border-radius: 999px; color: var(--mint); font-size: 10px; font-weight: 800; }

.hero-flow {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 38px 1fr 38px 1fr 38px 1fr;
  align-items: center;
  padding: 24px 30px 34px;
}
.flow-node {
  min-height: 152px;
  padding: 18px 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
.flow-node:hover { border-color: rgba(23,227,176,.48); transform: translateY(-3px); background: rgba(23,227,176,.03); }
.active-node { border-color: rgba(23,227,176,.35); box-shadow: inset 0 0 34px rgba(23,227,176,.035); animation: nodePulse 3.2s ease-in-out infinite; }
.node-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; }
.node-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.icon-blue { color: #7ca9ff; background: rgba(18,104,255,.13); border: 1px solid rgba(18,104,255,.18); }
.icon-mint { color: var(--mint); background: rgba(23,227,176,.09); border: 1px solid rgba(23,227,176,.16); }
.node-number { position: absolute; top: 11px; right: 12px; color: #536169; font-size: 9px; font-weight: 800; }
.flow-node strong { margin-top: 13px; font-size: 14px; }
.flow-node small { margin-top: 3px; color: #75838c; font-size: 10px; }
.flow-line { height: 1px; background: rgba(255,255,255,.13); position: relative; overflow: visible; }
.flow-line::after { content: "›"; position: absolute; right: -2px; top: 50%; transform: translateY(-54%); color: #65747d; font-size: 18px; }
.flow-line span { position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(23,227,176,.95); animation: flowDot 2.4s linear infinite; }
.flow-line:nth-of-type(2) span { animation-delay: .45s; }
.flow-line:nth-of-type(3) span { animation-delay: .9s; }

.flow-result {
  position: relative;
  z-index: 1;
  margin: 0 30px 30px;
  min-height: 70px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid rgba(23,227,176,.14);
  border-radius: 13px;
  background: rgba(23,227,176,.04);
}
.result-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; color: var(--ink); background: var(--mint); font-weight: 900; }
.flow-result strong, .flow-result span { display: block; }
.flow-result strong { font-size: 12px; }
.flow-result span { color: #6f7f87; font-size: 10px; }
.flow-result .result-time { color: var(--mint); font-size: 11px; font-weight: 800; }


.hero-integration-path {
  fill: none;
  stroke: rgba(255,255,255,.82);
  stroke-width: 3.0;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 160ms ease, filter 160ms ease, opacity 160ms ease;
}
.hero-integration-path.flash-line {
  animation: heroPathFlash 700ms cubic-bezier(.18,.82,.28,1);
}
.hero-integrations-panel {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 292px;
  z-index: 2;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border: 1.6px solid rgba(255,255,255,.72);
  border-radius: 18px;
  background: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.hero-integrations-panel.glow-hit {
  animation: heroPanelFlash 1180ms cubic-bezier(.18,.82,.28,1);
}
.hero-integrations-panel.glow-hit .integration-port {
  animation: heroPortFlash 1180ms cubic-bezier(.18,.82,.28,1);
}
.integration-port {
  position: absolute;
  top: -6px;
  width: 11px;
  height: 11px;
  border: 2.6px solid #fff;
  border-radius: 50%;
  background: #071015;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16);
}
.integration-port-left { left: 32%; transform: translateX(-50%); }
.integration-port-right { left: 68%; transform: translateX(-50%); }
.integration-apps {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  align-items: center;
  gap: 14px;
}
.integration-app {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,.86);
}
.integration-app.logo-hit .integration-logo {
  animation: heroIntegrationLogoFlash 1120ms cubic-bezier(.22,.72,.28,1);
}
.integration-app.logo-hit span {
  animation: heroIntegrationTextFlash 1120ms cubic-bezier(.22,.72,.28,1);
}
.integration-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.integration-logo img {
  width: 29px;
  height: 29px;
  object-fit: contain;
  display: block;
}
.integration-app:first-child .integration-logo img { width: 25px; height: 25px; }
.integration-app span {
  min-width: 0;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.integration-logo-chocomenta svg {
  width: 34px;
  height: 34px;
  overflow: visible;
}
.integration-logo-chocomenta path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.integration-logo-chocomenta path:first-child { stroke: #fff; }
.integration-logo-chocomenta path:last-child { stroke: var(--mint); }

.statement-strip {
  padding: 54px 0;
  color: var(--white);
  background: #0d1418;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.statement-grid {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 2.28fr);
  align-items: stretch;
  gap: 46px;
}
.statement-title {
  display: flex;
  align-items: center;
  padding-right: 42px;
  border-right: 1px solid var(--line-dark);
}
.statement-title h2 {
  max-width: 390px;
  margin: 0;
  font-size: clamp(34px, 3.2vw, 54px);
  line-height: .98;
  letter-spacing: -.055em;
}
.statement-title h2 span {
  display: block;
  margin-top: 8px;
  color: var(--mint);
}
.statement-capabilities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
.statement-capability {
  min-width: 0;
  min-height: 220px;
  padding: 10px 26px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  border-right: 1px solid var(--line-dark);
}
.statement-capability:first-child { padding-left: 10px; }
.statement-capability:last-child { padding-right: 10px; border-right: 0; }
.statement-capability-icon {
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  color: var(--mint);
}
.statement-capability:nth-child(2) .statement-capability-icon,
.statement-capability:nth-child(4) .statement-capability-icon {
  color: var(--blue);
}
.statement-capability-icon svg {
  width: 58px;
  height: 58px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.statement-capability h3 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: -.015em;
}
.statement-capability p {
  max-width: 220px;
  margin: 10px auto 0;
  color: #7f8c94;
  font-size: 13.5px;
  line-height: 1.55;
}

.section-heading { margin-bottom: 54px; }
.split-heading { display: grid; grid-template-columns: 1.15fr .62fr; gap: 80px; align-items: end; }
.section-heading h2, .examples-intro h2, .process-title h2, .contact-intro h2 {
  margin: 0;
  font-size: clamp(48px, 5vw, 76px);
  line-height: .97;
  letter-spacing: -.062em;
}
.section-heading h2 span, .process-title h2 span, .contact-intro h2 span { color: var(--mint-deep); }
.automation-heading span { display: block; }
.split-heading > p { max-width: 480px; margin: 0 0 6px; color: var(--muted); font-size: 17px; line-height: 1.7; }

.usecase-grid { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
.usecase-card {
  min-height: 360px;
  padding: 30px 25px 26px;
  position: relative;
  border-right: 1px solid var(--line);
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.usecase-card:last-child { border-right: 0; }
.usecase-card:hover { z-index: 2; background: #fbfffd; box-shadow: 0 20px 40px rgba(8,32,24,.08); transform: translateY(-5px); }
.usecase-card::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.usecase-card:hover::after { transform: scaleX(1); }
.usecase-icon { width: 64px; height: 64px; display: grid; place-items: center; color: #0b0f12; background: var(--mint-soft); border-radius: 16px; }
.usecase-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.usecase-card h3 { margin: 38px 0 13px; font-size: 20px; line-height: 1.15; letter-spacing: -.03em; }
.usecase-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.capabilities { background: #fbfcfd; }
.capabilities-grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: 70px; align-items: start; }
.capabilities-title h2 { margin: 0; font-size: clamp(48px, 5.2vw, 78px); line-height: .95; letter-spacing: -.065em; }
.capabilities-title h2 span { color: var(--mint-deep); }
.capabilities-list { display: grid; grid-template-columns: repeat(4,1fr); border-left: 1px solid var(--line); }
.capability { min-height: 255px; padding: 10px 24px 18px; border-right: 1px solid var(--line); }
.capability-icon { width: 46px; height: 46px; display: grid; place-items: center; color: var(--mint-deep); }
.capability-icon svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.capability h3 { margin: 42px 0 12px; font-size: 18px; line-height: 1.2; letter-spacing: -.02em; }
.capability p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.examples-section { background: #f3f5f7; }
.examples-layout { display: grid; grid-template-columns: .58fr 1.42fr; gap: 78px; align-items: start; }
.examples-intro { position: sticky; top: 130px; }
.examples-intro h2 { max-width: 510px; }
.examples-intro .button { margin-top: 32px; }
.examples-stack { display: grid; gap: 18px; }
.pipeline-card {
  padding: 28px 30px 27px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(12,28,38,.035);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.pipeline-card:hover { transform: translateY(-3px); border-color: rgba(23,227,176,.75); box-shadow: var(--shadow); }
.pipeline-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pipeline-title h3 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
.pipeline-title h3 span { color: var(--mint-deep); }
.card-arrow { font-size: 24px; color: var(--blue); transition: transform var(--transition); }
.pipeline-card:hover .card-arrow { transform: translateX(5px); }
.pipeline { margin-top: 28px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 15px; }
.pipeline-step { min-width: 0; text-align: center; }
.pipeline-step > span { display: block; margin-top: 9px; color: #6c7881; font-size: 10px; font-weight: 700; white-space: nowrap; }
.pipeline-arrow { color: #a5afb6; font-size: 17px; }
.app-chip { width: 56px; height: 56px; margin-inline: auto; position: relative; display: grid; place-items: center; border: 1px solid #e1e7eb; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(15,31,40,.055); overflow: hidden; }
.app-chip svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-chat { color: var(--blue); background: #f7faff; }
.ai-chip { color: #8f56f7; background: #faf7ff; }
.calendar-chip { color: #0b5; background: var(--mint-soft); }
.email-chip { color: var(--blue); background: #f7faff; }
.folder-chip { color: #ffb11a; background: #fffaf0; }

.hubspot-logo { background: #fff8f4; }
.hub-center { width: 13px; height: 13px; border-radius: 50%; border: 4px solid #ff6b35; position: absolute; left: 22px; top: 20px; }
.hub-arm { position: absolute; height: 4px; background: #ff6b35; border-radius: 99px; transform-origin: left center; }
.hub-arm::after { content: ""; width: 7px; height: 7px; position: absolute; right: -4px; top: -1.5px; border-radius: 50%; background: #ff6b35; }
.hub-arm.one { width: 17px; left: 10px; top: 18px; transform: rotate(-38deg); }
.hub-arm.two { width: 16px; left: 31px; top: 24px; transform: rotate(0deg); }
.hub-arm.three { width: 15px; left: 23px; top: 33px; transform: rotate(90deg); }

.gmail-logo { background: #fff; }
.gmail-m { width: 32px; height: 23px; position: relative; border-left: 5px solid #4285f4; border-right: 5px solid #34a853; border-bottom: 5px solid #34a853; border-radius: 3px; }
.gmail-m::before, .gmail-m::after { content: ""; position: absolute; top: 2px; width: 22px; height: 5px; background: #ea4335; }
.gmail-m::before { left: -2px; transform: rotate(35deg); transform-origin: left center; }
.gmail-m::after { right: -2px; transform: rotate(-35deg); transform-origin: right center; }

.slack-logo { background: #fff; grid-template-columns: repeat(2,9px); grid-template-rows: repeat(2,9px); gap: 3px; }
.slack-logo i { width: 9px; height: 20px; border-radius: 99px; display: block; }
.slack-logo i:nth-child(1) { background: #36c5f0; transform: translate(-1px, 4px); }
.slack-logo i:nth-child(2) { background: #2eb67d; transform: rotate(90deg) translate(4px,1px); }
.slack-logo i:nth-child(3) { background: #e01e5a; transform: rotate(90deg) translate(-4px,-1px); }
.slack-logo i:nth-child(4) { background: #ecb22e; transform: translate(1px,-4px); }

.drive-logo { background: #fff; }
.drive-logo i { position: absolute; width: 10px; height: 34px; transform-origin: center; border-radius: 2px; }
.drive-a { background: #0f9d58; transform: rotate(30deg) translate(-6px, 1px); }
.drive-b { background: #f4b400; transform: rotate(-30deg) translate(6px, 1px); }
.drive-c { background: #4285f4; width: 28px !important; height: 10px !important; bottom: 12px; }

.docs-logo, .sheets-logo { background: #fff; }
.docs-logo i, .sheets-logo i { width: 27px; height: 35px; border-radius: 3px; position: relative; }
.docs-logo i { background: #4285f4; }
.sheets-logo i { background: #0f9d58; }
.docs-logo i::before, .sheets-logo i::before { content: ""; position: absolute; left: 6px; right: 6px; top: 12px; height: 2px; background: rgba(255,255,255,.9); box-shadow: 0 6px 0 rgba(255,255,255,.9), 0 12px 0 rgba(255,255,255,.9); }
.sheets-logo i::after { content: ""; position: absolute; left: 6px; top: 8px; width: 15px; height: 19px; border: 1px solid rgba(255,255,255,.85); }

.process-section { background: #fff; }
.process-layout { display: grid; grid-template-columns: .58fr 1.42fr; gap: 82px; align-items: start; }
.process-title h2 { max-width: 480px; }
.process-steps { display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr 42px 1fr; align-items: start; }
.process-step { min-height: 285px; position: relative; padding: 4px 5px 28px; }
.process-icon { width: 58px; height: 58px; display: grid; place-items: center; color: var(--mint-deep); border: 1px solid rgba(11,191,145,.28); border-radius: 50%; background: #fafffd; }
.process-icon svg { width: 26px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.process-step h3 { margin: 28px 0 10px; font-size: 19px; }
.process-step p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.process-number { position: absolute; left: 5px; bottom: 0; color: #cbd2d7; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.process-connector { margin-top: 29px; height: 1px; border-top: 1px dashed #ccd5da; position: relative; }
.process-connector span { position: absolute; right: -2px; top: -13px; width: 22px; height: 22px; display: grid; place-items: center; color: #98a4ab; background: #fff; font-size: 13px; }

.cta-island-wrap { padding: 0 0 116px; background: #fff; }
.cta-island {
  min-height: 242px;
  padding: 52px 58px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
  overflow: hidden;
  color: #fff;
  border-radius: 20px;
  background:
    radial-gradient(circle at 42% 40%, rgba(23,227,176,.10), transparent 30%),
    linear-gradient(125deg, #0b1214, #0a1514 70%, #08110f);
  box-shadow: 0 32px 70px rgba(10,24,20,.12);
}
.cta-bracket { color: var(--mint); font-size: 72px; line-height: 1; font-weight: 200; position: relative; z-index: 2; }
.cta-copy { position: relative; z-index: 2; }
.cta-copy p { margin: 0 0 8px; color: var(--mint); font-size: 16px; font-weight: 650; }
.cta-copy h2 { margin: 0; font-size: clamp(38px, 4.3vw, 66px); line-height: .98; letter-spacing: -.055em; }
.dot-pattern { position: absolute; width: 190px; height: 190px; right: -20px; top: -5px; opacity: .22; background-image: radial-gradient(var(--mint) 1.2px, transparent 1.2px); background-size: 13px 13px; mask-image: radial-gradient(circle, #000, transparent 68%); }

.contact-section { background: #f3f5f7; }
.contact-layout { display: grid; grid-template-columns: .68fr 1.32fr; gap: 82px; align-items: start; }
.contact-intro { position: relative; min-height: 450px; }
.contact-intro h2 { max-width: 560px; }
.contact-intro > p:last-of-type { max-width: 480px; margin: 25px 0 0; color: var(--muted); font-size: 17px; line-height: 1.72; }
.contact-dots { position: absolute; left: -14px; bottom: 0; width: 150px; height: 100px; opacity: .25; background-image: radial-gradient(#7d8a93 1px, transparent 1px); background-size: 13px 13px; mask-image: linear-gradient(to top right, #000, transparent 80%); }

.contact-form { padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 20px 50px rgba(13,30,40,.055); }
.form-row { display: grid; gap: 16px; }
.three-columns { grid-template-columns: repeat(3,1fr); }
.form-message-row { grid-template-columns: 1fr 220px; align-items: end; margin-top: 20px; }
.contact-form label > span { display: block; margin-bottom: 8px; color: #27333a; font-size: 11px; font-weight: 800; }
.contact-form input, .contact-form textarea {
  width: 100%;
  border: 1px solid #d8dfe4;
  border-radius: 10px;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form input { height: 51px; padding: 0 14px; }
.contact-form textarea { min-height: 145px; padding: 14px; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #a1abb2; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,104,255,.08); }
.contact-form .field-error { border-color: #e34d59; box-shadow: 0 0 0 3px rgba(227,77,89,.08); }
.form-actions { display: flex; flex-direction: column; align-items: stretch; gap: 13px; padding-bottom: 1px; }
.form-submit { width: 100%; }
.form-submit[disabled] { opacity: .7; cursor: wait; }
.secure-copy { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; color: #87929a; font-size: 10px; }
.secure-copy svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.form-feedback { min-height: 22px; margin-top: 16px; font-size: 12px; font-weight: 700; }
.form-feedback.success { color: #098765; }
.form-feedback.error { color: #cc3643; }

.site-footer { padding: 68px 0 24px; color: #c9d2d8; background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.2fr .6fr .6fr; gap: 60px; }
.footer-brand { margin-bottom: 20px; }
.footer-grid > div:first-child > p { max-width: 390px; margin: 0; color: #73818a; font-size: 14px; line-height: 1.7; }
.footer-links { display: grid; align-content: start; gap: 12px; }
.footer-links a, .footer-contact a { text-decoration: none; font-size: 13px; }
.footer-links a:hover, .footer-contact a:hover { color: var(--mint); }
.footer-contact { display: grid; align-content: start; gap: 14px; justify-items: start; }
.footer-contact span { color: #708089; font-size: 12px; }
.footer-contact a { color: var(--mint); font-weight: 750; }
.footer-bottom { margin-top: 52px; padding-top: 20px; display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid rgba(255,255,255,.08); color: #53616a; font-size: 11px; }

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

@keyframes flowDot {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  86% { opacity: 1; }
  100% { left: calc(100% - 4px); opacity: 0; }
}
@keyframes nodePulse {
  0%,100% { box-shadow: inset 0 0 34px rgba(23,227,176,.02), 0 0 0 rgba(23,227,176,0); }
  50% { box-shadow: inset 0 0 34px rgba(23,227,176,.05), 0 0 24px rgba(23,227,176,.05); }
}



/* Hero visual — flujo horizontal con conectores alternados arriba/abajo */
.hero-visual {
  position: relative;
  min-width: 0;
  align-self: center;
  margin-top: 30px;
}
.automation-flow-scroll {
  position: relative;
  width: 100%;
  overflow: visible;
}
.automation-flow-stage {
  position: relative;
  width: 100%;
  min-width: 860px;
  height: 460px;
}
.hero-auto-connectors {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hero-auto-path {
  fill: none;
  stroke: rgba(255,255,255,.82);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 160ms ease, filter 160ms ease, opacity 160ms ease;
}
.hero-auto-path.flash-line {
  animation: heroPathFlash 700ms cubic-bezier(.18,.82,.28,1);
}
.hero-auto-signal {
  pointer-events: none;
}
.hero-auto-signal-halo {
  fill: rgba(23,227,176,.14);
  filter: blur(1.8px) drop-shadow(0 0 10px rgba(23,227,176,.46)) drop-shadow(0 0 22px rgba(23,227,176,.28));
  opacity: .95;
  animation: heroSignalHaloPulse 1.8s ease-in-out infinite;
}
.hero-auto-signal-ring {
  fill: rgba(23,227,176,.34);
  stroke: rgba(220,255,247,.72);
  stroke-width: .8;
  filter: drop-shadow(0 0 8px rgba(23,227,176,.85)) drop-shadow(0 0 16px rgba(23,227,176,.56));
  animation: heroSignalRingPulse 1.8s ease-in-out infinite;
}
.hero-auto-dot {
  fill: #ffffff;
  stroke: rgba(226,255,247,.96);
  stroke-width: .8;
  filter: drop-shadow(0 0 6px rgba(23,227,176,.98)) drop-shadow(0 0 14px rgba(23,227,176,.92)) drop-shadow(0 0 28px rgba(23,227,176,.58));
}
.hero-auto-grid {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  gap: 18px;
  align-items: start;
  padding: 82px 2px 0;
}
.hero-auto-node {
  position: relative;
  min-height: 150px;
  padding: 22px 13px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.6px solid rgba(255,255,255,.72);
  border-radius: 18px;
  background: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease, background 190ms ease;
}
.hero-auto-node::after {
  content: attr(data-step);
  position: absolute;
  top: 10px;
  right: 12px;
  color: rgba(255,255,255,.52);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.hero-auto-node:hover {
  transform: translateY(-3px);
  border-color: rgba(23,227,176,.58);
  background: rgba(23,227,176,.02);
}
.node-port {
  position: absolute;
  left: 50%;
  z-index: 4;
  width: 10px;
  height: 10px;
  border: 2.6px solid #fff;
  border-radius: 50%;
  background: #071015;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.16);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
/* 1→2 arriba */
.hero-auto-node:nth-child(1) .node-port-out { top: -6px; }
.hero-auto-node:nth-child(2) .node-port-in { top: -6px; }
/* 2→3 abajo */
.hero-auto-node:nth-child(2) .node-port-out { bottom: -6px; }
.hero-auto-node:nth-child(3) .node-port-in { bottom: -6px; }
/* 3→4 arriba */
.hero-auto-node:nth-child(3) .node-port-out { top: -6px; }
.hero-auto-node:nth-child(4) .node-port-in { top: -6px; }
/* 4→5 abajo */
.hero-auto-node:nth-child(4) .node-port-out { bottom: -6px; }
.hero-auto-node:nth-child(5) .node-port-in { bottom: -6px; }
/* 5→6 arriba */
.hero-auto-node:nth-child(5) .node-port-out { top: -6px; }
.hero-auto-node:nth-child(6) .node-port-in { top: -6px; }
.hero-auto-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border: 1.5px solid rgba(255,255,255,.34);
  border-radius: 15px;
  color: rgba(255,255,255,.96);
  background: rgba(255,255,255,.025);
  transition: color 190ms ease, background 190ms ease, border-color 190ms ease, box-shadow 190ms ease, transform 190ms ease;
}
.hero-auto-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-auto-node strong {
  color: rgba(255,255,255,.97);
  font-size: 13px;
  line-height: 1.28;
  text-wrap: balance;
}
.hero-auto-node.is-current {
  border-color: rgba(23,227,176,.82);
  background: rgba(23,227,176,.04);
  box-shadow: 0 0 0 1px rgba(23,227,176,.18), 0 0 14px rgba(23,227,176,.18), inset 0 0 14px rgba(23,227,176,.06);
}
.hero-auto-node.is-current .hero-auto-icon {
  color: #effff8;
  border-color: rgba(23,227,176,.62);
  background: rgba(23,227,176,.10);
  box-shadow: 0 0 12px rgba(23,227,176,.18), inset 0 0 12px rgba(23,227,176,.14);
  transform: scale(1.03);
}
.hero-auto-node.is-current strong {
  color: #f5fffb;
  text-shadow: 0 0 8px rgba(23,227,176,.18);
}
.hero-auto-node.flash-hit {
  animation: heroArrivalFlash 900ms cubic-bezier(.18,.82,.28,1);
}
.hero-auto-node.flash-hit .hero-auto-icon {
  animation: heroIconFlash 900ms cubic-bezier(.18,.82,.28,1);
}
.hero-auto-node.flash-hit strong {
  animation: heroTextFlash 900ms cubic-bezier(.18,.82,.28,1);
}
.hero-auto-node.flash-hit .node-port {
  animation: heroPortFlash 900ms cubic-bezier(.18,.82,.28,1);
}
.hero-auto-node.is-current .node-port,
.hero-auto-node.is-complete .node-port {
  border-color: var(--mint);
  background: var(--mint);
  box-shadow: 0 0 14px rgba(23,227,176,.92), 0 0 28px rgba(23,227,176,.42);
}
.hero-auto-node.is-complete {
  border-color: rgba(23,227,176,.30);
  box-shadow: inset 0 0 14px rgba(23,227,176,.025);
}
.hero-auto-node.is-complete .hero-auto-icon {
  color: rgba(23,227,176,.9);
  border-color: rgba(23,227,176,.24);
  background: rgba(23,227,176,.04);
}


/* Ideas en acción: versión segura y validada */
.pipeline-card {
  padding: 31px 33px 30px;
}
.pipeline-title h3 {
  font-size: 24px;
  line-height: 1.2;
}
.pipeline-copy {
  margin: 16px 0 0;
  color: #64717a;
  font-size: 16px;
  line-height: 1.68;
}
.pipeline {
  margin-top: 32px;
  gap: 14px;
}
.pipeline-step {
  cursor: default;
}
.pipeline-step > span {
  margin-top: 12px;
  font-size: 12px;
  transition: color 240ms ease, transform 240ms ease;
}
.app-chip {
  width: 68px;
  height: 68px;
  border-radius: 17px;
  transition: transform 300ms cubic-bezier(.2,.8,.2,1), border-color 300ms ease, box-shadow 300ms ease, background 300ms ease;
}
.app-chip svg {
  width: 31px;
  transition: transform 300ms cubic-bezier(.2,.8,.2,1), filter 300ms ease;
}
.pipeline-step:hover .app-chip {
  transform: translateY(-5px) scale(1.055);
  border-color: rgba(23,227,176,.58);
  box-shadow: 0 15px 32px rgba(11,191,145,.16), 0 0 0 4px rgba(23,227,176,.06);
  background: #fbfffd;
}
.pipeline-step:hover .app-chip svg {
  transform: scale(1.08);
  filter: drop-shadow(0 5px 8px rgba(12,31,39,.12));
}
.pipeline-step:hover > span {
  color: #18242b;
  transform: translateY(1px);
}
.followup-chip { color: #067a62; background: #f2fffb; }
.trend-chip { color: #1268ff; background: #f4f8ff; }
.insight-chip { color: #0b8f70; background: #f2fffb; }
.script-chip { color: #8a4df2; background: #faf7ff; }
.delivery-chip { color: #d78a00; background: #fffaf0; }
.qualify-chip { color: #1268ff; background: #f4f8ff; }
.offer-chip { color: #8a4df2; background: #faf7ff; }
@media (max-width: 620px) {
  .pipeline-card { padding: 24px 19px; }
  .pipeline-title h3 { font-size: 22px; }
  .pipeline-copy { font-size: 15px; }
  .app-chip { width: 62px; height: 62px; }
  .app-chip svg { width: 28px; }
  .pipeline-step > span { font-size: 11.5px; }
}

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; padding-top: 90px; }
  .hero-copy { max-width: 850px; }
  .hero h1 { max-width: 900px; }
  .hero-visual { max-width: 1000px; width: 100%; margin: 24px auto 0; }
  .statement-grid { grid-template-columns: 1fr; gap: 32px; }
  .statement-title { padding: 0 0 28px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .statement-title h2 { max-width: none; }
  .statement-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statement-capability { min-height: 230px; padding: 26px 24px; border-bottom: 1px solid var(--line-dark); }
  .statement-capability:nth-child(2n) { border-right: 0; }
  .statement-capability:nth-child(-n+2) { padding-top: 8px; }
  .statement-capability:nth-child(odd) { padding-left: 0; }
  .statement-capability:nth-child(even) { padding-right: 0; }
  .statement-capability:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 8px; }
  .usecase-grid { grid-template-columns: repeat(2,1fr); }
  .usecase-card { border-bottom: 1px solid var(--line); }
  .usecase-card:nth-child(2n) { border-right: 0; }
  .usecase-card:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .capabilities-grid, .examples-layout, .process-layout, .contact-layout { grid-template-columns: 1fr; gap: 54px; }
  .capabilities-list { margin-top: 0; }
  .examples-intro { position: static; }
  .process-title h2, .contact-intro h2 { max-width: 800px; }
  .contact-intro { min-height: auto; }
  .contact-dots { display: none; }
}

@media (max-width: 860px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  .section { padding: 88px 0; }
  .menu-toggle { display: flex; }
  .primary-nav {
    position: fixed;
    inset: 78px 0 auto 0;
    padding: 26px 24px 34px;
    display: grid;
    gap: 18px;
    background: rgba(11,15,18,.98);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform 240ms ease, opacity 240ms ease, visibility 240ms ease;
  }
  .primary-nav.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .primary-nav a { font-size: 17px; }
  .nav-cta { justify-content: center; margin-top: 5px; }
  .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity: 0; }
  .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero, .hero-grid { min-height: auto; }
  .hero-grid { padding-block: 78px 72px; }
  .hero h1 { font-size: clamp(54px, 12vw, 78px); }
  .automation-flow-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 8px; }
  .automation-flow-stage { min-width: 820px; height: 450px; }

  .split-heading { grid-template-columns: 1fr; gap: 22px; }
  .capabilities-list { grid-template-columns: repeat(2,1fr); }
  .capability:nth-child(2) { border-right: 0; }
  .capability:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .process-steps { grid-template-columns: 1fr 35px 1fr; row-gap: 24px; }
  .process-step { min-height: 240px; }
  .process-connector:nth-of-type(2) { display: none; }
  .process-step:nth-of-type(3) { grid-column: 1; grid-row: 2; }
  .process-step:nth-of-type(4) { grid-column: 3; grid-row: 2; }
  .process-connector:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .cta-island { grid-template-columns: auto 1fr; }
  .cta-island .button { grid-column: 2; justify-self: start; }
  .three-columns { grid-template-columns: 1fr; }
  .form-message-row { grid-template-columns: 1fr; }
  .form-actions { max-width: 340px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-contact { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .statement-capabilities { grid-template-columns: 1fr; }
  .statement-capability,
  .statement-capability:nth-child(odd),
  .statement-capability:nth-child(even),
  .statement-capability:nth-last-child(-n+2) {
    min-height: auto;
    padding: 30px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .statement-capability:last-child { border-bottom: 0; }
  .statement-capability-icon { width: 74px; height: 74px; margin-bottom: 18px; }
  .statement-capability-icon svg { width: 54px; height: 54px; }


  .hero-integrations-panel { top: 282px; left: 5%; right: 5%; min-height: 82px; padding: 9px 16px; }
  .integration-apps { gap: 10px; }
  .integration-app { gap: 8px; }
  .integration-logo { width: 40px; height: 40px; }
  .integration-app span { font-size: 10px; }

  .container { width: min(calc(100% - 24px), var(--container)); }
  .nav-shell { min-height: 70px; }
  .primary-nav { inset-block-start: 70px; }
  .brand-mark { width: 43px; }
  .brand-copy strong { font-size: 16px; }
  .hero-grid { padding-top: 65px; }
  .hero h1 { font-size: clamp(47px, 14vw, 64px); }
  .hero-lead { font-size: 16px; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .hero-benefits { display: grid; gap: 14px; }
  .hero-benefit { white-space: normal; font-size: 12px; }
  .automation-flow-stage { min-width: 820px; height: 438px; }
  .hero-auto-grid { gap: 16px; padding-top: 76px; }
  .hero-auto-node { min-height: 138px; padding-inline: 10px; }
  .hero-auto-node strong { font-size: 12px; }
  .statement-strip { padding: 44px 0; }
  .statement-capabilities { grid-template-columns: 1fr; }
  .statement-capability,
  .statement-capability:first-child,
  .statement-capability:last-child,
  .statement-capability:nth-child(odd),
  .statement-capability:nth-child(even),
  .statement-capability:nth-last-child(-n+2) {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .statement-capability:first-child { padding-top: 0; }
  .statement-capability:last-child { padding-bottom: 0; border-bottom: 0; }
  .section-heading h2, .examples-intro h2, .process-title h2, .contact-intro h2 { font-size: clamp(42px, 13vw, 58px); }
  .usecase-grid { grid-template-columns: 1fr; }
  .usecase-card, .usecase-card:nth-child(2n), .usecase-card:last-child { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .usecase-card:last-child { border-bottom: 0; }
  .capabilities-list { grid-template-columns: 1fr; border-left: 0; }
  .capability, .capability:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); padding-inline: 0; }
  .capability:last-child { border-bottom: 0; }
  .pipeline-card { padding: 23px 18px; overflow: hidden; }
  .pipeline { grid-template-columns: repeat(7, minmax(84px, auto)); overflow-x: auto; padding-bottom: 10px; }
  .pipeline-step > span { white-space: normal; }
  .pipeline-arrow { text-align: center; }
  .process-steps { grid-template-columns: 1fr; }
  .process-step, .process-step:nth-of-type(3), .process-step:nth-of-type(4) { grid-column: auto; grid-row: auto; min-height: auto; padding-bottom: 44px; }
  .process-connector, .process-connector:nth-of-type(3) { display: block; grid-column: auto; grid-row: auto; width: 1px; height: 38px; margin: -20px 0 10px 29px; border-top: 0; border-left: 1px dashed #ccd5da; }
  .process-connector span { left: -11px; top: 8px; transform: rotate(90deg); }
  .cta-island { padding: 38px 25px; grid-template-columns: 1fr; gap: 20px; }
  .cta-bracket { display: none; }
  .cta-island .button { grid-column: auto; justify-self: stretch; }
  .cta-copy p { font-size: 13px; }
  .contact-form { padding: 22px 18px; }
  .form-actions { max-width: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-contact { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: 7px; }
}

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

@keyframes heroArrivalFlash {
  0% {
    border-color: rgba(23,227,176,.82);
    background: rgba(23,227,176,.06);
    box-shadow: 0 0 0 1px rgba(23,227,176,.18), 0 0 18px rgba(23,227,176,.22), inset 0 0 18px rgba(23,227,176,.08);
  }
  26% {
    border-color: rgba(23,227,176,1);
    background: rgba(23,227,176,.12);
    box-shadow: 0 0 0 1px rgba(23,227,176,.34), 0 0 34px rgba(23,227,176,.52), 0 0 76px rgba(23,227,176,.34), inset 0 0 34px rgba(23,227,176,.20);
  }
  62% {
    border-color: rgba(23,227,176,.88);
    background: rgba(23,227,176,.07);
    box-shadow: 0 0 0 1px rgba(23,227,176,.22), 0 0 18px rgba(23,227,176,.22), inset 0 0 16px rgba(23,227,176,.08);
  }
  100% {
    border-color: rgba(23,227,176,.82);
    background: rgba(23,227,176,.04);
    box-shadow: 0 0 0 1px rgba(23,227,176,.18), 0 0 14px rgba(23,227,176,.18), inset 0 0 14px rgba(23,227,176,.06);
  }
}
@keyframes heroIconFlash {
  0% {
    box-shadow: 0 0 12px rgba(23,227,176,.18), inset 0 0 12px rgba(23,227,176,.14);
    transform: scale(1.03);
    background: rgba(23,227,176,.10);
  }
  28% {
    box-shadow: 0 0 24px rgba(23,227,176,.46), 0 0 48px rgba(23,227,176,.24), inset 0 0 18px rgba(23,227,176,.24);
    transform: scale(1.08);
    background: rgba(23,227,176,.20);
  }
  100% {
    box-shadow: 0 0 12px rgba(23,227,176,.18), inset 0 0 12px rgba(23,227,176,.14);
    transform: scale(1.03);
    background: rgba(23,227,176,.10);
  }
}
@keyframes heroTextFlash {
  0% { text-shadow: 0 0 8px rgba(23,227,176,.18); }
  28% { text-shadow: 0 0 18px rgba(23,227,176,.52); }
  100% { text-shadow: 0 0 8px rgba(23,227,176,.18); }
}
@keyframes heroPortFlash {
  0% { box-shadow: 0 0 14px rgba(23,227,176,.92), 0 0 28px rgba(23,227,176,.42); }
  28% { box-shadow: 0 0 18px rgba(23,227,176,1), 0 0 36px rgba(23,227,176,.58), 0 0 56px rgba(23,227,176,.28); }
  100% { box-shadow: 0 0 14px rgba(23,227,176,.92), 0 0 28px rgba(23,227,176,.42); }
}

@keyframes heroPathFlash {
  0% { stroke: rgba(255,255,255,.82); filter: none; opacity: 1; }
  20% { stroke: rgba(225,255,246,1); filter: drop-shadow(0 0 8px rgba(23,227,176,.95)) drop-shadow(0 0 18px rgba(23,227,176,.55)); opacity: 1; }
  55% { stroke: rgba(23,227,176,.98); filter: drop-shadow(0 0 10px rgba(23,227,176,.95)) drop-shadow(0 0 24px rgba(23,227,176,.58)); opacity: 1; }
  100% { stroke: rgba(255,255,255,.82); filter: none; opacity: 1; }
}

@keyframes heroPanelFlash {
  0% { border-color: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); background: transparent; }
  24% { border-color: rgba(23,227,176,.92); box-shadow: 0 0 0 1px rgba(23,227,176,.16), 0 0 26px rgba(23,227,176,.22), inset 0 0 18px rgba(23,227,176,.08); background: rgba(23,227,176,.04); }
  62% { border-color: rgba(23,227,176,.82); box-shadow: 0 0 0 1px rgba(23,227,176,.13), 0 0 22px rgba(23,227,176,.18), inset 0 0 15px rgba(23,227,176,.065); background: rgba(23,227,176,.032); }
  100% { border-color: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); background: transparent; }
}
@keyframes heroIntegrationLogoFlash {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: none;
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.035);
  }
  26% {
    transform: translateY(-2px) scale(1.035);
    box-shadow: 0 0 14px rgba(23,227,176,.13), 0 0 26px rgba(23,227,176,.07);
    border-color: rgba(23,227,176,.34);
    background: rgba(23,227,176,.055);
  }
  64% {
    transform: translateY(-1px) scale(1.022);
    box-shadow: 0 0 10px rgba(23,227,176,.10), 0 0 20px rgba(23,227,176,.05);
    border-color: rgba(23,227,176,.28);
    background: rgba(23,227,176,.045);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: none;
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.035);
  }
}

@keyframes heroIntegrationTextFlash {
  0% { color: rgba(255,255,255,.86); text-shadow: none; }
  26% { color: rgba(239,255,249,.98); text-shadow: 0 0 9px rgba(23,227,176,.18); }
  64% { color: rgba(239,255,249,.94); text-shadow: 0 0 6px rgba(23,227,176,.12); }
  100% { color: rgba(255,255,255,.86); text-shadow: none; }
}

@keyframes heroSignalHaloPulse {
  0%, 100% { opacity: .72; r: 10.5px; }
  50% { opacity: .98; r: 12px; }
}
@keyframes heroSignalRingPulse {
  0%, 100% { opacity: .78; r: 6.1px; }
  50% { opacity: 1; r: 6.8px; }
}




.robot-custom-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.statement-capability-icon-robot .robot-custom-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto;
}
.capability-icon-robot .robot-custom-icon {
  width: 27px;
  height: 27px;
  margin: 0 auto;
}


/* Final CTA + contacto fusionados */
.pipeline-title .card-arrow { display: none !important; }

.automation-contact-wrap {
  padding: 100px 0;
  background: #fff;
}
.automation-contact {
  min-height: 520px;
  padding: 58px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(380px, .95fr);
  align-items: center;
  gap: 52px;
  overflow: hidden;
  color: #fff;
  border-radius: 22px;
  background:
    radial-gradient(circle at 31% 31%, rgba(23,227,176,.12), transparent 32%),
    radial-gradient(circle at 92% 88%, rgba(42,112,255,.10), transparent 30%),
    linear-gradient(125deg, #0b1214, #0a1514 70%, #08110f);
  box-shadow: 0 32px 70px rgba(10,24,20,.14);
}
.automation-contact-copy,
.automation-contact-form {
  position: relative;
  z-index: 2;
}
.automation-contact-eyebrow {
  color: rgba(255,255,255,.76);
}

.automation-contact-copy .eyebrow.automation-contact-eyebrow {
  margin-bottom: 8px;
}
.automation-contact-question {
  max-width: 600px;
  margin: 10px 0 13px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.5;
  font-weight: 800;
  position: relative;
  top: -6px;
}
.automation-contact-copy h2 {
  max-width: 610px;
  margin: 0;
  font-size: clamp(46px, 5vw, 72px);
  line-height: .96;
  letter-spacing: -.06em;
}
.automation-contact-copy h2 span {
  display: block;
  color: var(--mint);
}
.automation-contact-copy h3 {
  max-width: 560px;
  margin: 28px 0 0;
  color: #fff;
  font-size: clamp(23px, 2.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.automation-contact-description {
  max-width: 535px;
  margin: 18px 0 0;
  color: rgba(226,238,235,.70);
  font-size: 19px;
  line-height: 1.6;
}
.automation-contact-form {
  padding: 31px;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 28px 60px rgba(0,0,0,.20);
}
.automation-contact-form .form-message-row {
  grid-template-columns: minmax(0, 1fr) 200px;
}
.automation-contact-dots {
  width: 240px;
  height: 240px;
  right: -28px;
  top: -12px;
  opacity: .16;
}

@media (max-width: 1100px) {
  .automation-contact {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 52px;
  }
  .automation-contact-copy h2,
  .automation-contact-copy h3,
  .automation-contact-description {
    max-width: 760px;
  }
}

@media (max-width: 720px) {
  .automation-contact-wrap { padding-bottom: 76px; }
  .automation-contact {
    min-height: 0;
    padding: 34px 22px 24px;
    border-radius: 18px;
    gap: 30px;
  }
  .automation-contact-copy h2 {
    font-size: clamp(39px, 12vw, 54px);
  }
  .automation-contact-copy h3 {
    margin-top: 22px;
    font-size: 24px;
  }
  .automation-contact-description { font-size: 15px; }
  .automation-contact-form { padding: 22px 17px; }
  .automation-contact-form .three-columns,
  .automation-contact-form .form-message-row {
    grid-template-columns: 1fr;
  }
  .automation-contact-form .form-message-row { align-items: stretch; }
  .automation-contact-form .form-actions { display: grid; gap: 12px; }
  .automation-contact-form .form-submit { width: 100%; justify-content: center; }
}


/* Experimental curved section transitions */
.curved-section {
  position: relative;
  z-index: 2;
  isolation: isolate;
}
.curved-section::before {
  content: "";
  position: absolute;
  left: -8%;
  top: -52px;
  width: 116%;
  height: 54px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--curve-background, #fff);
}
.curved-section > .container {
  position: relative;
  z-index: 1;
}
.curve-white { --curve-background: #fff; }
.curve-gray { --curve-background: #f3f5f7; }

@media (max-width: 820px) {
  .curved-section::before {
    left: -14%;
    top: -34px;
    width: 128%;
    height: 36px;
  }
}


/* Final typography and responsive header refinements */
.section-heading .eyebrow,
.examples-intro .eyebrow,
.process-title .eyebrow,
.automation-contact-copy .eyebrow {
  font-size: 15px;
  letter-spacing: .185em;
  margin-bottom: 27px;
}

.hero h1 {
  letter-spacing: -.018em;
}
.statement-title h2 {
  letter-spacing: -.036em;
}
.section-heading h2,
.examples-intro h2,
.process-title h2,
.contact-intro h2,
.automation-contact-copy h2 {
  letter-spacing: -.036em;
}

/* Move to the compact navigation before links begin to collide. */
@media (max-width: 1180px) {
  .nav-shell {
    gap: 18px;
  }
  .menu-toggle {
    display: flex;
    flex: 0 0 auto;
  }
  .primary-nav {
    position: fixed;
    inset: 78px 0 auto 0;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    padding: 28px clamp(24px, 5vw, 64px) 36px;
    display: grid;
    align-items: stretch;
    gap: 18px;
    color: #d9e0e4;
    background: rgba(5,8,10,.985);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 24px 50px rgba(0,0,0,.28);
    transform: translateY(-125%);
    opacity: 0;
    visibility: hidden;
    transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease, visibility 220ms ease;
  }
  .primary-nav.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .primary-nav a {
    width: 100%;
    padding-block: 5px;
    font-size: 17px;
  }
  .nav-cta {
    justify-content: center;
    margin-top: 5px;
    padding-block: 13px !important;
  }
  .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity: 0; }
  .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 620px) {
  .section-heading .eyebrow,
  .examples-intro .eyebrow,
  .process-title .eyebrow,
  .automation-contact-copy .eyebrow {
    font-size: 13px;
    letter-spacing: .16em;
    margin-bottom: 22px;
  }
  .primary-nav {
    inset-block-start: 70px;
    max-height: calc(100vh - 70px);
  }
}

/* Laptop-safe hero flow: keep all six nodes visible without clipping */
.automation-flow-stage {
  min-width: 0;
  max-width: 100%;
}
.hero-auto-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Standard laptops: preserve the two-column hero but compress the visual cleanly. */
@media (min-width: 1181px) and (max-width: 1500px) {
  .hero-grid {
    grid-template-columns: minmax(410px, .78fr) minmax(0, 1.22fr);
    gap: clamp(28px, 3vw, 46px);
  }
  .hero h1 {
    font-size: clamp(58px, 5.8vw, 88px);
  }
  .hero-visual {
    width: 100%;
    max-width: none;
    margin-top: 22px;
  }
  .automation-flow-stage {
    width: 100%;
    height: 420px;
  }
  .hero-auto-grid {
    gap: clamp(7px, .8vw, 13px);
    padding: 72px 0 0;
  }
  .hero-auto-node {
    min-width: 0;
    min-height: 134px;
    padding: 18px 7px 15px;
    border-radius: 15px;
  }
  .hero-auto-node::after {
    top: 8px;
    right: 9px;
    font-size: 8px;
  }
  .hero-auto-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 11px;
    border-radius: 13px;
  }
  .hero-auto-icon svg {
    width: 22px;
    height: 22px;
  }
  .hero-auto-node strong {
    font-size: clamp(9.5px, .86vw, 12px);
    line-height: 1.22;
  }
  .hero-integrations-panel {
    left: 0;
    right: 0;
    top: 267px;
    min-height: 80px;
    padding: 8px 10px;
  }
  .integration-apps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
  .integration-app {
    gap: 6px;
  }
  .integration-logo {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  .integration-logo img {
    width: 24px;
    height: 24px;
  }
  .integration-app span {
    font-size: 9px;
  }
}

/* Compact navigation before laptop headers collide. */
@media (max-width: 1400px) {
  .nav-shell { gap: 18px; }
  .menu-toggle {
    display: flex;
    flex: 0 0 auto;
  }
  .primary-nav {
    position: fixed;
    inset: 78px 0 auto 0;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    padding: 28px clamp(24px, 5vw, 64px) 36px;
    display: grid;
    align-items: stretch;
    gap: 18px;
    color: #d9e0e4;
    background: rgba(5,8,10,.985);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 24px 50px rgba(0,0,0,.28);
    transform: translateY(-125%);
    opacity: 0;
    visibility: hidden;
    transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease, visibility 220ms ease;
  }
  .primary-nav.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .primary-nav a {
    width: 100%;
    padding-block: 5px;
    font-size: 17px;
  }
  .nav-cta {
    justify-content: center;
    margin-top: 5px;
    padding-block: 13px !important;
  }
  .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity: 0; }
  .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Once the hero becomes one column, let the illustration use every available pixel. */
@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .hero-copy,
  .hero-visual {
    width: 100%;
    max-width: none;
  }
  .hero-visual {
    margin-top: 4px;
  }
  .automation-flow-scroll {
    width: 100%;
    overflow: visible;
    padding-bottom: 0;
  }
  .automation-flow-stage {
    width: 100%;
    min-width: 0;
    height: 420px;
  }
  .hero-auto-grid {
    gap: clamp(8px, 1.3vw, 16px);
    padding: 70px 0 0;
  }
  .hero-auto-node {
    min-width: 0;
    min-height: 134px;
    padding: 17px 7px 14px;
  }
  .hero-auto-icon {
    width: 47px;
    height: 47px;
    margin-bottom: 11px;
  }
  .hero-auto-node strong {
    font-size: clamp(10px, 1.35vw, 13px);
  }
  .hero-integrations-panel {
    left: 0;
    right: 0;
    top: 265px;
    min-height: 80px;
  }
  .integration-apps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }
}

/* Smaller laptops/tablets: reduce details instead of introducing horizontal clipping. */
@media (max-width: 860px) {
  .automation-flow-scroll {
    overflow-x: visible;
    padding-bottom: 0;
  }
  .automation-flow-stage {
    min-width: 0;
    height: 390px;
  }
  .hero-auto-grid {
    gap: 6px;
    padding-top: 62px;
  }
  .hero-auto-node {
    min-height: 122px;
    padding: 15px 5px 12px;
    border-radius: 14px;
  }
  .hero-auto-node::after {
    top: 7px;
    right: 7px;
    font-size: 7px;
  }
  .hero-auto-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 9px;
    border-radius: 12px;
  }
  .hero-auto-icon svg {
    width: 20px;
    height: 20px;
  }
  .hero-auto-node strong {
    font-size: clamp(8.5px, 1.45vw, 11px);
    line-height: 1.18;
  }
  .hero-integrations-panel {
    left: 0;
    right: 0;
    top: 242px;
    min-height: 72px;
    padding: 7px 8px;
  }
  .integration-apps { gap: 4px; }
  .integration-app { gap: 5px; }
  .integration-logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .integration-logo img {
    width: 22px;
    height: 22px;
  }
  .integration-app span {
    font-size: 8.5px;
  }
}

/* Very small phones may scroll the illustration; laptops and tablets never need to. */
@media (max-width: 540px) {
  .automation-flow-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 8px;
  }
  .automation-flow-stage {
    min-width: 700px;
    height: 390px;
  }
}

/* HERO RESPONSIVE STACK — FINAL
   Large monitors: copy and illustration side by side.
   Laptops/tablets: copy above, full-size illustration below. */

/* Restore the approved full-size flow geometry. */
.automation-flow-stage {
  width: 100%;
  min-width: 860px;
  max-width: none;
  height: 460px;
}
.hero-auto-grid {
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  gap: 18px;
  padding: 82px 2px 0;
}
.hero-auto-node {
  min-height: 150px;
  padding: 22px 13px 18px;
  border-radius: 18px;
}
.hero-auto-node::after {
  top: 10px;
  right: 12px;
  font-size: 9px;
}
.hero-auto-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 15px;
  border-radius: 15px;
}
.hero-auto-icon svg {
  width: 26px;
  height: 26px;
}
.hero-auto-node strong {
  font-size: 13px;
  line-height: 1.28;
}
.hero-integrations-panel {
  left: 7%;
  right: 7%;
  top: 292px;
  min-height: 88px;
  padding: 11px 24px;
}
.integration-apps {
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 14px;
}
.integration-app { gap: 10px; }
.integration-logo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
.integration-logo img {
  width: 29px;
  height: 29px;
}
.integration-app span { font-size: 11px; }

/* A two-column layout is reserved for monitors with enough real width. */
@media (min-width: 1651px) {
  .hero-grid {
    grid-template-columns: minmax(560px, .86fr) minmax(860px, 1.14fr);
    gap: clamp(48px, 4vw, 76px);
  }
  .hero-visual {
    width: 100%;
    max-width: none;
    margin-top: 30px;
  }
  .automation-flow-scroll {
    overflow: visible;
    padding-bottom: 0;
  }
}

/* Laptops and tablets: preserve the original node size by stacking the hero. */
@media (max-width: 1650px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 38px;
    min-height: auto;
    padding-top: 82px;
    padding-bottom: 82px;
  }
  .hero-copy {
    width: 100%;
    max-width: 980px;
  }
  .hero h1 {
    max-width: 980px;
    font-size: clamp(62px, 7.2vw, 98px);
  }
  .hero-lead { max-width: 760px; }
  .hero-visual {
    width: min(100%, 1120px);
    max-width: 1120px;
    margin: 2px auto 0;
  }
  .automation-flow-scroll {
    width: 100%;
    overflow: visible;
    padding-bottom: 0;
  }
}

/* Narrow tablets and phones keep the full illustration and may pan horizontally. */
@media (max-width: 900px) {
  .hero-grid {
    gap: 26px;
    padding-top: 68px;
    padding-bottom: 66px;
  }
  .hero-visual { margin-top: 0; }
  .automation-flow-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 10px;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
  }
  .automation-flow-stage {
    min-width: 860px;
    height: 460px;
  }
}

@media (max-width: 620px) {
  .hero-grid {
    padding-top: 58px;
    padding-bottom: 58px;
  }
  .hero h1 { font-size: clamp(47px, 14vw, 64px); }
}


/* Horizontal overflow guard — the page itself must never pan sideways. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body,
.site-header,
main,
section,
.site-footer {
  max-width: 100%;
}

.hero-grid > *,
.hero-visual,
.automation-flow-scroll {
  min-width: 0;
  max-width: 100%;
}

/* Curves are decorative and must not expand the document width. */
.curved-section::before {
  left: 0;
  width: 100%;
  transform: scaleX(1.16);
  transform-origin: center bottom;
}

/* On narrow screens, horizontal movement is isolated inside the illustration. */
@media (max-width: 900px) {
  .automation-flow-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .automation-flow-stage {
    flex: 0 0 860px;
  }
}


/* Center the textual hero content when the layout stacks on laptops/tablets. */
@media (max-width: 1650px) {
  .hero-copy {
    margin-inline: auto;
    text-align: center;
  }
  .hero-copy .eyebrow {
    justify-content: center;
  }
  .hero h1,
  .hero-lead {
    margin-inline: auto;
  }
  .hero-actions,
  .hero-benefits {
    justify-content: center;
  }
}

@media (max-width: 620px) {
  .hero-actions {
    width: min(100%, 420px);
    margin-inline: auto;
  }
  .hero-benefits {
    width: min(100%, 430px);
    margin-inline: auto;
    text-align: left;
  }
}

/* ==========================================================
   CHOCOMENTA LABS — NEO BRUTALISM EDITION
   Visual override. Structure, interactions and responsive
   behavior remain inherited from the production build.
   ========================================================== */
:root {
  --ink: #0a0a0a;
  --ink-soft: #151515;
  --ink-panel: #111111;
  --paper: #f4f0e8;
  --white: #fffdf7;
  --mint: #35f2b5;
  --mint-soft: #caffea;
  --mint-deep: #00a878;
  --blue: #2457ff;
  --cyan: #00e5ff;
  --yellow: #ffe54c;
  --pink: #ff5ca8;
  --orange: #ff7448;
  --text: #0a0a0a;
  --muted: #3f3f3f;
  --line: #0a0a0a;
  --line-dark: rgba(255,255,255,.35);
  --shadow: 8px 8px 0 #0a0a0a;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --transition: 140ms cubic-bezier(.2,.8,.2,1);
}

body {
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
}

::selection { color: #000; background: var(--yellow); }

.site-header {
  background: var(--mint);
  border-bottom: 4px solid var(--ink);
}
.nav-shell { min-height: 82px; }
.brand { color: var(--ink); }
.brand-mark-dark { stroke: var(--ink); }
.brand-mark-mint { stroke: var(--blue); filter: none; }
.brand-copy strong { font-size: 19px; font-weight: 950; text-transform: uppercase; }
.brand-copy span { color: var(--blue); font-weight: 950; }
.primary-nav { color: var(--ink); font-weight: 900; text-transform: uppercase; letter-spacing: .035em; }
.primary-nav a:not(.nav-cta)::after { height: 4px; bottom: -9px; background: var(--blue); }
.primary-nav a:hover { color: var(--blue); }
.nav-cta {
  color: #fff !important;
  background: var(--blue);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 10px 16px;
}
.nav-cta:hover {
  color: var(--ink) !important;
  background: var(--yellow);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(3px,3px);
}
.menu-toggle { border: 3px solid var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
.menu-toggle span { background: var(--ink); border-radius: 0; }

.hero {
  min-height: 760px;
  color: var(--ink);
  background: var(--blue);
  border-bottom: 5px solid var(--ink);
}
.hero-starfield { opacity: .14; mix-blend-mode: normal; }
.hero::before {
  opacity: 1;
  background-image:
    linear-gradient(rgba(0,0,0,.11) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0,0,0,.11) 2px, transparent 2px);
  background-size: 42px 42px;
  -webkit-mask-image: none;
  mask-image: none;
}
.hero::after {
  background:
    radial-gradient(circle at 86% 20%, var(--pink) 0 5.5%, transparent 5.7%),
    radial-gradient(circle at 74% 78%, var(--yellow) 0 7%, transparent 7.2%),
    linear-gradient(135deg, transparent 0 48%, rgba(0,0,0,.08) 48% 50%, transparent 50% 100%);
}
.hero-grid { z-index: 4; }
.eyebrow {
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 950;
}
.eyebrow.light { color: var(--ink); }
.eyebrow-dot { border-radius: 0; background: var(--pink); box-shadow: none; transform: rotate(45deg); }
.hero h1 {
  max-width: 750px;
  font-family: Arial Black, Arial, Helvetica, sans-serif;
  font-weight: 950;
  line-height: .88;
  letter-spacing: -.065em;
  text-transform: uppercase;
  text-shadow: 5px 5px 0 rgba(255,255,255,.18);
}
.hero h1 span {
  display: inline;
  color: var(--mint);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 5px 5px 0 var(--ink);
}
.hero-lead {
  color: var(--ink);
  font-weight: 750;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  padding: 18px 20px;
  line-height: 1.55;
}
.button {
  border-radius: 0;
  border: 3px solid var(--ink);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: 6px 6px 0 var(--ink);
}
.button:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--ink); }
.button-primary { color: var(--ink); background: var(--mint); box-shadow: 6px 6px 0 var(--ink); }
.button-primary:hover { color: var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.button-ghost { color: var(--ink); border-color: var(--ink); background: var(--white); }
.button-ghost:hover { background: var(--pink); }
.hero-benefit {
  color: var(--ink);
  font-weight: 900;
  background: var(--white);
  border: 2px solid var(--ink);
  padding: 8px 10px;
  box-shadow: 3px 3px 0 var(--ink);
}
.hero-benefit-icon { color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 0; }

.automation-flow-stage {
  background: var(--mint);
  border: 4px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}
.hero-auto-node {
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink);
}
.hero-auto-node:nth-child(2n) { background: var(--yellow); }
.hero-auto-node:nth-child(3n) { background: #ffb6da; }
.hero-auto-node::before { color: var(--ink); font-weight: 950; }
.hero-auto-icon { color: var(--ink); background: var(--cyan); border: 3px solid var(--ink); border-radius: 0; }
.node-port, .integration-port { background: var(--pink); border: 2px solid var(--ink); box-shadow: none; }
.hero-auto-path, .hero-integration-path { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 8 7; }
.hero-auto-signal-halo { fill: var(--yellow); opacity: .65; }
.hero-auto-signal-ring { fill: var(--white); stroke: var(--ink); }
.hero-auto-dot { fill: var(--pink); }
.hero-integrations-panel {
  background: var(--blue);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink);
}
.integration-app { color: var(--white); font-weight: 900; }
.integration-logo { background: var(--white); border: 2px solid var(--ink); border-radius: 0; box-shadow: 3px 3px 0 var(--ink); }
.integration-logo-chocomenta { color: var(--ink); background: var(--mint); }

.statement-strip {
  color: var(--ink);
  background: var(--yellow);
  border-bottom: 5px solid var(--ink);
}
.statement-title h2,
.section-heading h2,
.examples-intro h2,
.process-title h2,
.automation-contact-copy h2 {
  font-family: Arial Black, Arial, Helvetica, sans-serif;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: -.045em;
}
.statement-title h2 span,
.section-heading h2 span,
.automation-contact-copy h2 span {
  color: #25d366;
  text-shadow: 5px 5px 0 var(--ink);
}

.sticker-highlight {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: var(--ink) !important;
  text-shadow: none !important;
  transform: rotate(-2deg);
}

.sticker-highlight::before {
  content: '';
  position: absolute;
  inset: -9px -12px;
  background: var(--yellow);
  border: 3px solid var(--ink);
  z-index: -1;
  box-shadow: 4px 4px 0 rgba(10,10,10,.3);
}
.process-title h2 { text-shadow: 5px 5px 0 var(--ink); }
.process-title h2 span { color: var(--pink); }
.statement-capability {
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 18px;
}
.statement-capability-icon { color: var(--ink); background: var(--mint); border: 3px solid var(--ink); border-radius: 0; }
.statement-capability h3 { font-weight: 950; text-transform: uppercase; }
.statement-capability p { color: var(--ink); }

.section-light, .process-section { background: var(--paper); }
.curved-section::before { display: none; }
.section { border-bottom: 5px solid var(--ink); }
.split-heading > p, .examples-intro > p, .process-title > p { color: var(--ink); font-weight: 650; }
.usecase-grid { gap: 22px; }
.usecase-card {
  background: var(--white);
  border: 3px solid var(--ink) !important;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 30px;
}
.usecase-card:nth-child(2n) { background: var(--mint-soft); }
.usecase-card:nth-child(3n) { background: #fff3a6; }
.usecase-card:hover { background: var(--pink); box-shadow: 3px 3px 0 var(--ink); transform: translate(5px,5px); }
.usecase-card::after { display: none; }
.usecase-icon { color: var(--ink); background: var(--cyan); border: 3px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--ink); }
.usecase-card h3 { font-weight: 950; text-transform: uppercase; }
.usecase-card p { color: var(--ink); }

.examples-section { background: var(--mint); }
.pipeline-card {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--ink);
}
.pipeline-card:nth-child(2) { background: #fff4a8; }
.pipeline-card:nth-child(3) { background: #ffc7e3; }
.pipeline-card:hover { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: translate(5px,5px); }
.pipeline-title, .pipeline-card h3 { font-weight: 950; text-transform: uppercase; }
.pipeline-card p, .pipeline-copy p { color: var(--ink); }
.pipeline-step, .ai-chip, .app-chip, .calendar-chip, .delivery-chip, .followup-chip, .insight-chip, .offer-chip, .qualify-chip, .script-chip, .trend-chip {
  color: var(--ink) !important;
  background: var(--white) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 900;
}
.pipeline-arrow { color: var(--ink); }

.process-section { background: var(--blue); color: var(--white); padding: 40px 0; position: relative; overflow: hidden; }

.process-corner-deco {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(120px, 13vw, 220px);
  z-index: 0;
  pointer-events: none;
}

.process-corner-deco svg {
  display: block;
  width: 100%;
  height: auto;
}
.process-title > p { color: var(--white); }
.process-step {
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  padding: 24px 18px 28px;
}
.process-step:nth-of-type(2n) { background: var(--yellow); }
.process-step h3 { font-weight: 950; text-transform: uppercase; }
.process-step p { color: var(--ink); }
.process-icon { color: var(--ink); }
.process-connector { color: var(--yellow); }

.automation-contact-wrap {
  background-color: var(--ink);
  background-image: radial-gradient(circle, rgba(255,255,255,.35) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
  border-bottom: 5px solid var(--ink);
}
.automation-contact {
  color: var(--ink);
  background: var(--pink);
  border: 4px solid var(--ink);
  border-radius: 0;
  box-shadow: 12px 12px 0 var(--ink);
}
.automation-contact-description { color: var(--ink); font-weight: 800; }
.contact-form, .automation-contact-form {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--ink);
}
.contact-form label > span { color: var(--ink); font-weight: 950; text-transform: uppercase; }
.contact-form input, .contact-form textarea {
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 0;
  font-weight: 650;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); box-shadow: 5px 5px 0 var(--blue); }
.form-submit { background: var(--mint); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.form-submit:hover { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); transform: translate(3px,3px); }
.automation-contact-dots span { background: var(--ink); border-radius: 0; }

.site-footer {
  color: var(--white);
  background: var(--ink);
  border-top: 0;
}
.site-footer a:hover { color: var(--yellow); }
.footer-brand .brand-copy span { color: var(--mint); }
.footer-bottom { border-top: 2px solid var(--white); }

@media (max-width: 1100px) {
  .primary-nav {
    color: var(--ink);
    background: var(--mint);
    border-left: 4px solid var(--ink);
    box-shadow: -8px 0 0 rgba(0,0,0,.18);
  }
  .primary-nav a { border-bottom: 2px solid var(--ink); }
}

@media (max-width: 900px) {
  .automation-flow-stage { box-shadow: 7px 7px 0 var(--ink); }
  .process-step { min-height: auto; }
}

@media (max-width: 620px) {
  .hero h1 { font-size: clamp(44px, 14vw, 68px); text-shadow: 3px 3px 0 rgba(255,255,255,.18); }
  .hero h1 span { -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
  .hero-lead, .usecase-card, .pipeline-card, .contact-form, .automation-contact-form { box-shadow: 5px 5px 0 var(--ink); }
  .eyebrow { box-shadow: 3px 3px 0 var(--ink); }
}

/* =========================================================
   HERO REFINEMENT — NEO BRUTALISM ROUND 2
   ========================================================= */
.site-header {
  color: var(--white);
  background: #000;
  border-bottom: 4px solid var(--ink);
}
.site-header .primary-nav { color: var(--white); }
.site-header .primary-nav a:not(.nav-cta):hover { color: var(--cyan); }
.site-header .brand-copy strong { color: var(--white); }
.site-header .nav-cta {
  color: var(--white) !important;
  background: var(--blue);
  border-color: var(--white);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--white);
}
.site-header .nav-cta:hover {
  color: var(--ink) !important;
  background: var(--cyan);
  border-color: var(--white);
  box-shadow: 2px 2px 0 var(--white);
}

.hero {
  color: var(--ink);
  background: var(--white);
}
.hero-starfield { opacity: .035; }
.hero::before {
  opacity: .42;
  background-image:
    linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 42px 42px;
}
.hero::after {
  background:
    radial-gradient(circle at 88% 15%, rgba(255,80,168,.8) 0 4.7%, transparent 4.9%),
    radial-gradient(circle at 78% 82%, rgba(255,229,76,.8) 0 6.4%, transparent 6.6%),
    linear-gradient(135deg, transparent 0 48%, rgba(0,0,0,.035) 48% 50%, transparent 50% 100%);
}
.hero h1 {
  font-family: "An Awesome Font", Impact, "Arial Black", Arial, sans-serif;
  color: var(--ink);
  text-shadow: 5px 5px 0 rgba(18,104,255,.15);
}
.hero h1 span {
  color: var(--blue);
  -webkit-text-stroke: 0;
  text-shadow: 4px 4px 0 var(--mint);
}
.hero-lead {
  max-width: 660px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-weight: 680;
}
.hero-actions .button {
  border-radius: 999px;
  min-height: 54px;
  padding-inline: 24px;
}
.hero-actions .button-primary {
  color: var(--white);
  background: var(--blue);
}
.hero-actions .button-primary:hover {
  color: var(--ink);
  background: var(--cyan);
}
.hero-actions .button-ghost {
  color: var(--ink);
  background: var(--white);
}
.hero-actions .button-ghost:hover { background: var(--yellow); }
.button-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-services {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  align-items: center;
  gap: 18px 28px;
  margin-top: 38px;
}
.hero-service-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .015em;
}
.hero-service-item svg {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-service-item:first-child svg { fill: var(--blue); stroke: var(--blue); }

@media (max-width: 1100px) {
  .site-header .primary-nav {
    color: var(--ink);
    background: var(--mint);
  }
  .site-header .primary-nav a:not(.nav-cta) { color: var(--ink); }
  .site-header .nav-cta {
    color: var(--white) !important;
    border-color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
  }
}
@media (max-width: 720px) {
  .hero-services {
    grid-template-columns: repeat(2, max-content);
    gap: 17px 24px;
  }
}
@media (max-width: 460px) {
  .hero-services {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { width: 100%; }
}

/* Local display font supplied by Chocomenta Labs */
.hero h1 {
  font-family: "Gainsborough Sans", Georgia, serif;
  font-weight: 400;
  letter-spacing: -.012em;
}


/* =========================================================
   HERO REFINEMENT — NEO BRUTALISM ROUND 4
   ========================================================= */
.site-header .primary-nav a,
.site-header .nav-cta,
.hero-actions .button {
  text-transform: none;
}

.site-header .nav-cta {
  color: var(--white) !important;
  background: var(--blue);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--blue);
}
.site-header .nav-cta:hover {
  color: var(--white) !important;
  background: var(--blue);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--blue);
  transform: translate(3px, 3px);
}

.hero h1 span {
  color: var(--mint);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.hero-actions .button {
  border-radius: 10px;
}
.hero-actions .button-ghost {
  gap: 10px;
}
.hero-actions .button-ghost .button-icon {
  order: 2;
}

.hero-service-item {
  text-transform: none;
}
.hero-service-item:nth-child(1),
.hero-service-item:nth-child(1) svg {
  color: var(--blue);
  stroke: var(--blue);
}
.hero-service-item:nth-child(1) svg {
  fill: var(--blue);
}
.hero-service-item:nth-child(2),
.hero-service-item:nth-child(2) svg {
  color: #8b5cf6;
  stroke: #8b5cf6;
}
.hero-service-item:nth-child(3),
.hero-service-item:nth-child(3) svg {
  color: var(--mint);
  stroke: var(--mint);
}
.hero-service-item:nth-child(4),
.hero-service-item:nth-child(4) svg {
  color: #9bcf9b;
  stroke: #9bcf9b;
}

@media (max-width: 1100px) {
  .site-header .nav-cta {
    border-color: var(--ink);
    box-shadow: 5px 5px 0 var(--blue);
  }
}


/* =========================================================
   HERO FLOW REFINEMENT — NEO BRUTALISM ROUND 5
   ========================================================= */
:root {
  --lavender: #8b5cf6;
  --yellow-strong: #ffd64d;
  --orange: #ff8a1f;
  --mint-pale: #9bcf9b;
}

.site-header .nav-cta {
  box-shadow: 5px 5px 0 var(--blue);
}
.site-header .nav-cta:hover {
  box-shadow: 2px 2px 0 var(--blue);
}

.hero-auto-grid {
  gap: 20px;
}
.hero-auto-node {
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 18px 10px 14px;
  justify-content: center;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
}
.hero-auto-node:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--ink);
  border-color: var(--ink);
  background: var(--white);
}
.hero-auto-node::after {
  top: 11px;
  right: 12px;
  color: var(--ink);
  font-size: 9px;
  font-weight: 950;
}
.hero-auto-node strong {
  max-width: 92px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
  text-transform: none;
}
.hero-auto-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 14px;
  background: #000;
  border: 3px solid #000;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
}
.hero-auto-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 2.15;
}
.hero-auto-node:nth-child(1) .hero-auto-icon,
.hero-auto-node:nth-child(6) .hero-auto-icon { color: var(--mint); }
.hero-auto-node:nth-child(2) .hero-auto-icon { color: var(--lavender); }
.hero-auto-node:nth-child(3) .hero-auto-icon { color: var(--yellow-strong); }
.hero-auto-node:nth-child(4) .hero-auto-icon { color: var(--orange); }
.hero-auto-node:nth-child(5) .hero-auto-icon { color: var(--blue); }

.node-port,
.integration-port {
  background: var(--pink);
  border: 2px solid var(--ink);
  box-shadow: none;
}
.hero-auto-node:nth-child(1) .node-port-out,
.hero-auto-node:nth-child(2) .node-port-in,
.hero-auto-node:nth-child(3) .node-port-out,
.hero-auto-node:nth-child(4) .node-port-in,
.hero-auto-node:nth-child(5) .node-port-out,
.hero-auto-node:nth-child(6) .node-port-in {
  top: 2px;
}
.hero-auto-node:nth-child(2) .node-port-out,
.hero-auto-node:nth-child(3) .node-port-in,
.hero-auto-node:nth-child(4) .node-port-out,
.hero-auto-node:nth-child(5) .node-port-in {
  bottom: 2px;
}

.hero-auto-node.is-current {
  background: var(--white);
  border-color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.hero-auto-node.is-current .hero-auto-icon {
  background: #000;
  border-color: #000;
  transform: scale(1.03);
}
.hero-auto-node.is-current strong,
.hero-auto-node.flash-hit strong,
.hero-auto-node.is-complete strong {
  color: var(--ink);
  text-shadow: none;
}
.hero-auto-node.flash-hit .hero-auto-icon,
.hero-auto-node.is-complete .hero-auto-icon {
  background: #000;
  border-color: #000;
}
.hero-auto-node.is-complete,
.hero-auto-node.flash-hit {
  border-color: var(--ink);
}
.hero-auto-node.is-current .node-port,
.hero-auto-node.is-complete .node-port {
  border-color: var(--ink);
  background: var(--mint);
  box-shadow: none;
}

@media (max-width: 1100px) {
  .hero-auto-node {
    aspect-ratio: auto;
    min-height: 142px;
  }
}
@media (max-width: 620px) {
  .hero-auto-node {
    min-height: 132px;
    padding: 16px 8px 12px;
  }
  .hero-auto-icon {
    width: 64px;
    height: 64px;
  }
  .hero-auto-icon svg {
    width: 32px;
    height: 32px;
  }
  .hero-auto-node strong {
    font-size: 11px;
    max-width: 84px;
  }
}


/* =========================================================
   HERO FLOW REFINEMENT — NEO BRUTALISM ROUND 6
   ========================================================= */
.automation-flow-stage {
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 28px;
  box-shadow: 12px 12px 0 var(--ink);
}

.hero-auto-signal-halo,
.hero-auto-signal-ring,
.hero-auto-dot {
  display: none;
}
.hero-auto-triangle {
  fill: var(--blue);
  stroke: var(--ink);
  stroke-width: 2;
  filter: none;
}

.hero-auto-node {
  border: 0;
  background: transparent;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: visible;
  clip-path: none;
}
.hero-auto-node::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
  z-index: 0;
}
.hero-auto-node::after {
  content: attr(data-step);
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  z-index: 3;
}
.hero-auto-node > * {
  position: relative;
  z-index: 2;
}
.hero-auto-node .node-port {
  z-index: 4;
}
.hero-auto-node > strong,
.hero-auto-node > .hero-auto-icon {
  position: relative;
}
.hero-auto-node > strong {
  z-index: 2;
}
.hero-auto-node > .hero-auto-icon {
  z-index: 2;
}
.hero-auto-node .node-port::before,
.hero-auto-node .node-port::after { content: none; }
.hero-auto-node {
  padding: 18px 10px 14px;
}
.hero-auto-node .hero-auto-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 12px;
}
.hero-auto-node .hero-auto-icon svg {
  width: 40px;
  height: 40px;
}
.hero-auto-node strong {
  max-width: 100px;
  margin-top: 0;
}
.hero-auto-node > .hero-auto-icon::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: var(--white);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
  z-index: -1;
}
.hero-auto-node > .hero-auto-icon {
  background: #000;
  border: 0;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
}
.hero-auto-node:hover,
.hero-auto-node.is-current,
.hero-auto-node.is-complete,
.hero-auto-node.flash-hit {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--ink);
  background: transparent;
}
.hero-auto-node.is-current {
  box-shadow: 6px 6px 0 var(--ink);
  transform: none;
}
.hero-auto-node:hover::before,
.hero-auto-node.is-current::before,
.hero-auto-node.is-complete::before,
.hero-auto-node.flash-hit::before {
  background: var(--ink);
}
.hero-auto-node.is-current .hero-auto-icon,
.hero-auto-node.is-complete .hero-auto-icon,
.hero-auto-node.flash-hit .hero-auto-icon {
  background: #000;
}
.hero-auto-node.is-current .hero-auto-icon::before,
.hero-auto-node.is-complete .hero-auto-icon::before,
.hero-auto-node.flash-hit .hero-auto-icon::before {
  background: var(--white);
}
.hero-auto-node.is-current::after {
  background: var(--pink);
}
.hero-auto-node.is-complete::after {
  background: var(--mint);
}

@media (max-width: 620px) {
  .automation-flow-stage {
    border-radius: 20px;
  }
  .hero-auto-node .hero-auto-icon {
    width: 82px;
    height: 82px;
  }
  .hero-auto-node .hero-auto-icon svg {
    width: 34px;
    height: 34px;
  }
  .hero-auto-node::after {
    min-width: 24px;
    height: 22px;
    font-size: 9px;
    top: 8px;
    right: 8px;
  }
}


/* =========================================================
   HERO FLOW REFINEMENT — NEO BRUTALISM ROUND 7
   ========================================================= */
.hero-auto-node {
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(var(--ink), var(--ink)) border-box !important;
  border: 3px solid transparent !important;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}
.hero-auto-node::before {
  content: none !important;
}
.hero-auto-node:hover,
.hero-auto-node.is-current,
.hero-auto-node.is-complete,
.hero-auto-node.flash-hit {
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(var(--ink), var(--ink)) border-box !important;
}
.hero-auto-node .hero-auto-icon {
  width: 108px !important;
  height: 108px !important;
  background: #000 !important;
  border: 0 !important;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px) !important;
}
.hero-auto-node > .hero-auto-icon::before {
  content: none !important;
}
.hero-auto-node .hero-auto-icon svg {
  width: 42px !important;
  height: 42px !important;
}
@media (max-width: 620px) {
  .hero-auto-node .hero-auto-icon {
    width: 92px !important;
    height: 92px !important;
  }
  .hero-auto-node .hero-auto-icon svg {
    width: 36px !important;
    height: 36px !important;
  }
}


/* =========================================================
   HERO FLOW REFINEMENT — NEO BRUTALISM ROUND 8
   ========================================================= */
.hero-auto-node {
  position: relative;
  padding: 9px !important;
  display: grid !important;
  place-items: center !important;
  background: var(--white) !important;
  border: 0 !important;
  clip-path: none !important;
  isolation: isolate;
}
/* Contorno negro completo, incluidos los cortes diagonales */
.hero-auto-node::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block !important;
  background: var(--ink) !important;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
}
.hero-auto-node::after {
  z-index: 4;
}
/* Superficie blanca interior del nodo dejando un borde uniforme de 3px */
.hero-auto-node > .hero-auto-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -2;
  background: var(--white);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.hero-auto-node .hero-auto-icon {
  width: calc(100% - 10px) !important;
  height: calc(100% - 10px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  background: #000 !important;
  display: grid !important;
  place-items: center !important;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px) !important;
}
.hero-auto-node .hero-auto-icon svg {
  width: 46% !important;
  height: 46% !important;
  max-width: 54px;
  max-height: 54px;
}
.hero-auto-node strong { display: none !important; }
.hero-auto-node:hover,
.hero-auto-node.is-current,
.hero-auto-node.is-complete,
.hero-auto-node.flash-hit {
  background: var(--white) !important;
}
.hero-auto-node:hover::before,
.hero-auto-node.is-current::before,
.hero-auto-node.is-complete::before,
.hero-auto-node.flash-hit::before {
  background: var(--ink) !important;
}
@media (max-width: 1100px) {
  .hero-auto-node {
    min-height: 142px;
  }
}
@media (max-width: 620px) {
  .hero-auto-node {
    padding: 8px !important;
  }
  .hero-auto-node .hero-auto-icon {
    width: calc(100% - 8px) !important;
    height: calc(100% - 8px) !important;
  }
}


/* =========================================================
   HERO FLOW REFINEMENT — NEO BRUTALISM ROUND 9
   Rebuilt node layers: black perimeter, white shell, black core.
   ========================================================= */
.hero-auto-node {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate;
}
.hero-auto-node::before {
  content: none !important;
  display: none !important;
}
.hero-auto-node:hover,
.hero-auto-node.is-current,
.hero-auto-node.is-complete,
.hero-auto-node.flash-hit {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero-auto-node .node-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ink);
  clip-path: polygon(
    15px 0,
    calc(100% - 15px) 0,
    100% 15px,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    15px 100%,
    0 calc(100% - 15px),
    0 15px
  );
  filter: drop-shadow(6px 6px 0 var(--ink));
}
.hero-auto-node .node-frame::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--white);
  clip-path: polygon(
    12px 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    12px 100%,
    0 calc(100% - 12px),
    0 12px
  );
}

.hero-auto-node .hero-auto-icon,
.hero-auto-node.is-current .hero-auto-icon,
.hero-auto-node.is-complete .hero-auto-icon,
.hero-auto-node.flash-hit .hero-auto-icon {
  position: absolute !important;
  inset: 8px !important;
  z-index: 2 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: inherit;
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  clip-path: polygon(
    11px 0,
    calc(100% - 11px) 0,
    100% 11px,
    100% calc(100% - 11px),
    calc(100% - 11px) 100%,
    11px 100%,
    0 calc(100% - 11px),
    0 11px
  ) !important;
}
.hero-auto-node .hero-auto-icon::before,
.hero-auto-node .hero-auto-icon::after {
  content: none !important;
  display: none !important;
}
.hero-auto-node .hero-auto-icon svg {
  width: 45% !important;
  height: 45% !important;
  max-width: 58px;
  max-height: 58px;
}

.hero-auto-node::after {
  z-index: 5 !important;
}
.hero-auto-node .node-port {
  z-index: 6 !important;
}
.hero-auto-node strong {
  display: none !important;
}

.hero-auto-node:hover .node-frame {
  transform: translate(3px, 3px);
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.hero-auto-node:hover .hero-auto-icon {
  transform: translate(3px, 3px) !important;
}
.hero-auto-node.is-current .node-frame,
.hero-auto-node.is-complete .node-frame,
.hero-auto-node.flash-hit .node-frame {
  background: var(--ink);
}

@media (max-width: 620px) {
  .hero-auto-node .hero-auto-icon,
  .hero-auto-node.is-current .hero-auto-icon,
  .hero-auto-node.is-complete .hero-auto-icon,
  .hero-auto-node.flash-hit .hero-auto-icon {
    inset: 7px !important;
  }
  .hero-auto-node .hero-auto-icon svg {
    width: 43% !important;
    height: 43% !important;
  }
}

/* Final cleanup: no exterior shadow/line on flow nodes */
.hero-auto-node .node-frame,
.hero-auto-node:hover .node-frame,
.hero-auto-node.is-current .node-frame,
.hero-auto-node.is-complete .node-frame,
.hero-auto-node.flash-hit .node-frame {
  filter: none !important;
  transform: none !important;
}
.hero-auto-node:hover .hero-auto-icon {
  transform: none !important;
}


/* =========================================================
   HERO FLOW REFINEMENT — NEO BRUTALISM ROUND 10
   Bigger icons, thinner strokes, clean interiors, left labels.
   ========================================================= */
.hero-auto-node::after {
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  min-width: 26px !important;
  height: 23px !important;
  padding: 0 6px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 5px !important;
  background: var(--yellow) !important;
  color: var(--ink) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  z-index: 7 !important;
}
.hero-auto-node.is-current::after {
  background: var(--pink) !important;
}
.hero-auto-node.is-complete::after {
  background: var(--mint) !important;
}

.hero-auto-node .hero-auto-icon svg {
  width: 61% !important;
  height: 61% !important;
  max-width: 76px !important;
  max-height: 76px !important;
  stroke-width: 1.55 !important;
}

/* Connection anchors remain available to the animation geometry,
   but are visually hidden so the black core contains only the icon. */
.hero-auto-node .node-port {
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-auto-node strong {
  display: none !important;
}

@media (max-width: 620px) {
  .hero-auto-node::after {
    top: 7px !important;
    left: 7px !important;
    min-width: 24px !important;
    height: 21px !important;
    font-size: 9px !important;
  }
  .hero-auto-node .hero-auto-icon svg {
    width: 58% !important;
    height: 58% !important;
    max-width: 62px !important;
    max-height: 62px !important;
  }
}


/* =========================================================
   HERO FLOW REFINEMENT — NEO BRUTALISM ROUND 11
   Larger icons, thinner icon stroke, external black step labels.
   ========================================================= */
.hero-auto-node {
  overflow: visible !important;
}

.hero-auto-node::after,
.hero-auto-node.is-current::after,
.hero-auto-node.is-complete::after {
  top: -12px !important;
  left: -12px !important;
  right: auto !important;
  min-width: 28px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  z-index: 9 !important;
}

.hero-auto-node .hero-auto-icon svg {
  width: 68% !important;
  height: 68% !important;
  max-width: 84px !important;
  max-height: 84px !important;
  stroke-width: 1.2 !important;
}

@media (max-width: 620px) {
  .hero-auto-node::after,
  .hero-auto-node.is-current::after,
  .hero-auto-node.is-complete::after {
    top: -10px !important;
    left: -10px !important;
    min-width: 24px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
  }

  .hero-auto-node .hero-auto-icon svg {
    width: 64% !important;
    height: 64% !important;
    max-width: 68px !important;
    max-height: 68px !important;
    stroke-width: 1.15 !important;
  }
}


/* =========================================================
   HERO FLOW REFINEMENT — NEO BRUTALISM ROUND 12
   Remove glow flashing, animate icon arrival instead.
   ========================================================= */
.hero-auto-node.flash-hit,
.hero-auto-node.flash-hit .hero-auto-icon,
.hero-auto-node.flash-hit strong,
.hero-auto-path.flash-line,
.hero-integration-path.flash-line,
.hero-integrations-panel.glow-hit,
.hero-integrations-panel.glow-hit .integration-port,
.integration-app.logo-hit .integration-logo,
.integration-app.logo-hit span {
  animation: none !important;
}

.hero-auto-path,
.hero-integration-path,
.hero-auto-node,
.hero-auto-node .hero-auto-icon,
.hero-integrations-panel,
.integration-logo {
  filter: none !important;
}

.hero-auto-icon.icon-arrive {
  animation: iconArrivalHop 720ms cubic-bezier(.2,.8,.2,1) !important;
  transform-origin: center center;
}

@keyframes iconArrivalHop {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  22% {
    transform: translateY(-10px) rotate(-10deg) scale(1.08);
  }
  48% {
    transform: translateY(1px) rotate(8deg) scale(.98);
  }
  72% {
    transform: translateY(-4px) rotate(-4deg) scale(1.03);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-auto-icon.icon-arrive {
    animation: none !important;
  }
}


/* =========================================================
   HERO FLOW REFINEMENT — NEO BRUTALISM ROUND 13
   User-supplied icons recolored with CSS masks.
   Arrival animation runs on the artwork only, never the black box.
   ========================================================= */
.hero-auto-icon {
  overflow: visible !important;
}
.hero-auto-icon > svg {
  display: none !important;
}
.node-icon-art {
  width: 76%;
  height: 76%;
  display: block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform-origin: center;
  will-change: transform;
}
.hero-auto-node:nth-child(1) .node-icon-art {
  color: var(--mint);
  -webkit-mask-image: url("assets/flow-icons/email.png");
  mask-image: url("assets/flow-icons/email.png");
}
.hero-auto-node:nth-child(2) .node-icon-art {
  color: var(--lavender);
  -webkit-mask-image: url("assets/flow-icons/brain.png");
  mask-image: url("assets/flow-icons/brain.png");
}
.hero-auto-node:nth-child(3) .node-icon-art {
  color: var(--yellow-strong);
  -webkit-mask-image: url("assets/flow-icons/database.png");
  mask-image: url("assets/flow-icons/database.png");
}
.hero-auto-node:nth-child(4) .node-icon-art {
  color: var(--orange);
  -webkit-mask-image: url("assets/flow-icons/paper-plane.png");
  mask-image: url("assets/flow-icons/paper-plane.png");
}
.hero-auto-node:nth-child(5) .node-icon-art {
  color: var(--blue);
  -webkit-mask-image: url("assets/flow-icons/calendar.png");
  mask-image: url("assets/flow-icons/calendar.png");
}
.hero-auto-node:nth-child(6) .node-icon-art {
  color: var(--mint);
  -webkit-mask-image: url("assets/flow-icons/group-chat.png");
  mask-image: url("assets/flow-icons/group-chat.png");
}

/* Disable the previous animation target so the icon container never disappears. */
.hero-auto-icon.icon-arrive {
  animation: none !important;
  transform: none !important;
}
.node-icon-art.icon-arrive {
  animation: nodeIconArrival 680ms cubic-bezier(.2,.78,.22,1) both !important;
}
@keyframes nodeIconArrival {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  24%  { transform: translateY(-9px) rotate(-8deg) scale(1.10); }
  50%  { transform: translateY(1px) rotate(6deg) scale(.98); }
  72%  { transform: translateY(-3px) rotate(-3deg) scale(1.04); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
@media (max-width: 620px) {
  .node-icon-art {
    width: 73%;
    height: 73%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .node-icon-art.icon-arrive {
    animation: none !important;
  }
}


/* =========================================================
   HERO FLOW REFINEMENT — NEO BRUTALISM ROUND 14
   Use explicit colored PNG icons so they always render.
   ========================================================= */
.node-icon-art {
  width: 76% !important;
  height: 76% !important;
  display: block !important;
  object-fit: contain !important;
  background: none !important;
  color: initial !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform-origin: center center;
  will-change: transform;
}
.hero-auto-node:nth-child(1) .node-icon-art,
.hero-auto-node:nth-child(2) .node-icon-art,
.hero-auto-node:nth-child(3) .node-icon-art,
.hero-auto-node:nth-child(4) .node-icon-art,
.hero-auto-node:nth-child(5) .node-icon-art,
.hero-auto-node:nth-child(6) .node-icon-art {
  color: initial !important;
}
@media (max-width: 620px) {
  .node-icon-art {
    width: 73% !important;
    height: 73% !important;
  }
}


/* =========================================================
   HERO FLOW REFINEMENT — NEO BRUTALISM ROUND 16
   Properly sized static icon images.
   ========================================================= */
.hero-auto-icon {
  background-image: none !important;
}
.hero-auto-icon > img.node-icon-art {
  display: block !important;
  width: 48% !important;
  height: 48% !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  background: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  animation: none !important;
  transform: none !important;
}
.hero-auto-icon > svg,
.hero-auto-icon > span {
  display: none !important;
}
@media (max-width: 620px) {
  .hero-auto-icon > img.node-icon-art {
    width: 46% !important;
    height: 46% !important;
    max-width: 54px !important;
    max-height: 54px !important;
  }
}


/* =========================================================
   HERO FLOW REFINEMENT — NEO BRUTALISM ROUND 17
   Remove every legacy background icon. One visible IMG per node.
   ========================================================= */
.hero-auto-grid .hero-auto-node:nth-child(1) .hero-auto-icon,
.hero-auto-grid .hero-auto-node:nth-child(2) .hero-auto-icon,
.hero-auto-grid .hero-auto-node:nth-child(3) .hero-auto-icon,
.hero-auto-grid .hero-auto-node:nth-child(4) .hero-auto-icon,
.hero-auto-grid .hero-auto-node:nth-child(5) .hero-auto-icon,
.hero-auto-grid .hero-auto-node:nth-child(6) .hero-auto-icon {
  background-color: #000 !important;
  background-image: none !important;
  background-size: 0 0 !important;
  background-repeat: no-repeat !important;
}
.hero-auto-grid .hero-auto-node .hero-auto-icon > img.node-icon-art {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 48% !important;
  height: 48% !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  object-position: center !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  animation: none !important;
  transform: none !important;
}
@media (max-width: 620px) {
  .hero-auto-grid .hero-auto-node .hero-auto-icon > img.node-icon-art {
    width: 46% !important;
    height: 46% !important;
    max-width: 54px !important;
    max-height: 54px !important;
  }
}


/* =========================================================
   HERO / COLOR REFINEMENT — ROUND 18
   Requested brand color adjustments.
   ========================================================= */
:root {
  --mint: #07c296;
  --blue: #0032eb;
  --paper: #f1f1f1;
}

body,
.hero,
.section-light,
.process-section.section-light {
  background: #f1f1f1 !important;
}

.hero h1 span {
  color: var(--mint) !important;
}

.site-header .nav-cta,
.hero-actions .button-primary {
  background: #0032eb !important;
}

.site-header .nav-cta {
  box-shadow: 5px 5px 0 #0032eb !important;
}
.site-header .nav-cta:hover {
  background: #0032eb !important;
  box-shadow: 2px 2px 0 #0032eb !important;
}
.hero-actions .button-primary:hover {
  background: #0032eb !important;
}

.hero-service-item:nth-child(1),
.hero-service-item:nth-child(1) svg {
  color: #0032eb !important;
  stroke: #0032eb !important;
}
.hero-service-item:nth-child(1) svg {
  fill: #0032eb !important;
}
.hero-service-item:nth-child(3),
.hero-service-item:nth-child(3) svg {
  color: #07c296 !important;
  stroke: #07c296 !important;
}


/* =========================================================
   HERO LAYOUT REFINEMENT — ROUND 19
   Text content above; complete automation flow below.
   ========================================================= */
.hero {
  min-height: auto !important;
}

.hero-grid {
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(52px, 5.5vw, 84px) !important;
  padding-block: clamp(68px, 7vw, 104px) clamp(92px, 9vw, 138px) !important;
}

.hero-copy {
  width: 100% !important;
  max-width: 1160px !important;
  margin: 0 !important;
}

.hero h1 {
  max-width: 1120px !important;
}

.hero-lead {
  max-width: 1010px !important;
}

.hero-visual {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-self: auto !important;
}

.automation-flow-scroll {
  width: 100% !important;
  overflow: visible !important;
}

.automation-flow-stage {
  width: 100% !important;
  min-width: 1080px !important;
  height: 470px !important;
}

@media (max-width: 1180px) {
  .hero-grid {
    gap: 56px !important;
  }

  .automation-flow-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 16px 0 14px !important;
    scrollbar-width: thin;
  }

  .automation-flow-stage {
    min-width: 1000px !important;
  }
}

@media (max-width: 720px) {
  .hero-grid {
    gap: 44px !important;
    padding-block: 58px 82px !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .automation-flow-stage {
    min-width: 860px !important;
    height: 438px !important;
  }
}


/* =========================================================
   HERO TITLE REFINEMENT — ROUND 20
   Keep "podemos automatizarlo" together on the lower line.
   ========================================================= */
.hero h1 span {
  display: block !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  .hero h1 span {
    white-space: normal !important;
  }
}


/* =========================================================
   HERO REFINEMENT — ROUND 21
   Remove eyebrow pill, move content up, use Soin Sans for non-title text,
   and replace hero grid/pink circle with a cleaner abstract background.
   ========================================================= */
body,
button,
input,
textarea,
select {
  font-family: "Soin Sans", "Soin Sans Neue", "Soin Sans Pro", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.hero h1,
.hero h1 * {
  font-family: "Gainsborough Sans", Georgia, serif !important;
}

.hero .eyebrow {
  display: none !important;
}

.hero-grid {
  gap: clamp(32px, 4vw, 56px) !important;
  padding-top: 56px !important;
  padding-bottom: 52px !important;
}

.hero-copy {
  padding-top: 0 !important;
}

.hero-lead,
.hero-actions,
.hero-services {
  margin-top: 44px !important;
}

.hero::before {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 84% 20%, rgba(0, 50, 235, 0.08) 0%, rgba(0, 50, 235, 0.08) 10%, transparent 34%),
    radial-gradient(circle at 12% 72%, rgba(7, 194, 150, 0.10) 0%, rgba(7, 194, 150, 0.10) 12%, transparent 36%),
    linear-gradient(120deg, transparent 0 58%, rgba(0, 50, 235, 0.035) 58% 67%, transparent 67% 100%),
    linear-gradient(300deg, transparent 0 64%, rgba(7, 194, 150, 0.04) 64% 74%, transparent 74% 100%) !important;
  background-size: cover !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.hero::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(135deg, transparent 0 70%, rgba(0,0,0,0.03) 70% 76%, transparent 76% 100%) !important;
}

.hero-starfield {
  opacity: 0 !important;
}

.site-header .primary-nav a,
.site-header .nav-cta,
.hero-actions .button,
.hero-lead,
.hero-service-item,
.statement-title h2,
.statement-capability h3,
.section-heading h2,
.split-heading > p,
.usecase-card h3,
.usecase-card p,
.pipeline-card h3,
.pipeline-card p,
.process-step h3,
.process-step p,
.automation-contact-copy h2,
.automation-contact-description,
.contact-form,
.footer-links a,
.footer-contact a,
.primary-nav,
.brand-copy,
.brand-copy strong,
.brand-copy span {
  font-family: "Soin Sans", "Soin Sans Neue", "Soin Sans Pro", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

@media (max-width: 900px) {
  .hero-grid {
    padding-top: 18px !important;
    padding-bottom: 86px !important;
  }
}


/* =========================================================
   HERO / HEADER REFINEMENT — ROUND 24
   Center hero content, reduce top banner height,
   add dotted triangle accent on header corner.
   ========================================================= */
.site-header {
  position: sticky;
  overflow: visible;
}
.site-header::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 14px;
  width: 92px;
  height: 56px;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.82) 1.2px, transparent 1.2px);
  background-size: 9px 9px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: .95;
}

.nav-shell {
  min-height: 64px !important;
  gap: 24px !important;
}

.brand-mark {
  width: 46px;
  height: 32px;
}
.brand-copy strong {
  font-size: 17px;
}
.brand-copy span {
  margin-top: 3px;
  font-size: 8px;
}

.primary-nav {
  font-size: 13px;
}
.site-header .nav-cta {
  padding: 10px 15px;
}

.hero-copy {
  max-width: 1280px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.hero h1 {
  margin-inline: auto !important;
}
.hero-lead {
  margin-inline: auto !important;
}
.hero-actions {
  justify-content: center !important;
}
.hero-services {
  justify-content: center !important;
  justify-items: center !important;
  margin-inline: auto !important;
}

@media (max-width: 1100px) {
  .site-header::before {
    top: 7px;
    left: 12px;
    width: 76px;
    height: 46px;
    background-size: 8px 8px;
  }
  .nav-shell {
    min-height: 60px !important;
  }
}

@media (max-width: 720px) {
  .site-header::before {
    top: 8px;
    left: 10px;
    width: 58px;
    height: 36px;
    background-size: 7px 7px;
  }
  .hero-copy {
    max-width: 100% !important;
  }
}


/* =========================================================
   HERO / HEADER REFINEMENT — ROUND 25
   Move dotted accent into hero, add blue header corner brackets,
   and tighten hero text spacing.
   ========================================================= */
.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  width: 54px;
  height: 22px;
  pointer-events: none;
  background: none !important;
  clip-path: none !important;
  opacity: 1 !important;
}

.site-header::before {
  left: 0;
  border-top: 4px solid #0032eb;
  border-left: 4px solid #0032eb;
}

.site-header::after {
  right: 0;
  border-top: 4px solid #0032eb;
  border-right: 4px solid #0032eb;
}

.hero-grid {
  position: relative !important;
}

.hero-grid::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 130px;
  height: 90px;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
  background-image: radial-gradient(#0032eb 1.4px, transparent 1.4px);
  background-size: 10px 10px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 1;
}

.hero h1 span {
  text-shadow: 5px 5px 0 #0032eb !important;
}

.hero-lead {
  margin-top: 12px !important;
  line-height: 1.38 !important;
}

.hero-actions {
  margin-top: 22px !important;
}

@media (max-width: 900px) {
  .hero-grid::before {
    top: 10px;
    width: 96px;
    height: 68px;
    background-size: 9px 9px;
  }

  .site-header::before,
  .site-header::after {
    width: 42px;
    height: 18px;
    border-width: 3px;
  }
}

@media (max-width: 620px) {
  .hero-grid::before {
    width: 72px;
    height: 52px;
    background-size: 8px 8px;
  }

  .hero h1 span {
    text-shadow: 3px 3px 0 #0032eb !important;
  }
}


/* =========================================================
   HERO / HEADER REFINEMENT — ROUND 26
   Move dotted triangle left, use black dots, soften span shadow,
   and remove header corner brackets.
   ========================================================= */
.site-header::before,
.site-header::after {
  display: none !important;
  content: none !important;
}

.hero-grid::before {
  left: -18px !important;
  top: 16px !important;
  background-image: radial-gradient(#000 1.35px, transparent 1.35px) !important;
  background-size: 10px 10px !important;
}

.hero h1 span {
  text-shadow: 5px 5px 0 rgba(0, 50, 235, 0.16) !important;
}

.hero-lead {
  margin-top: 8px !important;
  line-height: 1.32 !important;
}

@media (max-width: 900px) {
  .hero-grid::before {
    left: -12px !important;
    top: 12px !important;
    background-size: 9px 9px !important;
  }
}

@media (max-width: 620px) {
  .hero-grid::before {
    left: -8px !important;
    top: 10px !important;
    background-size: 8px 8px !important;
  }

  .hero h1 span {
    text-shadow: 3px 3px 0 rgba(0, 50, 235, 0.16) !important;
  }
}


/* =========================================================
   HERO BUTTON INTERACTION — ROUND 27
   Neo-brutalist comic pop with action rays.
   ========================================================= */
.hero-actions .button {
  --comic-shadow-x: 7px;
  --comic-shadow-y: 7px;
  --comic-ray: #0b0f12;
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
  transform-origin: center;
  transition:
    transform 150ms cubic-bezier(.2,.9,.28,1.25),
    box-shadow 150ms ease,
    background-color 150ms ease,
    color 150ms ease !important;
}

.hero-actions .button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -25px -30px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.72) rotate(-7deg);
  background: repeating-conic-gradient(
    from -7deg,
    var(--comic-ray) 0deg 2.4deg,
    transparent 2.4deg 18deg
  );
  -webkit-mask: radial-gradient(ellipse at center, transparent 0 58%, #000 59% 67%, transparent 68% 100%);
  mask: radial-gradient(ellipse at center, transparent 0 58%, #000 59% 67%, transparent 68% 100%);
  transition: opacity 110ms ease, transform 220ms cubic-bezier(.2,.9,.25,1.25);
}

.hero-actions .button::after {
  content: "✦";
  position: absolute;
  top: -22px;
  right: -17px;
  z-index: 3;
  color: var(--comic-ray);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: scale(.25) rotate(-25deg);
  transition: opacity 110ms ease, transform 220ms cubic-bezier(.2,.9,.25,1.35);
  pointer-events: none;
}

.hero-actions .button-primary {
  --comic-ray: #0b0f12;
  box-shadow: var(--comic-shadow-x) var(--comic-shadow-y) 0 #0b0f12 !important;
}

.hero-actions .button-ghost {
  --comic-ray: #0032eb;
  box-shadow: var(--comic-shadow-x) var(--comic-shadow-y) 0 #0032eb !important;
}

.hero-actions .button:hover {
  transform: translate(-3px, -5px) rotate(-1.2deg) !important;
}

.hero-actions .button:nth-child(2):hover {
  transform: translate(-3px, -5px) rotate(1.2deg) !important;
}

.hero-actions .button:hover::before {
  opacity: .92;
  transform: scale(1) rotate(0deg);
  animation: comicRaySnap 330ms cubic-bezier(.2,.9,.25,1.25) both;
}

.hero-actions .button:hover::after {
  opacity: 1;
  transform: scale(1) rotate(8deg);
}

.hero-actions .button-primary:hover {
  box-shadow: 11px 11px 0 #0b0f12 !important;
}

.hero-actions .button-ghost:hover {
  box-shadow: 11px 11px 0 #0032eb !important;
}

.hero-actions .button-primary:hover span {
  animation: comicArrowNudge 560ms ease-in-out infinite alternate;
}

.hero-actions .button-ghost:hover .button-icon {
  animation: comicMessageWiggle 620ms ease-in-out infinite alternate;
  transform-origin: 50% 65%;
}

.hero-actions .button:active {
  transform: translate(5px, 5px) rotate(0deg) scale(.98) !important;
  box-shadow: 1px 1px 0 #0b0f12 !important;
  transition-duration: 70ms !important;
}

.hero-actions .button-ghost:active {
  box-shadow: 1px 1px 0 #0032eb !important;
}

@keyframes comicRaySnap {
  0% { transform: scale(.68) rotate(-8deg); }
  65% { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes comicArrowNudge {
  from { transform: translateX(1px) scale(1); }
  to { transform: translateX(7px) scale(1.12); }
}

@keyframes comicMessageWiggle {
  from { transform: rotate(-5deg) translateY(0); }
  to { transform: rotate(8deg) translateY(-2px); }
}

/* Header CTA gets a lighter version of the same tactile feel. */
.site-header .nav-cta {
  transition: transform 150ms cubic-bezier(.2,.9,.28,1.2), box-shadow 150ms ease !important;
}
.site-header .nav-cta:hover {
  transform: translate(-2px, -3px) rotate(-.6deg) !important;
  box-shadow: 8px 8px 0 #0032eb !important;
}
.site-header .nav-cta:active {
  transform: translate(3px, 3px) scale(.98) !important;
  box-shadow: 1px 1px 0 #0032eb !important;
}

@media (hover: none) {
  .hero-actions .button::before,
  .hero-actions .button::after {
    display: none !important;
  }
  .hero-actions .button:hover,
  .hero-actions .button:nth-child(2):hover,
  .site-header .nav-cta:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-actions .button,
  .hero-actions .button::before,
  .hero-actions .button::after,
  .hero-actions .button span,
  .hero-actions .button-icon,
  .site-header .nav-cta {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   HERO BUTTON INTERACTION — ROUND 28
   Fewer action lines from one corner only.
   ========================================================= */
.hero-actions .button::before {
  z-index: 2 !important;
  inset: auto !important;
  top: -14px !important;
  right: -14px !important;
  width: 42px !important;
  height: 32px !important;
  opacity: 0 !important;
  transform: translate(2px, 2px) scale(.82) rotate(-6deg) !important;
  background:
    linear-gradient(var(--comic-ray), var(--comic-ray)) 4px 21px / 16px 2px no-repeat,
    linear-gradient(var(--comic-ray), var(--comic-ray)) 14px 12px / 18px 2px no-repeat,
    linear-gradient(var(--comic-ray), var(--comic-ray)) 23px 4px / 12px 2px no-repeat !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.hero-actions .button:hover::before {
  opacity: .95 !important;
  transform: translate(0, 0) scale(1) rotate(0deg) !important;
  animation: comicCornerSnap 260ms cubic-bezier(.2,.9,.25,1.25) both !important;
}

.hero-actions .button::after {
  top: -16px !important;
  right: -9px !important;
  font-size: 16px !important;
}

@keyframes comicCornerSnap {
  0% { transform: translate(4px, 3px) scale(.78) rotate(-7deg); }
  70% { transform: translate(-1px, -1px) scale(1.06) rotate(1deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}


/* =========================================================
   INTERACTIONS + FLOW REFINEMENT — ROUND 29
   Clean button lift, subtle service hover, smaller centered nodes.
   ========================================================= */

/* Buttons: only the tactile jump, no rays, stars or child wiggles. */
.hero-actions .button::before,
.hero-actions .button::after {
  display: none !important;
  content: none !important;
}
.hero-actions .button:hover,
.hero-actions .button:nth-child(2):hover {
  transform: translateY(-6px) scale(1.015) !important;
}
.hero-actions .button-primary:hover {
  box-shadow: 10px 12px 0 #0b0f12 !important;
}
.hero-actions .button-ghost:hover {
  box-shadow: 10px 12px 0 #0032eb !important;
}
.hero-actions .button span,
.hero-actions .button-icon,
.hero-actions .button-primary:hover span,
.hero-actions .button-ghost:hover .button-icon {
  animation: none !important;
  transform: none !important;
}
.hero-actions .button:active,
.hero-actions .button-ghost:active {
  transform: translateY(3px) scale(.985) !important;
}

/* Service labels: small forward pop on hover. */
.hero-service-item {
  position: relative;
  transition: transform 160ms cubic-bezier(.2,.85,.25,1.2), filter 160ms ease !important;
  transform-origin: center;
  cursor: default;
}
.hero-service-item:hover {
  transform: translateY(-4px) scale(1.075) !important;
  filter: drop-shadow(3px 4px 0 rgba(11,15,18,.14));
}
.hero-service-item svg {
  transition: transform 160ms cubic-bezier(.2,.85,.25,1.2) !important;
}
.hero-service-item:hover svg {
  transform: scale(1.1) rotate(-5deg);
}
.hero-service-item:nth-child(4),
.hero-service-item:nth-child(4) svg {
  color: #b6cd4c !important;
  stroke: #b6cd4c !important;
}

/* Compact flow: smaller nodes connected horizontally through their centers. */
.automation-flow-stage {
  height: 390px !important;
}
.hero-auto-grid {
  grid-template-columns: repeat(6, minmax(96px, 118px)) !important;
  justify-content: space-between !important;
  align-items: start !important;
  gap: 24px !important;
  padding: 72px 28px 0 !important;
}
.hero-auto-node {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
}
.hero-auto-node .hero-auto-icon,
.hero-auto-node.is-current .hero-auto-icon,
.hero-auto-node.is-complete .hero-auto-icon,
.hero-auto-node.flash-hit .hero-auto-icon {
  inset: 7px !important;
}
.hero-auto-grid .hero-auto-node .hero-auto-icon > img.node-icon-art {
  width: 52% !important;
  height: 52% !important;
  max-width: 54px !important;
  max-height: 54px !important;
}
.hero-auto-node::after,
.hero-auto-node.is-current::after,
.hero-auto-node.is-complete::after {
  top: -9px !important;
  left: -9px !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  font-size: 13px !important;
}
.hero-integrations-panel {
  top: 238px !important;
  left: 10% !important;
  right: 10% !important;
  min-height: 82px !important;
}
.hero-auto-path {
  stroke-dasharray: none !important;
  stroke-width: 3px !important;
}

@media (max-width: 1180px) {
  .automation-flow-stage {
    min-width: 900px !important;
    height: 380px !important;
  }
  .hero-auto-grid {
    grid-template-columns: repeat(6, 106px) !important;
    gap: 25px !important;
    padding-inline: 28px !important;
  }
  .hero-integrations-panel {
    top: 226px !important;
  }
}

@media (max-width: 720px) {
  .automation-flow-stage {
    min-width: 790px !important;
    height: 360px !important;
  }
  .hero-auto-grid {
    grid-template-columns: repeat(6, 92px) !important;
    gap: 22px !important;
    padding: 68px 24px 0 !important;
  }
  .hero-auto-grid .hero-auto-node .hero-auto-icon > img.node-icon-art {
    max-width: 44px !important;
    max-height: 44px !important;
  }
  .hero-integrations-panel {
    top: 208px !important;
    left: 8% !important;
    right: 8% !important;
  }
}

@media (hover: none) {
  .hero-service-item:hover,
  .hero-service-item:hover svg {
    transform: none !important;
    filter: none !important;
  }
}


/* =========================================================
   FLOW REFINEMENT — ROUND 30 SAFE
   Based on last visible version, only minimal requested changes.
   ========================================================= */
.automation-flow-stage {
  box-shadow: none !important;
  position: relative !important;
}

.automation-flow-stage::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 84px;
  height: 58px;
  pointer-events: none;
  opacity: .8;
  background-image: radial-gradient(#0b0f12 1.15px, transparent 1.15px);
  background-size: 9px 9px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.hero-auto-grid {
  grid-template-columns: repeat(6, minmax(96px, 114px)) !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 72px 22px 0 !important;
}

.hero-auto-node .hero-auto-icon,
.hero-auto-node.is-current .hero-auto-icon,
.hero-auto-node.is-complete .hero-auto-icon,
.hero-auto-node.flash-hit .hero-auto-icon {
  inset: 7px !important;
}

.hero-auto-grid .hero-auto-node .hero-auto-icon > img.node-icon-art {
  width: 50% !important;
  height: 50% !important;
  max-width: 50px !important;
  max-height: 50px !important;
}

.hero-auto-path {
  stroke: #0b0f12 !important;
  stroke-width: 2.8px !important;
  stroke-dasharray: 6 8 !important;
  stroke-linecap: round !important;
}

.hero-auto-triangle {
  fill: #07c296 !important;
  stroke: #0b0f12 !important;
  stroke-width: 1.8 !important;
}

@media (max-width: 1180px) {
  .automation-flow-stage {
    min-width: 900px !important;
  }
  .hero-auto-grid {
    grid-template-columns: repeat(6, 102px) !important;
    gap: 14px !important;
  }
}

@media (max-width: 720px) {
  .automation-flow-stage::after {
    left: 10px;
    bottom: 10px;
    width: 66px;
    height: 46px;
    background-size: 8px 8px;
  }
  .automation-flow-stage {
    min-width: 790px !important;
  }
  .hero-auto-grid {
    grid-template-columns: repeat(6, 90px) !important;
    gap: 12px !important;
    padding: 68px 18px 0 !important;
  }
  .hero-auto-grid .hero-auto-node .hero-auto-icon > img.node-icon-art {
    max-width: 42px !important;
    max-height: 42px !important;
  }
}


/* =========================================================
   FLOW REFINEMENT — ROUND 31
   Slightly more spacing, lime triangle, dotted points connector.
   ========================================================= */
.hero-auto-grid {
  grid-template-columns: repeat(6, minmax(96px, 114px)) !important;
  justify-content: center !important;
  gap: 19px !important;
  padding: 72px 24px 0 !important;
}

.hero-auto-path {
  stroke: #0b0f12 !important;
  stroke-width: 2.6px !important;
  stroke-dasharray: 1 10 !important;
  stroke-linecap: round !important;
}

.hero-auto-triangle {
  fill: #b6cd4c !important;
  stroke: #0b0f12 !important;
  stroke-width: 1.8 !important;
}

@media (max-width: 1180px) {
  .hero-auto-grid {
    grid-template-columns: repeat(6, 102px) !important;
    gap: 18px !important;
  }
}

@media (max-width: 720px) {
  .hero-auto-grid {
    grid-template-columns: repeat(6, 90px) !important;
    gap: 15px !important;
    padding: 68px 18px 0 !important;
  }
}


/* =========================================================
   FLOW REFINEMENT — ROUND 32
   More space between nodes and denser dotted connectors.
   ========================================================= */
.hero-auto-grid {
  grid-template-columns: repeat(6, minmax(96px, 114px)) !important;
  justify-content: center !important;
  gap: 28px !important;
  padding: 72px 24px 0 !important;
}

.hero-auto-path {
  stroke: #0b0f12 !important;
  stroke-width: 2.6px !important;
  stroke-dasharray: 1 5.5 !important;
  stroke-linecap: round !important;
}

@media (max-width: 1180px) {
  .hero-auto-grid {
    grid-template-columns: repeat(6, 102px) !important;
    gap: 25px !important;
  }
}

@media (max-width: 720px) {
  .hero-auto-grid {
    grid-template-columns: repeat(6, 90px) !important;
    gap: 20px !important;
    padding: 68px 18px 0 !important;
  }
}


/* =========================================================
   FLOW REFINEMENT — ROUND 33
   Slightly wider spacing and updated replacement icons.
   ========================================================= */
.hero-auto-grid {
  gap: 34px !important;
}

@media (max-width: 1180px) {
  .hero-auto-grid {
    gap: 30px !important;
  }
}

@media (max-width: 720px) {
  .hero-auto-grid {
    gap: 24px !important;
  }
}


/* =========================================================
   FLOW REFINEMENT — ROUND 34
   Spread nodes so the flow spans the same width as the panel below.
   ========================================================= */
.hero-auto-grid {
  width: 80% !important;
  margin: 0 auto !important;
  padding: 72px 0 0 !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 18px !important;
  justify-items: center !important;
  justify-content: stretch !important;
}

.hero-auto-node {
  width: 100% !important;
  max-width: 108px !important;
}

@media (max-width: 1180px) {
  .hero-auto-grid {
    width: 82% !important;
    gap: 16px !important;
  }
  .hero-auto-node {
    max-width: 102px !important;
  }
}

@media (max-width: 720px) {
  .hero-auto-grid {
    width: auto !important;
    margin: 0 !important;
    padding: 68px 18px 0 !important;
    grid-template-columns: repeat(6, 90px) !important;
    gap: 24px !important;
    justify-items: stretch !important;
  }
  .hero-auto-node {
    max-width: none !important;
  }
}


/* =========================================================
   INTERACTIONS + FLOW REFINEMENT — ROUND 35
   Bring back micro-rotation on hero buttons and tighten flow panel corners.
   ========================================================= */
.hero-actions .button:hover {
  transform: translateY(-6px) scale(1.015) rotate(-1.15deg) !important;
}

.hero-actions .button:nth-child(2):hover {
  transform: translateY(-6px) scale(1.015) rotate(1.15deg) !important;
}

.hero-actions .button:active,
.hero-actions .button:nth-child(2):active {
  transform: translateY(1px) scale(.985) rotate(0deg) !important;
}

.automation-flow-stage {
  border-radius: 18px !important;
}


/* =========================================================
   FLOW BRANCHING — ROUND 36
   Secondary dotted branches leave from the front of nodes 2 and 4.
   ========================================================= */
.hero-integration-path {
  fill: none !important;
  stroke: #0b0f12 !important;
  stroke-width: 2.6px !important;
  stroke-dasharray: 1 5.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
}

.hero-integration-signal {
  opacity: 0;
  pointer-events: none;
}

.hero-integration-signal.is-travelling {
  opacity: 1;
}

.hero-integration-triangle {
  fill: #b6cd4c;
  stroke: #0b0f12;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: reduce) {
  .hero-integration-signal {
    display: none !important;
  }
}


/* =========================================================
   NODE ARRIVAL ANIMATION — ROUND 39
   Comic impact: squeeze, pop, micro-rotation, icon and label hop.
   ========================================================= */
.hero-auto-node {
  --impact-color: #b6cd4c;
  --impact-tilt: -1.2deg;
  transform-origin: center center;
  will-change: translate, scale, rotate;
}

.hero-auto-node:nth-child(1) { --impact-color: #07c296; --impact-tilt: -1.2deg; }
.hero-auto-node:nth-child(2) { --impact-color: #8b5cf6; --impact-tilt: 1.2deg; }
.hero-auto-node:nth-child(3) { --impact-color: #ffd64d; --impact-tilt: -1.2deg; }
.hero-auto-node:nth-child(4) { --impact-color: #ff8a1f; --impact-tilt: 1.2deg; }
.hero-auto-node:nth-child(5) { --impact-color: #0032eb; --impact-tilt: -1.2deg; }
.hero-auto-node:nth-child(6) { --impact-color: #07c296; --impact-tilt: 1.2deg; }

.hero-auto-node.node-impact {
  animation: nodeComicImpact 620ms cubic-bezier(.2,.82,.2,1) both !important;
  z-index: 8;
}

.hero-auto-node.node-impact .node-frame {
  animation: nodeFrameImpact 620ms ease both !important;
}

.hero-auto-node.node-impact .node-icon-art {
  animation: nodeIconImpact 620ms cubic-bezier(.2,.82,.2,1) both !important;
}

.hero-auto-node.node-impact::after {
  animation: nodeLabelImpact 620ms cubic-bezier(.2,.82,.2,1) both !important;
}

@keyframes nodeComicImpact {
  0% {
    translate: 0 0;
    scale: 1 1;
    rotate: 0deg;
  }
  14% {
    translate: 4px 0;
    scale: .94 1.03;
    rotate: 0deg;
  }
  38% {
    translate: -2px -4px;
    scale: 1.065 1.065;
    rotate: var(--impact-tilt);
  }
  58% {
    translate: 1px 1px;
    scale: .985 .985;
    rotate: calc(var(--impact-tilt) * -.55);
  }
  78% {
    translate: 0 -1px;
    scale: 1.02 1.02;
    rotate: calc(var(--impact-tilt) * .28);
  }
  100% {
    translate: 0 0;
    scale: 1 1;
    rotate: 0deg;
  }
}

@keyframes nodeFrameImpact {
  0%, 100% { background-color: #0b0f12; }
  20% { background-color: #0b0f12; }
  38% { background-color: var(--impact-color); }
  64% { background-color: #0b0f12; }
}

@keyframes nodeIconImpact {
  0% {
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
  }
  18% {
    translate: 3px 1px;
    scale: .96;
    rotate: 0deg;
  }
  40% {
    translate: -1px -9px;
    scale: 1.14;
    rotate: calc(var(--impact-tilt) * 5.4);
  }
  62% {
    translate: 1px 1px;
    scale: .98;
    rotate: calc(var(--impact-tilt) * -2.7);
  }
  80% {
    translate: 0 -3px;
    scale: 1.045;
    rotate: calc(var(--impact-tilt) * 1.35);
  }
  100% {
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
  }
}

@keyframes nodeLabelImpact {
  0% {
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
  }
  24% {
    translate: 1px 2px;
    scale: .96;
    rotate: 0deg;
  }
  44% {
    translate: -1px -8px;
    scale: 1.14;
    rotate: calc(var(--impact-tilt) * -2.2);
  }
  68% {
    translate: 0 1px;
    scale: .99;
    rotate: calc(var(--impact-tilt) * 1.1);
  }
  84% {
    translate: 0 -2px;
    scale: 1.035;
    rotate: 0deg;
  }
  100% {
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-auto-node.node-impact,
  .hero-auto-node.node-impact .node-frame,
  .hero-auto-node.node-impact .node-icon-art,
  .hero-auto-node.node-impact::after {
    animation: none !important;
  }
}


/* =========================================================
   NODE IMPACT TIMING — ROUND 40
   Slightly longer timing so the impact reads more clearly.
   ========================================================= */
.hero-auto-node.node-impact {
  animation-duration: 780ms !important;
}

.hero-auto-node.node-impact .node-frame {
  animation-duration: 780ms !important;
}

.hero-auto-node.node-impact .node-icon-art {
  animation-duration: 780ms !important;
}

.hero-auto-node.node-impact::after {
  animation-duration: 780ms !important;
}

.node-icon-art.icon-arrive {
  animation-duration: 760ms !important;
}


/* =========================================================
   NODE LABELS — ROUND 41
   Visible text labels below each node.
   ========================================================= */
.hero-auto-node {
  overflow: visible !important;
}

.hero-auto-label {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 144px;
  text-align: center;
  font-family: "Gainsborough Sans", Georgia, serif !important;
  font-size: 15px;
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #0b0f12;
  text-shadow: none;
  white-space: normal;
  z-index: 7;
  pointer-events: none;
}

.automation-flow-stage {
  height: 456px !important;
}

.hero-integrations-panel {
  top: 292px !important;
}

@media (max-width: 1180px) {
  .automation-flow-stage {
    min-width: 920px !important;
    height: 446px !important;
  }
  .hero-integrations-panel {
    top: 286px !important;
  }
  .hero-auto-label {
    width: 136px;
    font-size: 14px;
  }
}

@media (max-width: 720px) {
  .automation-flow-stage {
    min-width: 810px !important;
    height: 430px !important;
  }
  .hero-integrations-panel {
    top: 270px !important;
  }
  .hero-auto-label {
    top: calc(100% + 10px);
    width: 124px;
    font-size: 13px;
  }
}


/* =========================================================
   NODE LABELS + PORT ALIGNMENT — ROUND 42
   Bigger two-line labels and label bounce on node impact.
   ========================================================= */
.hero-auto-label {
  top: calc(100% + 10px) !important;
  width: 118px !important;
  font-size: 17px !important;
  line-height: 0.92 !important;
  letter-spacing: 0 !important;
}

.hero-auto-node.node-impact .hero-auto-label {
  animation: nodeTextImpact 780ms cubic-bezier(.2,.82,.2,1) both !important;
}

@keyframes nodeTextImpact {
  0% {
    transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
  }
  18% {
    transform: translateX(-50%) translateY(2px) scale(.97) rotate(0deg);
  }
  42% {
    transform: translateX(-50%) translateY(-8px) scale(1.11) rotate(calc(var(--impact-tilt) * -1.4));
  }
  66% {
    transform: translateX(-50%) translateY(1px) scale(.99) rotate(calc(var(--impact-tilt) * .55));
  }
  84% {
    transform: translateX(-50%) translateY(-2px) scale(1.03) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
  }
}

@media (max-width: 1180px) {
  .hero-auto-label {
    width: 110px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 720px) {
  .hero-auto-label {
    width: 100px !important;
    font-size: 14px !important;
    line-height: 0.95 !important;
  }
}


/* =========================================================
   INTEGRATIONS PANEL ANIMATION — ROUND 43
   System wake-up sequence for the apps panel.
   ========================================================= */
.hero-integrations-panel {
  transform-origin: center top;
  will-change: transform, border-color, box-shadow, background-color;
}

.hero-integrations-panel.panel-wake {
  animation: panelWakeUp 820ms cubic-bezier(.2,.82,.2,1) both !important;
}

.hero-integrations-panel.panel-final-pop {
  animation: panelFinalPop 900ms cubic-bezier(.2,.82,.2,1) both !important;
}

.integration-port.port-hit {
  animation: integrationPortHit 760ms cubic-bezier(.2,.82,.2,1) both !important;
}

.integration-app {
  transform-origin: center center;
}

.integration-app.app-wake .integration-logo {
  animation: integrationLogoWake 880ms cubic-bezier(.2,.82,.2,1) both !important;
}

.integration-app.app-wake span {
  animation: integrationTextWake 880ms cubic-bezier(.2,.82,.2,1) both !important;
}

@keyframes panelWakeUp {
  0% {
    transform: translateY(0) scale(1);
    border-color: rgba(255,255,255,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }
  18% {
    transform: translateY(4px) scale(.992);
  }
  42% {
    transform: translateY(-5px) scale(1.015);
    border-color: #b6cd4c;
    box-shadow: 0 0 0 2px rgba(182,205,76,.18), inset 0 1px 0 rgba(255,255,255,.04);
  }
  70% {
    transform: translateY(1px) scale(.998);
  }
  100% {
    transform: translateY(0) scale(1);
    border-color: rgba(255,255,255,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }
}

@keyframes panelFinalPop {
  0% {
    transform: translateY(0) scale(1);
    border-color: rgba(255,255,255,.72);
  }
  22% {
    transform: translateY(-2px) scale(1.018);
    border-color: #b6cd4c;
    box-shadow: 0 0 0 2px rgba(182,205,76,.22), inset 0 1px 0 rgba(255,255,255,.04);
  }
  54% {
    transform: translateY(1px) scale(.997);
  }
  100% {
    transform: translateY(0) scale(1);
    border-color: rgba(255,255,255,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }
}

@keyframes integrationPortHit {
  0% {
    transform: translateX(-50%) scale(1);
    background: var(--pink);
  }
  34% {
    transform: translateX(-50%) translateY(-2px) scale(1.28);
    background: #b6cd4c;
  }
  60% {
    transform: translateX(-50%) scale(.98);
  }
  100% {
    transform: translateX(-50%) scale(1);
    background: var(--pink);
  }
}

@keyframes integrationLogoWake {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    box-shadow: 3px 3px 0 var(--ink);
  }
  20% {
    transform: translateY(2px) scale(.96) rotate(0deg);
  }
  42% {
    transform: translateY(-7px) scale(1.12) rotate(-4deg);
    box-shadow: 4px 6px 0 var(--ink);
  }
  66% {
    transform: translateY(1px) scale(.99) rotate(2deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    box-shadow: 3px 3px 0 var(--ink);
  }
}

@keyframes integrationTextWake {
  0% {
    transform: translateY(0) scale(1);
  }
  24% {
    transform: translateY(1px) scale(.98);
  }
  46% {
    transform: translateY(-5px) scale(1.08);
  }
  70% {
    transform: translateY(0) scale(.995);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-integrations-panel.panel-wake,
  .hero-integrations-panel.panel-final-pop,
  .integration-port.port-hit,
  .integration-app.app-wake .integration-logo,
  .integration-app.app-wake span {
    animation: none !important;
  }
}


/* =========================================================
   INTEGRATION ICON BOX REFINEMENT — ROUND 44
   Avoid double panel hit on second branch and use cut-corner boxes.
   ========================================================= */
.integration-logo {
  border-radius: 0 !important;
  clip-path: polygon(
    9px 0,
    calc(100% - 9px) 0,
    100% 9px,
    100% calc(100% - 9px),
    calc(100% - 9px) 100%,
    9px 100%,
    0 calc(100% - 9px),
    0 9px
  ) !important;
}

.integration-logo img,
.integration-logo-chocomenta svg {
  position: relative;
  z-index: 1;
}


/* =========================================================
   FLOW PANEL SPACING REFINEMENT — ROUND 45
   Thicker app-box borders, shorter stage height, panel raised upward.
   ========================================================= */
.integration-logo {
  border-width: 3px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}

.automation-flow-stage {
  height: 432px !important;
}

.hero-integrations-panel {
  top: 278px !important;
}

@media (max-width: 1180px) {
  .automation-flow-stage {
    min-width: 920px !important;
    height: 424px !important;
  }
  .hero-integrations-panel {
    top: 270px !important;
  }
}

@media (max-width: 720px) {
  .automation-flow-stage {
    min-width: 810px !important;
    height: 408px !important;
  }
  .hero-integrations-panel {
    top: 256px !important;
  }
}


/* =========================================================
   FLOW LABEL + INTEGRATION BOX BORDER REFINEMENT — ROUND 46
   Full border on cut corners, plus angled stage tag.
   ========================================================= */
.integration-logo {
  border: 3px solid transparent !important;
  border-radius: 0 !important;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(var(--ink), var(--ink)) border-box !important;
  clip-path: polygon(
    9px 0,
    calc(100% - 9px) 0,
    100% 9px,
    100% calc(100% - 9px),
    calc(100% - 9px) 100%,
    9px 100%,
    0 calc(100% - 9px),
    0 9px
  ) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}

.integration-logo-chocomenta {
  background:
    linear-gradient(var(--mint), var(--mint)) padding-box,
    linear-gradient(var(--ink), var(--ink)) border-box !important;
}

.flow-stage-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  background: var(--blue);
  color: var(--white);
  font-family: "Soin Sans", "Soin Sans Neue", "Soin Sans Pro", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  box-shadow: 5px 5px 0 var(--ink);
  border: 0;
  border-radius: 0;
  pointer-events: none;
}

.hero-auto-grid,
.hero-auto-connectors,
.hero-integrations-panel {
  z-index: 2;
}

@media (max-width: 1180px) {
  .flow-stage-tag {
    top: 16px;
    left: 16px;
    min-height: 40px;
    padding: 8px 13px;
    font-size: 11px;
  }
}

@media (max-width: 720px) {
  .flow-stage-tag {
    top: 14px;
    left: 14px;
    min-height: 36px;
    padding: 7px 11px;
    font-size: 10px;
  }
}


/* =========================================================
   FLOW LABEL + APP BOX BORDER FIX — ROUND 47
   Push tag further into the corner and rebuild app-box borders
   with layered cut-corner shapes so the border is visible
   across the clipped corners.
   ========================================================= */
.flow-stage-tag {
  top: -10px !important;
  left: -12px !important;
  z-index: 5 !important;
}

.integration-logo {
  position: relative !important;
  border: 0 !important;
  background: transparent !important;
  clip-path: none !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  overflow: visible !important;
}

.integration-logo::before,
.integration-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(
    9px 0,
    calc(100% - 9px) 0,
    100% 9px,
    100% calc(100% - 9px),
    calc(100% - 9px) 100%,
    9px 100%,
    0 calc(100% - 9px),
    0 9px
  );
  pointer-events: none;
}

.integration-logo::before {
  background: var(--ink);
  inset: 0;
  z-index: 0;
}

.integration-logo::after {
  background: var(--white);
  inset: 3px;
  z-index: 1;
}

.integration-logo-chocomenta::after {
  background: var(--mint);
}

.integration-logo img,
.integration-logo-chocomenta svg {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 1180px) {
  .flow-stage-tag {
    top: -9px !important;
    left: -10px !important;
  }
}

@media (max-width: 720px) {
  .flow-stage-tag {
    top: -8px !important;
    left: -9px !important;
  }
}


/* =========================================================
   APP BOX BORDER FIX — ROUND 48
   Remove pseudo-layer workaround and use clipped inset shadow border
   so cut corners keep the border without overflow artifacts.
   ========================================================= */
.integration-logo,
.integration-logo::before,
.integration-logo::after {
  clip-path: none !important;
}

.integration-logo::before,
.integration-logo::after {
  content: none !important;
  display: none !important;
}

.integration-logo {
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--white) !important;
  clip-path: polygon(
    9px 0,
    calc(100% - 9px) 0,
    100% 9px,
    100% calc(100% - 9px),
    calc(100% - 9px) 100%,
    9px 100%,
    0 calc(100% - 9px),
    0 9px
  ) !important;
  box-shadow:
    inset 0 0 0 3px var(--ink),
    3px 3px 0 var(--ink) !important;
}

.integration-logo-chocomenta {
  background: var(--mint) !important;
}

.integration-logo img,
.integration-logo-chocomenta svg {
  position: relative !important;
  z-index: 1 !important;
}


/* =========================================================
   INTEGRATIONS PANEL END-STATE FIX — ROUND 49
   Ensure panel always returns to black border and black shadow.
   ========================================================= */
.hero-integrations-panel {
  border: 3px solid var(--ink) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}

@keyframes panelWakeUp {
  0% {
    transform: translateY(0) scale(1);
    border-color: var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
  }
  18% {
    transform: translateY(4px) scale(.992);
  }
  42% {
    transform: translateY(-5px) scale(1.015);
    border-color: #b6cd4c;
    box-shadow: 0 0 0 2px rgba(182,205,76,.18), 6px 6px 0 var(--ink);
  }
  70% {
    transform: translateY(1px) scale(.998);
  }
  100% {
    transform: translateY(0) scale(1);
    border-color: var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
  }
}

@keyframes panelFinalPop {
  0% {
    transform: translateY(0) scale(1);
    border-color: var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
  }
  22% {
    transform: translateY(-2px) scale(1.018);
    border-color: #b6cd4c;
    box-shadow: 0 0 0 2px rgba(182,205,76,.22), 6px 6px 0 var(--ink);
  }
  54% {
    transform: translateY(1px) scale(.997);
  }
  100% {
    transform: translateY(0) scale(1);
    border-color: var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
  }
}


/* =========================================================
   FLOW PANEL DECOR + PORT ALIGNMENT — ROUND 51
   Raise apps panel, better port alignment, add top-right accents.
   ========================================================= */
.automation-flow-stage {
  overflow: visible !important;
}

.hero-integrations-panel {
  top: 264px !important;
}

.integration-port {
  top: -8px !important;
}

.automation-flow-stage::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 84px;
  height: 58px;
  pointer-events: none;
  z-index: 1;
  opacity: .82;
  background-image: radial-gradient(#0b0f12 1.15px, transparent 1.15px);
  background-size: 9px 9px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.flow-stage-tech-lines {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 112px;
  height: 22px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(125deg, transparent 0 34%, #0032eb 34% 42%, transparent 42% 100%) 0 0 / 18px 100% no-repeat,
    linear-gradient(125deg, transparent 0 34%, #0032eb 34% 42%, transparent 42% 100%) 20px 0 / 18px 100% no-repeat,
    linear-gradient(125deg, transparent 0 34%, #0032eb 34% 42%, transparent 42% 100%) 40px 0 / 18px 100% no-repeat,
    linear-gradient(125deg, transparent 0 34%, #0032eb 34% 42%, transparent 42% 100%) 60px 0 / 18px 100% no-repeat,
    linear-gradient(125deg, transparent 0 34%, #0032eb 34% 42%, transparent 42% 100%) 80px 0 / 18px 100% no-repeat;
}

.flow-stage-tag {
  z-index: 5 !important;
  top: -14px !important;
  left: -16px !important;
}

@media (max-width: 1180px) {
  .hero-integrations-panel {
    top: 256px !important;
  }
  .automation-flow-stage::before {
    top: 12px;
    right: 12px;
    width: 76px;
    height: 52px;
    background-size: 8px 8px;
  }
  .flow-stage-tech-lines {
    top: 16px;
    right: 14px;
    width: 98px;
    height: 20px;
  }
}

@media (max-width: 720px) {
  .hero-integrations-panel {
    top: 244px !important;
  }
  .integration-port {
    top: -7px !important;
  }
  .automation-flow-stage::before {
    top: 10px;
    right: 10px;
    width: 64px;
    height: 44px;
    background-size: 8px 8px;
  }
  .flow-stage-tech-lines {
    top: 14px;
    right: 12px;
    width: 82px;
    height: 16px;
  }
  .flow-stage-tag {
    top: -12px !important;
    left: -12px !important;
  }
}


/* =========================================================
   FLOW PANEL DECOR TWEAK — ROUND 52
   Move dotted triangle to top-left behind tag.
   Push blue tech lines right and make them thicker.
   ========================================================= */
.automation-flow-stage::before {
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  width: 92px !important;
  height: 62px !important;
  z-index: 1 !important;
  opacity: .82 !important;
  background-image: radial-gradient(#0b0f12 1.15px, transparent 1.15px) !important;
  background-size: 9px 9px !important;
  clip-path: polygon(0 0, 100% 0, 0 100%) !important;
}

.flow-stage-tag {
  z-index: 5 !important;
}

.flow-stage-tech-lines {
  top: 18px !important;
  right: 8px !important;
  width: 132px !important;
  height: 26px !important;
  z-index: 2 !important;
  background:
    linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 0 0 / 22px 100% no-repeat,
    linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 24px 0 / 22px 100% no-repeat,
    linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 48px 0 / 22px 100% no-repeat,
    linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 72px 0 / 22px 100% no-repeat,
    linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 96px 0 / 22px 100% no-repeat !important;
}

@media (max-width: 1180px) {
  .automation-flow-stage::before {
    top: 10px !important;
    left: 10px !important;
    width: 82px !important;
    height: 56px !important;
    background-size: 8px 8px !important;
  }
  .flow-stage-tech-lines {
    top: 16px !important;
    right: 6px !important;
    width: 116px !important;
    height: 22px !important;
    background:
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 0 0 / 20px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 22px 0 / 20px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 44px 0 / 20px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 66px 0 / 20px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 88px 0 / 20px 100% no-repeat !important;
  }
}

@media (max-width: 720px) {
  .automation-flow-stage::before {
    top: 8px !important;
    left: 8px !important;
    width: 70px !important;
    height: 48px !important;
    background-size: 7px 7px !important;
  }
  .flow-stage-tech-lines {
    top: 14px !important;
    right: 4px !important;
    width: 94px !important;
    height: 18px !important;
    background:
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 0 0 / 16px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 18px 0 / 16px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 36px 0 / 16px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 54px 0 / 16px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 72px 0 / 16px 100% no-repeat !important;
  }
}


/* =========================================================
   FLOW PANEL DECOR TWEAK — ROUND 53
   Move blue tech lines more right, a bit higher, and closer together.
   ========================================================= */
.flow-stage-tech-lines {
  top: 12px !important;
  right: -2px !important;
  width: 118px !important;
  height: 24px !important;
  background:
    linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 0 0 / 20px 100% no-repeat,
    linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 18px 0 / 20px 100% no-repeat,
    linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 36px 0 / 20px 100% no-repeat,
    linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 54px 0 / 20px 100% no-repeat,
    linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 72px 0 / 20px 100% no-repeat !important;
}

@media (max-width: 1180px) {
  .flow-stage-tech-lines {
    top: 11px !important;
    right: -2px !important;
    width: 104px !important;
    height: 21px !important;
    background:
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 0 0 / 18px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 16px 0 / 18px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 32px 0 / 18px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 48px 0 / 18px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 64px 0 / 18px 100% no-repeat !important;
  }
}

@media (max-width: 720px) {
  .flow-stage-tech-lines {
    top: 10px !important;
    right: -1px !important;
    width: 84px !important;
    height: 17px !important;
    background:
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 0 0 / 14px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 12px 0 / 14px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 24px 0 / 14px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 36px 0 / 14px 100% no-repeat,
      linear-gradient(125deg, transparent 0 28%, #0032eb 28% 46%, transparent 46% 100%) 48px 0 / 14px 100% no-repeat !important;
  }
}


/* =========================================================
   FLOW PANEL FUTURISTIC LINES — ROUND 54
   Top-right: further right and tighter spacing.
   Bottom-right: mirrored mint version.
   ========================================================= */
.flow-stage-tech-lines {
  top: 10px !important;
  right: -10px !important;
  width: 104px !important;
  height: 24px !important;
  background:
    linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 0 0 / 18px 100% no-repeat,
    linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 14px 0 / 18px 100% no-repeat,
    linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 28px 0 / 18px 100% no-repeat,
    linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 42px 0 / 18px 100% no-repeat,
    linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 56px 0 / 18px 100% no-repeat !important;
}

.flow-stage-tech-lines-bottom {
  top: auto !important;
  bottom: 14px !important;
  right: -10px !important;
  width: 104px !important;
  height: 24px !important;
  background:
    linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 0 0 / 18px 100% no-repeat,
    linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 14px 0 / 18px 100% no-repeat,
    linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 28px 0 / 18px 100% no-repeat,
    linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 42px 0 / 18px 100% no-repeat,
    linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 56px 0 / 18px 100% no-repeat !important;
}

@media (max-width: 1180px) {
  .flow-stage-tech-lines {
    top: 9px !important;
    right: -8px !important;
    width: 92px !important;
    height: 21px !important;
    background:
      linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 0 0 / 16px 100% no-repeat,
      linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 12px 0 / 16px 100% no-repeat,
      linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 24px 0 / 16px 100% no-repeat,
      linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 36px 0 / 16px 100% no-repeat,
      linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 48px 0 / 16px 100% no-repeat !important;
  }
  .flow-stage-tech-lines-bottom {
    bottom: 12px !important;
    right: -8px !important;
    width: 92px !important;
    height: 21px !important;
    background:
      linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 0 0 / 16px 100% no-repeat,
      linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 12px 0 / 16px 100% no-repeat,
      linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 24px 0 / 16px 100% no-repeat,
      linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 36px 0 / 16px 100% no-repeat,
      linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 48px 0 / 16px 100% no-repeat !important;
  }
}

@media (max-width: 720px) {
  .flow-stage-tech-lines {
    top: 8px !important;
    right: -6px !important;
    width: 74px !important;
    height: 17px !important;
    background:
      linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 0 0 / 13px 100% no-repeat,
      linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 10px 0 / 13px 100% no-repeat,
      linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 20px 0 / 13px 100% no-repeat,
      linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 30px 0 / 13px 100% no-repeat,
      linear-gradient(125deg, transparent 0 26%, #0032eb 26% 48%, transparent 48% 100%) 40px 0 / 13px 100% no-repeat !important;
  }
  .flow-stage-tech-lines-bottom {
    bottom: 10px !important;
    right: -6px !important;
    width: 74px !important;
    height: 17px !important;
    background:
      linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 0 0 / 13px 100% no-repeat,
      linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 10px 0 / 13px 100% no-repeat,
      linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 20px 0 / 13px 100% no-repeat,
      linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 30px 0 / 13px 100% no-repeat,
      linear-gradient(55deg, transparent 0 26%, #07c296 26% 48%, transparent 48% 100%) 40px 0 / 13px 100% no-repeat !important;
  }
}


/* =========================================================
   FLOW PANEL FUTURISTIC LINES — ROUND 55
   Replace pointed gradient wedges with flat-ended slanted bars.
   ========================================================= */
.flow-stage-tech-lines,
.flow-stage-tech-lines-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  background: none !important;
}

.flow-stage-tech-lines span,
.flow-stage-tech-lines-bottom span {
  display: block !important;
  width: 17px !important;
  height: 5px !important;
  border-radius: 0 !important;
  flex: 0 0 auto !important;
}

.flow-stage-tech-lines span {
  background: #0032eb !important;
  transform: skewX(-34deg) !important;
}

.flow-stage-tech-lines-bottom span {
  background: #07c296 !important;
  transform: skewX(34deg) !important;
}

@media (max-width: 1180px) {
  .flow-stage-tech-lines,
  .flow-stage-tech-lines-bottom {
    gap: 4px !important;
  }
  .flow-stage-tech-lines span,
  .flow-stage-tech-lines-bottom span {
    width: 15px !important;
    height: 4px !important;
  }
}

@media (max-width: 720px) {
  .flow-stage-tech-lines,
  .flow-stage-tech-lines-bottom {
    gap: 3px !important;
  }
  .flow-stage-tech-lines span,
  .flow-stage-tech-lines-bottom span {
    width: 12px !important;
    height: 4px !important;
  }
}


/* =========================================================
   FLOW PANEL FUTURISTIC LINES — ROUND 56
   Keep lines inside the box, shifted left, and make them taller.
   ========================================================= */
.flow-stage-tech-lines {
  top: 10px !important;
  right: 14px !important;
  width: 96px !important;
  height: 30px !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

.flow-stage-tech-lines-bottom {
  bottom: 14px !important;
  right: 14px !important;
  width: 96px !important;
  height: 30px !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

.flow-stage-tech-lines span,
.flow-stage-tech-lines-bottom span {
  width: 16px !important;
  height: 8px !important;
}

@media (max-width: 1180px) {
  .flow-stage-tech-lines {
    top: 9px !important;
    right: 12px !important;
    width: 88px !important;
    height: 26px !important;
    gap: 4px !important;
  }
  .flow-stage-tech-lines-bottom {
    bottom: 12px !important;
    right: 12px !important;
    width: 88px !important;
    height: 26px !important;
    gap: 4px !important;
  }
  .flow-stage-tech-lines span,
  .flow-stage-tech-lines-bottom span {
    width: 14px !important;
    height: 7px !important;
  }
}

@media (max-width: 720px) {
  .flow-stage-tech-lines {
    top: 8px !important;
    right: 10px !important;
    width: 72px !important;
    height: 22px !important;
    gap: 3px !important;
  }
  .flow-stage-tech-lines-bottom {
    bottom: 10px !important;
    right: 10px !important;
    width: 72px !important;
    height: 22px !important;
    gap: 3px !important;
  }
  .flow-stage-tech-lines span,
  .flow-stage-tech-lines-bottom span {
    width: 11px !important;
    height: 6px !important;
  }
}


/* =========================================================
   FLOW PANEL FUTURISTIC LINES — ROUND 57
   Double bar height and enforce blue on top / mint on bottom.
   ========================================================= */
.flow-stage-tech-lines:not(.flow-stage-tech-lines-bottom) {
  top: 10px !important;
  bottom: auto !important;
  right: 14px !important;
  width: 96px !important;
  height: 34px !important;
}

.flow-stage-tech-lines-bottom {
  top: auto !important;
  bottom: 14px !important;
  right: 14px !important;
  width: 96px !important;
  height: 34px !important;
}

.flow-stage-tech-lines:not(.flow-stage-tech-lines-bottom) span {
  background: #0032eb !important;
  transform: skewX(-34deg) !important;
  width: 16px !important;
  height: 16px !important;
}

.flow-stage-tech-lines-bottom span {
  background: #07c296 !important;
  transform: skewX(34deg) !important;
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 1180px) {
  .flow-stage-tech-lines:not(.flow-stage-tech-lines-bottom) {
    top: 9px !important;
    right: 12px !important;
    width: 88px !important;
    height: 30px !important;
  }
  .flow-stage-tech-lines-bottom {
    bottom: 12px !important;
    right: 12px !important;
    width: 88px !important;
    height: 30px !important;
  }
  .flow-stage-tech-lines:not(.flow-stage-tech-lines-bottom) span,
  .flow-stage-tech-lines-bottom span {
    width: 14px !important;
    height: 14px !important;
  }
}

@media (max-width: 720px) {
  .flow-stage-tech-lines:not(.flow-stage-tech-lines-bottom) {
    top: 8px !important;
    right: 10px !important;
    width: 72px !important;
    height: 24px !important;
  }
  .flow-stage-tech-lines-bottom {
    bottom: 10px !important;
    right: 10px !important;
    width: 72px !important;
    height: 24px !important;
  }
  .flow-stage-tech-lines:not(.flow-stage-tech-lines-bottom) span,
  .flow-stage-tech-lines-bottom span {
    width: 11px !important;
    height: 12px !important;
  }
}


/* =========================================================
   FLOW PANEL CORNER DECOR — ROUND 58
   Replace futuristic line sets with a solid chip and geometric block.
   ========================================================= */
.flow-stage-tech-lines,
.flow-stage-tech-lines-bottom {
  display: none !important;
}

.flow-stage-chip {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 2;
  width: 86px;
  height: 40px;
  background: #0032eb;
  box-shadow: 5px 5px 0 var(--ink);
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.flow-stage-chip span {
  width: 8px;
  height: 8px;
  background: var(--ink);
  flex: 0 0 auto;
}

.flow-stage-diamond-wrap {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 58px;
  height: 58px;
  z-index: 2;
  pointer-events: none;
}

.flow-stage-diamond-shadow,
.flow-stage-diamond,
.flow-stage-diamond-accent {
  position: absolute;
}

.flow-stage-diamond-shadow {
  width: 38px;
  height: 38px;
  right: 5px;
  bottom: 3px;
  background: var(--ink);
  transform: rotate(45deg);
}

.flow-stage-diamond {
  width: 38px;
  height: 38px;
  right: 9px;
  bottom: 7px;
  background: #07c296;
  border: 3px solid var(--ink);
  transform: rotate(45deg);
}

.flow-stage-diamond-accent {
  width: 12px;
  height: 12px;
  right: 0;
  bottom: 0;
  background: var(--ink);
}

@media (max-width: 1180px) {
  .flow-stage-chip {
    top: 12px;
    right: 10px;
    width: 76px;
    height: 36px;
    gap: 6px;
  }
  .flow-stage-chip span {
    width: 7px;
    height: 7px;
  }
  .flow-stage-diamond-wrap {
    right: 12px;
    bottom: 10px;
    width: 52px;
    height: 52px;
  }
  .flow-stage-diamond-shadow,
  .flow-stage-diamond {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 720px) {
  .flow-stage-chip {
    top: 10px;
    right: 8px;
    width: 62px;
    height: 30px;
    gap: 5px;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .flow-stage-chip span {
    width: 6px;
    height: 6px;
  }
  .flow-stage-diamond-wrap {
    right: 10px;
    bottom: 8px;
    width: 46px;
    height: 46px;
  }
  .flow-stage-diamond-shadow,
  .flow-stage-diamond {
    width: 30px;
    height: 30px;
  }
  .flow-stage-diamond {
    border-width: 2px;
  }
  .flow-stage-diamond-accent {
    width: 10px;
    height: 10px;
  }
}


/* =========================================================
   FLOW PANEL CORNER DECOR — ROUND 59
   Replace corner chip/diamond with window-style circles.
   ========================================================= */
.flow-stage-chip,
.flow-stage-diamond-wrap {
  display: none !important;
}

.flow-stage-window-dots {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.flow-stage-window-dots span {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  display: block;
}

.flow-stage-window-dots span:nth-child(1) {
  background: #ff5f57;
}

.flow-stage-window-dots span:nth-child(2) {
  background: #febc2e;
}

.flow-stage-window-dots span:nth-child(3) {
  background: #28c840;
}

@media (max-width: 1180px) {
  .flow-stage-window-dots {
    top: 16px;
    right: 16px;
    gap: 8px;
  }

  .flow-stage-window-dots span {
    width: 13px;
    height: 13px;
  }
}

@media (max-width: 720px) {
  .flow-stage-window-dots {
    top: 14px;
    right: 14px;
    gap: 7px;
  }

  .flow-stage-window-dots span {
    width: 11px;
    height: 11px;
    border-width: 2px;
    box-shadow: 1px 1px 0 var(--ink);
  }
}


/* =========================================================
   FLOW PANEL WINDOW DOTS POSITION — ROUND 60
   Move top-right window dots slightly higher.
   ========================================================= */
.flow-stage-window-dots {
  top: 10px !important;
}

@media (max-width: 1180px) {
  .flow-stage-window-dots {
    top: 10px !important;
  }
}

@media (max-width: 720px) {
  .flow-stage-window-dots {
    top: 9px !important;
  }
}


/* =========================================================
   APP BOX SHAPE REFINEMENT — ROUND 62
   Return app boxes to regular rectangles with subtle rounded corners.
   ========================================================= */
.integration-logo,
.integration-logo::before,
.integration-logo::after {
  clip-path: none !important;
}

.integration-logo::before,
.integration-logo::after {
  content: none !important;
  display: none !important;
}

.integration-logo {
  overflow: hidden !important;
  border: 3px solid var(--ink) !important;
  border-radius: 6px !important;
  background: var(--white) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}


/* =========================================================
   HEADER BADGE + APPS PANEL CORNERS — ROUND 63
   Add small yellow badge beside the logo and subtly round apps panel.
   ========================================================= */
.hero-integrations-panel {
  border-radius: 8px !important;
}

.brand-banner-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  background: #ffd64d;
  color: var(--ink);
  font-family: "Soin Sans", "Soin Sans Neue", "Soin Sans Pro", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: none;
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
}

.nav-shell {
  align-items: center !important;
}

@media (max-width: 1180px) {
  .brand-banner-badge {
    font-size: 10px;
    min-height: 32px;
    padding: 7px 10px;
  }
}

@media (max-width: 920px) {
  .brand-banner-badge {
    display: none !important;
  }
}


/* =========================================================
   STATEMENT STRIP — CUSTOM BLACK SYSTEM SECTION
   ========================================================= */
.statement-strip {
  padding: 44px 0 50px !important;
  background: transparent !important;
  color: var(--white) !important;
  border: 0 !important;
}

.statement-shell {
  position: relative;
  background: #050505;
  overflow: hidden;
}

.statement-shell::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,.82);
  pointer-events: none;
}

.statement-frame {
  position: relative;
  padding: 52px 58px 46px;
}

.statement-top {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr);
  gap: 42px;
  align-items: center;
}

.statement-heading-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.statement-bolt {
  flex: 0 0 clamp(74px, 7vw, 118px);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ddb9;
}

.statement-bolt svg {
  width: 100%;
  height: clamp(130px, 15vw, 205px);
  display: block;
  fill: currentColor;
}

.statement-heading-copy {
  min-width: 0;
}

.statement-kicker {
  margin: 0 0 8px;
  color: #fff;
  font-family: "Gainsborough Sans", Georgia, serif !important;
  font-size: clamp(34px, 4.2vw, 70px);
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.statement-heading-copy h2 {
  margin: 0;
  font-family: "Gainsborough Sans", Georgia, serif !important;
  font-size: clamp(34px, 4.2vw, 70px);
  font-weight: 400 !important;
  line-height: .9;
  letter-spacing: -.035em;
}

.statement-heading-copy h2 span {
  display: block;
  color: #00ddb9 !important;
}

.statement-copy {
  max-width: 410px;
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1.72;
}

.statement-process-box {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 36px;
  background: transparent;
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
  border: 1px solid rgba(255,255,255,.28);
}

.statement-step {
  position: relative;
  min-width: 0;
  min-height: 212px;
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  border-right: 1px dashed rgba(255,255,255,.62);
}

.statement-step:last-child {
  border-right: 0;
}

.statement-step-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}

.statement-step-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.statement-step-icon-play svg path:last-child {
  fill: currentColor;
  stroke: currentColor;
}

.statement-step-icon-eye { color: #b17cff; }
.statement-step-icon-link { color: #63f5e2; }
.statement-step-icon-play { color: #b8f4a7; }
.statement-step-icon-bell { color: #ff9a42; }

.statement-step h3 {
  margin: 0;
  color: #fff !important;
  font-family: "Soin Sans", "Soin Sans Neue", "Soin Sans Pro", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.statement-step p {
  max-width: 210px;
  margin: 10px 0 0;
  color: rgba(255,255,255,.82) !important;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 1180px) {
  .statement-frame {
    padding: 48px 42px 42px;
  }

  .statement-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .statement-copy {
    max-width: 760px;
  }

  .statement-process-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statement-step:nth-child(2) {
    border-right: 0;
  }

  .statement-step:nth-child(-n+2) {
    border-bottom: 1px dashed rgba(255,255,255,.62);
  }
}

@media (max-width: 720px) {
  .statement-strip {
    padding: 24px 0 34px !important;
  }

  .statement-shell::before {
    inset: 10px;
  }

  .statement-frame {
    padding: 32px 24px 28px;
  }

  .statement-heading-wrap {
    gap: 18px;
    align-items: flex-start;
  }

  .statement-bolt {
    flex-basis: 52px;
  }

  .statement-bolt svg {
    height: 108px;
  }

  .statement-kicker,
  .statement-heading-copy h2 {
    font-size: clamp(28px, 9vw, 42px);
  }

  .statement-copy {
    font-size: 15px;
    line-height: 1.66;
  }

  .statement-process-box {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .statement-step,
  .statement-step:nth-child(2) {
    min-height: auto;
    padding: 24px 22px 22px;
    border-right: 0;
    border-bottom: 1px dashed rgba(255,255,255,.62);
  }

  .statement-step:last-child {
    border-bottom: 0;
  }

  .statement-step h3 {
    font-size: 18px;
  }

  .statement-step p {
    max-width: none;
    font-size: 14px;
  }
}


/* =========================================================
   STATEMENT STRIP — ROUND 2 LAYOUT REFINEMENT
   ========================================================= */
.statement-strip {
  padding: 22px 0 34px !important;
  background: transparent !important;
  color: var(--white) !important;
  border: 0 !important;
}

.statement-strip > .container {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.statement-shell {
  position: relative;
  width: 100%;
  background: #050505;
  border-radius: 10px;
  overflow: hidden;
}

.statement-shell::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 8px;
  pointer-events: none;
}

.statement-frame {
  position: relative;
  width: min(1280px, calc(100% - 56px));
  margin: 0 auto;
  padding: 48px 8px 44px;
}

.statement-layout {
  display: grid;
  grid-template-columns: minmax(340px, .95fr) minmax(0, 1.55fr);
  gap: 44px;
  align-items: start;
}

.statement-heading-wrap {
  display: flex;
  align-items: center;
  gap: 26px;
  min-width: 0;
}

.statement-bolt {
  flex: 0 0 clamp(74px, 6.4vw, 104px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.statement-bolt-image {
  width: 100%;
  height: auto;
  display: block;
}

.statement-heading-copy {
  min-width: 0;
}

.statement-kicker {
  margin: 0 0 8px;
  color: #fff;
  font-family: "Gainsborough Sans", Georgia, serif !important;
  font-size: clamp(34px, 4vw, 68px);
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.statement-heading-copy h2 {
  margin: 0;
  font-family: "Gainsborough Sans", Georgia, serif !important;
  font-size: clamp(34px, 4vw, 68px);
  font-weight: 400 !important;
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.statement-heading-copy h2 span {
  display: block;
  color: #00ddb9 !important;
}

.statement-info-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.statement-copy {
  max-width: 560px;
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1.72;
}

.statement-process-box {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: transparent;
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
  border: 1px solid rgba(255,255,255,.32);
}

.statement-step {
  position: relative;
  min-width: 0;
  min-height: 188px;
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  border-right: 1px dashed rgba(255,255,255,.62);
}

.statement-step:last-child {
  border-right: 0;
}

.statement-step-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.statement-step-icon svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.statement-step-icon-play svg path:last-child {
  fill: currentColor;
  stroke: currentColor;
}

.statement-step-icon-eye { color: #b17cff; }
.statement-step-icon-link { color: #63f5e2; }
.statement-step-icon-play { color: #b8f4a7; }
.statement-step-icon-bell { color: #ff9a42; }

.statement-step h3 {
  margin: 0;
  color: #fff !important;
  font-family: "Soin Sans", "Soin Sans Neue", "Soin Sans Pro", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.statement-step p {
  max-width: 205px;
  margin: 10px 0 0;
  color: rgba(255,255,255,.82) !important;
  font-size: 14px;
  line-height: 1.58;
}

@media (max-width: 1240px) {
  .statement-frame {
    width: min(1180px, calc(100% - 40px));
    padding: 42px 0 38px;
  }

  .statement-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .statement-copy {
    max-width: 760px;
  }

  .statement-process-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statement-step:nth-child(2) {
    border-right: 0;
  }

  .statement-step:nth-child(-n+2) {
    border-bottom: 1px dashed rgba(255,255,255,.62);
  }
}

@media (max-width: 720px) {
  .statement-strip {
    padding: 16px 0 28px !important;
  }

  .statement-shell {
    border-radius: 8px;
  }

  .statement-shell::before {
    inset: 10px;
    border-width: 2px;
    border-radius: 6px;
  }

  .statement-frame {
    width: calc(100% - 24px);
    padding: 28px 0 24px;
  }

  .statement-heading-wrap {
    gap: 16px;
    align-items: flex-start;
  }

  .statement-bolt {
    flex-basis: 54px;
  }

  .statement-kicker,
  .statement-heading-copy h2 {
    font-size: clamp(27px, 9vw, 40px);
  }

  .statement-copy {
    font-size: 15px;
    line-height: 1.64;
  }

  .statement-process-box {
    grid-template-columns: 1fr;
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  }

  .statement-step,
  .statement-step:nth-child(2) {
    min-height: auto;
    padding: 22px 18px 20px;
    border-right: 0;
    border-bottom: 1px dashed rgba(255,255,255,.62);
  }

  .statement-step:last-child {
    border-bottom: 0;
  }

  .statement-step h3 {
    font-size: 18px;
  }

  .statement-step p {
    max-width: none;
    font-size: 14px;
  }
}

/* =========================================================
   STATEMENT STRIP — ROUND 3 SIDE-BY-SIDE PARAGRAPH + PROCESS
   ========================================================= */
.statement-frame {
  width: min(1400px, calc(100% - 56px));
}

.statement-layout {
  grid-template-columns: minmax(330px, .88fr) minmax(0, 1.62fr);
  gap: 48px;
  align-items: center;
}

.statement-heading-wrap {
  align-items: center;
}

.statement-info-column {
  display: grid;
  grid-template-columns: minmax(270px, .62fr) minmax(0, 1.38fr);
  gap: 24px;
  align-items: start;
}

.statement-copy {
  max-width: none;
  align-self: start;
  padding-top: 6px;
}

.statement-process-box {
  margin-top: 0;
  min-width: 0;
}

.statement-step {
  min-height: 176px;
  padding: 24px 18px 20px;
}

.statement-step-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
}

.statement-step-icon-image {
  width: 36px;
  height: 36px;
  display: block;
  object-fit: contain;
}

.statement-step-icon svg {
  width: 34px;
  height: 34px;
}

.statement-step h3 {
  font-size: 18px;
}

.statement-step p {
  max-width: none;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1320px) {
  .statement-frame {
    width: min(1280px, calc(100% - 40px));
  }

  .statement-layout {
    grid-template-columns: minmax(280px, .82fr) minmax(0, 1.68fr);
    gap: 34px;
  }

  .statement-info-column {
    grid-template-columns: minmax(240px, .56fr) minmax(0, 1.44fr);
    gap: 20px;
  }

  .statement-step {
    padding: 22px 14px 18px;
  }
}

@media (max-width: 1180px) {
  .statement-layout {
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
  }

  .statement-info-column {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .statement-process-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statement-step:nth-child(2) {
    border-right: 0;
  }

  .statement-step:nth-child(-n+2) {
    border-bottom: 1px dashed rgba(255,255,255,.62);
  }
}

@media (max-width: 720px) {
  .statement-frame {
    width: calc(100% - 24px);
  }

  .statement-info-column {
    grid-template-columns: 1fr;
  }

  .statement-process-box {
    grid-template-columns: 1fr;
  }

  .statement-step,
  .statement-step:nth-child(2) {
    border-right: 0;
    border-bottom: 1px dashed rgba(255,255,255,.62);
  }

  .statement-step:last-child {
    border-bottom: 0;
  }
}

/* =========================================================
   STATEMENT STRIP — ROUND 4 LIGHTNING + CENTERED ICONS + FULL DIVIDERS
   ========================================================= */
.statement-layout {
  align-items: stretch;
}

.statement-heading-wrap {
  height: 100%;
  align-items: center;
}

.statement-bolt {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 100%;
  padding: 2px 0;
}

.statement-bolt-image {
  width: auto;
  height: 100%;
  max-width: 132px;
  object-fit: contain;
}

.statement-step {
  align-items: center;
  text-align: center;
  border-right: 0;
  border-bottom: 0;
}

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

/* desktop vertical dividers */
.statement-step:not(:last-child)::after {
  top: 0;
  bottom: 0;
  right: 0;
  border-right: 1px dashed rgba(255,255,255,.62);
}

.statement-step-icon {
  margin-left: auto;
  margin-right: auto;
}

.statement-step p {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1320px) {
  .statement-bolt-image {
    max-width: 122px;
  }
}

@media (max-width: 1180px) {
  .statement-bolt {
    min-height: 220px;
  }

  .statement-step::after,
  .statement-step::before {
    content: none;
  }

  /* 2-column layout dividers */
  .statement-step:nth-child(odd)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    border-right: 1px dashed rgba(255,255,255,.62);
    pointer-events: none;
  }

  .statement-step:nth-child(-n+2)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px dashed rgba(255,255,255,.62);
    pointer-events: none;
  }
}

@media (max-width: 720px) {
  .statement-bolt {
    min-height: 160px;
  }

  .statement-bolt-image {
    max-width: 94px;
  }

  .statement-step::after,
  .statement-step::before {
    content: none;
  }

  .statement-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px dashed rgba(255,255,255,.62);
    pointer-events: none;
  }
}

/* =========================================================
   STATEMENT STRIP — ROUND 5 SHORTER INTERNAL DIVIDERS
   ========================================================= */
.statement-step:not(:last-child)::after {
  top: 18px;
  bottom: 18px;
}

@media (max-width: 1180px) {
  .statement-step:nth-child(odd)::after {
    top: 18px;
    bottom: 18px;
  }

  .statement-step:nth-child(-n+2)::before {
    left: 18px;
    right: 18px;
  }
}

@media (max-width: 720px) {
  .statement-step:not(:last-child)::before {
    left: 18px;
    right: 18px;
  }
}

/* =========================================================
   STATEMENT STRIP — ROUND 6 NEON ICONS + VERTICAL CENTERING
   ========================================================= */
.statement-info-column {
  align-self: center;
  align-content: center;
  justify-content: center;
  min-height: 100%;
}

.statement-copy {
  align-self: center;
}

.statement-process-box {
  align-self: center;
}

@media (max-width: 1180px) {
  .statement-info-column {
    align-self: stretch;
    justify-content: flex-start;
    min-height: auto;
  }

  .statement-copy,
  .statement-process-box {
    align-self: stretch;
  }
}

/* =========================================================
   STATEMENT STRIP — ROUND 7 SMALLER COPY + COLOR-MATCH TITLES
   ========================================================= */
.statement-copy {
  font-size: 16.5px;
  line-height: 1.66;
}

.statement-step-icon-eye + h3 {
  color: #cf5dff !important;
}

.statement-step-icon-link + h3 {
  color: #1affe1 !important;
}

.statement-step-icon-play + h3 {
  color: #d8ff73 !important;
}

.statement-step-icon-bell + h3 {
  color: #ffb31f !important;
}

/* =========================================================
   STATEMENT STRIP — ROUND 8 KICKER LETTER-SPACING
   ========================================================= */
.statement-kicker {
  letter-spacing: 0.015em;
}


/* =========================================================
   STATEMENT STRIP — ROUND 9 PERIOD + REMOVE TOP GAP
   ========================================================= */
.statement-strip {
  padding-top: 0 !important;
}


/* =========================================================
   AUTOMATION SECTION — CLEAN REBUILD
   ========================================================= */
.automation-section {
  padding: 0 0 72px !important;
  background: var(--paper) !important;
  border-bottom: 5px solid var(--ink);
}

.automation-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.automation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 66px;
  padding: 14px 26px 12px;
  color: var(--ink);
  background: #00ddb9;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--ink);
  font-family: "Gainsborough Sans", Georgia, serif !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  font-weight: 400 !important;
  line-height: .95;
  letter-spacing: .012em;
  text-transform: uppercase;
}

.automation-cards.usecase-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.automation-card.usecase-card {
  position: relative;
  min-width: 0;
  min-height: 338px;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  overflow: visible !important;
}

.automation-card.usecase-card::before,
.automation-card.usecase-card::after {
  content: none !important;
}

.automation-card-shadow {
  position: absolute;
  inset: 0;
  transform: translate(10px, 10px);
  background: #0b0f12;
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
  z-index: 0;
  pointer-events: none;
}

.automation-card-inner {
  position: relative;
  z-index: 1;
  min-height: 338px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: #0b0f12;
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
}

.automation-card-inner::before {
  content: "";
  position: absolute;
  inset: 5px;
  background: #fff;
  clip-path: polygon(19px 0, 100% 0, 100% 100%, 0 100%, 0 19px);
  z-index: 0;
  pointer-events: none;
}

.automation-card-inner > * {
  position: relative;
  z-index: 1;
}

.automation-node {
  position: relative;
  width: 92px !important;
  height: 92px !important;
  margin: 0 0 22px !important;
  display: grid !important;
  place-items: center;
  color: var(--node-accent);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}

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

.automation-node::before {
  inset: 0;
  background: var(--node-accent);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}

.automation-node::after {
  inset: 5px;
  background: #050505;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
}

.automation-node-image {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: block;
  object-fit: contain;
}

.automation-card-mint { --node-accent: #00ddb9; }
.automation-card-purple { --node-accent: #bc67ff; }
.automation-card-lime { --node-accent: #c7dd4b; }
.automation-card-orange { --node-accent: #ff8d31; }
.automation-card-blue { --node-accent: #1a63ff; }

.automation-card-mint .automation-node-image {
  width: 46px;
  height: 46px;
}

.automation-card-orange .automation-node-image,
.automation-card-blue .automation-node-image {
  width: 40px;
  height: 40px;
}

.automation-card h3 {
  margin: 0;
  color: var(--ink) !important;
  font-family: "Soin Sans", "Soin Sans Neue", "Soin Sans Pro", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.automation-card p {
  margin: 12px 0 0;
  color: var(--ink) !important;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1320px) {
  .automation-cards.usecase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .automation-card.usecase-card,
  .automation-card-inner {
    min-height: 320px;
  }
}

@media (max-width: 920px) {
  .automation-section { padding-bottom: 54px !important; }
  .automation-cards.usecase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .automation-card.usecase-card,
  .automation-card-inner { min-height: 0; }
}

@media (max-width: 640px) {
  .automation-wrap { gap: 14px; }
  .automation-badge {
    min-height: 56px;
    padding: 12px 18px 10px;
    font-size: clamp(18px, 7.5vw, 24px) !important;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .automation-cards.usecase-grid { grid-template-columns: 1fr; }
  .automation-card-shadow { transform: translate(7px, 7px); }
  .automation-card-inner { padding: 24px 20px 22px; }
  .automation-card h3 { font-size: 18px; }
}


/* =========================================================
   AUTOMATION SECTION — ROUND 14 CUSTOM OPENING QUESTION MARK
   ========================================================= */
.automation-badge {
  gap: 0.08em;
}

.automation-badge-open {
  display: inline-block;
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  line-height: 1;
  transform: rotate(180deg) translateY(0.01em);
  transform-origin: center;
  margin-right: 0.02em;
}

.automation-badge-text {
  display: inline-block;
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  line-height: 1;
}


/* =========================================================
   IDEAS EN ACCION — AJUSTES RONDA 1 (v88)
   Solo se modifica esta seccion.
   ========================================================= */
.examples-intro {
  position: sticky;
  top: 120px;
}

.examples-intro .eyebrow {
  width: 100%;
  margin: 0 0 24px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--ink) !important;
  font-family: "Gainsborough Sans", Georgia, serif !important;
  font-size: clamp(42px, 4.2vw, 70px) !important;
  line-height: .9;
  letter-spacing: -.035em !important;
  text-transform: none;
}

.examples-intro .eyebrow .eyebrow-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  box-shadow: none;
}

.examples-intro h2 {
  max-width: 520px;
  margin: 0;
  color: var(--ink);
  font-family: "Gainsborough Sans", Georgia, serif !important;
  font-size: clamp(56px, 5.1vw, 88px) !important;
  font-weight: 400 !important;
  line-height: .92 !important;
  letter-spacing: -.04em !important;
  text-transform: none !important;
}

.examples-intro .button {
  margin-top: 34px;
}

.pipeline-card {
  padding: 30px 32px 28px;
}

.pipeline-title h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink) !important;
  font-family: "Soin Sans", "Soin Sans Neue", "Soin Sans Pro", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(23px, 2vw, 30px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: -.03em !important;
  text-transform: uppercase;
}

.pipeline-title h3::before {
  content: "•";
  display: inline-block;
  font-size: 1.18em;
  line-height: 1;
}

.examples-stack .pipeline-card:nth-child(1) .pipeline-title h3::before {
  color: var(--mint);
}

.examples-stack .pipeline-card:nth-child(2) .pipeline-title h3::before {
  color: #8a4df2;
}

.examples-stack .pipeline-card:nth-child(3) .pipeline-title h3::before {
  color: #b6cd4c;
}

.pipeline-copy {
  margin-top: 16px;
  color: var(--ink) !important;
}

.pipeline {
  margin-top: 28px;
  gap: 10px;
}

.pipeline-step {
  text-align: center;
}

.pipeline-step > span {
  margin-top: 8px;
  color: var(--ink) !important;
  font-family: "Soin Sans", "Soin Sans Neue", "Soin Sans Pro", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: normal;
}

.pipeline-arrow {
  color: var(--ink) !important;
  font-size: 26px;
  font-weight: 900;
}

.app-chip,
.pipeline-step .app-chip,
.pipeline-step .ai-chip,
.pipeline-step .calendar-chip,
.pipeline-step .delivery-chip,
.pipeline-step .followup-chip,
.pipeline-step .insight-chip,
.pipeline-step .offer-chip,
.pipeline-step .qualify-chip,
.pipeline-step .script-chip,
.pipeline-step .trend-chip {
  width: auto !important;
  height: auto !important;
  margin-inline: auto;
  padding: 0 !important;
  display: grid;
  place-items: center;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.app-chip svg {
  width: 36px !important;
  height: 36px;
  stroke-width: 2.2;
}

.pipeline-step:hover .app-chip {
  transform: none;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.pipeline-step:hover .app-chip svg {
  transform: none;
  filter: none;
}

.pipeline-step:hover > span {
  color: var(--ink) !important;
  transform: none;
}

@media (max-width: 1180px) {
  .examples-intro {
    position: static;
  }

  .examples-intro .eyebrow {
    font-size: clamp(36px, 7vw, 56px) !important;
  }

  .examples-intro h2 {
    max-width: 700px;
    font-size: clamp(50px, 8vw, 74px) !important;
  }
}

@media (max-width: 620px) {
  .examples-intro .eyebrow {
    gap: 10px;
    margin-bottom: 18px;
    font-size: clamp(30px, 10vw, 42px) !important;
  }

  .examples-intro .eyebrow .eyebrow-dot {
    width: 10px;
    height: 10px;
    flex-basis: 10px;
  }

  .examples-intro h2 {
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .94 !important;
  }

  .pipeline-card {
    padding: 24px 18px;
  }

  .pipeline-title h3 {
    gap: 8px;
    font-size: 22px !important;
  }

  .pipeline {
    grid-template-columns: repeat(7, minmax(76px, auto));
    gap: 8px;
  }

  .app-chip svg {
    width: 32px !important;
    height: 32px;
  }

  .pipeline-arrow {
    font-size: 22px;
  }
}


/* v89 — quitar totalmente los rectangulos detras de los iconos en Ideas en accion */
.examples-section .pipeline-step {
  min-width: 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.examples-section .pipeline-step:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.examples-section .pipeline-step::before,
.examples-section .pipeline-step::after,
.examples-section .app-chip::before,
.examples-section .app-chip::after {
  content: none !important;
  display: none !important;
}


/* v90 — iconos personalizados en flujos de Ideas en accion */
.pipeline-icon-image {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

@media (max-width: 620px) {
  .pipeline-icon-image {
    width: 32px;
    height: 32px;
  }
}


/* =========================================================
   IDEAS EN ACCION — RONDA 2 (v91)
   Cards blancas + animacion simultanea y sutil en los 3 flujos
   ========================================================= */
.examples-section .pipeline-card,
.examples-section .pipeline-card:nth-child(2),
.examples-section .pipeline-card:nth-child(3) {
  background: #ffffff !important;
  border: 3px solid var(--ink) !important;
  box-shadow: 8px 8px 0 var(--ink) !important;
}

.examples-section .pipeline-card:hover,
.examples-section .pipeline-card:nth-child(2):hover,
.examples-section .pipeline-card:nth-child(3):hover {
  background: #ffffff !important;
  border-color: var(--ink) !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
  transform: translate(3px, 3px);
}

.examples-section .pipeline {
  --flow-cycle: 4.8s;
  align-items: center;
}

.examples-section .pipeline-step,
.examples-section .pipeline-arrow {
  will-change: transform, opacity, color, filter;
}

.examples-section .pipeline-step {
  opacity: .62;
}

.examples-section .pipeline-step .app-chip,
.examples-section .pipeline-step .pipeline-icon-image,
.examples-section .pipeline-step > span {
  will-change: transform, opacity, filter, color;
}

.examples-section .pipeline-step .app-chip {
  transform-origin: center;
}

.examples-section .pipeline-step > span {
  opacity: .72;
}

.examples-section .pipeline-arrow {
  opacity: .28;
  transform: translateX(0);
}

.examples-section .pipeline-step:nth-child(1),
.examples-section .pipeline-step:nth-child(1) .app-chip,
.examples-section .pipeline-step:nth-child(1) > span {
  animation: flowStepPulse var(--flow-cycle) cubic-bezier(.2,.8,.2,1) infinite;
}

.examples-section .pipeline-arrow:nth-child(2) {
  animation: flowArrowPulse var(--flow-cycle) cubic-bezier(.2,.8,.2,1) infinite .38s;
}

.examples-section .pipeline-step:nth-child(3),
.examples-section .pipeline-step:nth-child(3) .app-chip,
.examples-section .pipeline-step:nth-child(3) > span {
  animation: flowStepPulse var(--flow-cycle) cubic-bezier(.2,.8,.2,1) infinite 1.2s;
}

.examples-section .pipeline-arrow:nth-child(4) {
  animation: flowArrowPulse var(--flow-cycle) cubic-bezier(.2,.8,.2,1) infinite 1.58s;
}

.examples-section .pipeline-step:nth-child(5),
.examples-section .pipeline-step:nth-child(5) .app-chip,
.examples-section .pipeline-step:nth-child(5) > span {
  animation: flowStepPulse var(--flow-cycle) cubic-bezier(.2,.8,.2,1) infinite 2.4s;
}

.examples-section .pipeline-arrow:nth-child(6) {
  animation: flowArrowPulse var(--flow-cycle) cubic-bezier(.2,.8,.2,1) infinite 2.78s;
}

.examples-section .pipeline-step:nth-child(7),
.examples-section .pipeline-step:nth-child(7) .app-chip,
.examples-section .pipeline-step:nth-child(7) > span {
  animation: flowStepPulse var(--flow-cycle) cubic-bezier(.2,.8,.2,1) infinite 3.6s;
}

@keyframes flowStepPulse {
  0%, 16%, 100% {
    opacity: .62;
    transform: translateY(0) scale(1);
    filter: none;
  }
  6%, 10% {
    opacity: 1;
    transform: translateY(-3px) scale(1.08);
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.10));
  }
}

@keyframes flowArrowPulse {
  0%, 14%, 100% {
    opacity: .28;
    transform: translateX(0) scale(1);
    color: var(--ink);
    filter: none;
  }
  5%, 9% {
    opacity: 1;
    transform: translateX(6px) scale(1.08);
    color: var(--mint-deep);
    filter: drop-shadow(0 4px 8px rgba(11,191,145,.14));
  }
}

@media (max-width: 620px) {
  .examples-section .pipeline {
    --flow-cycle: 5.2s;
  }
}


/* v92 — mantener iconos y flechas en negro, sin verse grises fuera de la animacion */
.examples-section .pipeline-step {
  opacity: 1 !important;
}

.examples-section .pipeline-step > span {
  opacity: 1 !important;
}

.examples-section .pipeline-arrow {
  opacity: 1 !important;
  color: var(--ink) !important;
}

@keyframes flowStepPulse {
  0%, 16%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
  6%, 10% {
    opacity: 1;
    transform: translateY(-3px) scale(1.08);
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.10));
  }
}

@keyframes flowArrowPulse {
  0%, 14%, 100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    color: var(--ink);
    filter: none;
  }
  5%, 9% {
    opacity: 1;
    transform: translateX(6px) scale(1.08);
    color: var(--mint-deep);
    filter: drop-shadow(0 4px 8px rgba(11,191,145,.14));
  }
}


/* =========================================================
   IDEAS EN ACCION — RONDA 3 (v93)
   Mas color y contraste sin perder limpieza
   ========================================================= */
.examples-stack .pipeline-card {
  --flow-accent: var(--mint);
  position: relative;
  overflow: hidden;
}

.examples-stack .pipeline-card:nth-child(1) {
  --flow-accent: var(--mint);
}

.examples-stack .pipeline-card:nth-child(2) {
  --flow-accent: #8a4df2;
}

.examples-stack .pipeline-card:nth-child(3) {
  --flow-accent: #b6cd4c;
}

.examples-stack .pipeline-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 10px;
  background: var(--flow-accent);
  z-index: 1;
}

.examples-stack .pipeline-card > * {
  position: relative;
  z-index: 2;
}

.examples-stack .pipeline-title h3::before {
  color: var(--flow-accent) !important;
}

.examples-stack .pipeline-title h3 span {
  color: var(--flow-accent) !important;
}

.examples-stack .pipeline-arrow {
  color: var(--ink) !important;
}

@keyframes flowArrowPulse {
  0%, 14%, 100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    color: var(--ink);
    filter: none;
  }
  5%, 9% {
    opacity: 1;
    transform: translateX(6px) scale(1.08);
    color: var(--flow-accent);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.08));
  }
}


/* =========================================================
   IDEAS EN ACCION — RONDA 4 (v94)
   Ajuste de color + fondo sutil tipo cuaderno
   ========================================================= */
.examples-stack .pipeline-card:nth-child(1) {
  --flow-accent: var(--blue) !important;
}

.examples-stack .pipeline-card:nth-child(2) {
  --flow-accent: #8a4df2 !important;
}

.examples-stack .pipeline-card:nth-child(3) {
  --flow-accent: #b6cd4c !important;
}

.examples-stack .pipeline-card {
  background-color: #ffffff !important;
}

.examples-stack .pipeline-card::after {
  content: "";
  position: absolute;
  inset: 10px 12px 12px;
  z-index: 0;
  pointer-events: none;
  opacity: .32;
  background-image: radial-gradient(circle, rgba(6, 10, 16, .18) 1px, transparent 1.15px);
  background-size: 18px 18px;
  background-position: 0 0;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.5) 20%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.12));
}

.examples-stack .pipeline-card > * {
  position: relative;
  z-index: 2;
}

.examples-stack .pipeline-copy {
  position: relative;
  z-index: 2;
}

.examples-stack .pipeline {
  position: relative;
  z-index: 2;
}

@media (max-width: 620px) {
  .examples-stack .pipeline-card::after {
    inset: 10px 10px 10px;
    opacity: .26;
    background-size: 16px 16px;
  }
}


/* =========================================================
   IDEAS EN ACCION — RONDA 5 (v95)
   Puntos de cuadricula mas notorios + flechas con color de flujo al hacer pop
   ========================================================= */
.examples-stack .pipeline-card::after {
  opacity: .52 !important;
  background-image: radial-gradient(circle, rgba(6, 10, 16, .24) 1.35px, transparent 1.45px) !important;
  background-size: 17px 17px !important;
}

.examples-stack .pipeline-arrow {
  transition: color 180ms ease, transform 180ms ease, filter 180ms ease;
}

@keyframes flowArrowPulse {
  0%, 14%, 100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    color: var(--ink);
    filter: none;
  }
  5%, 9% {
    opacity: 1;
    transform: translateX(6px) scale(1.1);
    color: var(--flow-accent) !important;
    filter: drop-shadow(0 3px 0 rgba(0,0,0,.12)) drop-shadow(0 6px 12px rgba(0,0,0,.08));
  }
}

@media (max-width: 620px) {
  .examples-stack .pipeline-card::after {
    opacity: .44 !important;
    background-image: radial-gradient(circle, rgba(6, 10, 16, .22) 1.25px, transparent 1.35px) !important;
    background-size: 15px 15px !important;
  }
}


/* =========================================================
   IDEAS EN ACCION — RONDA 6 (v96)
   Flechas realmente coloreadas en el pop + textura sutil en fondo menta
   ========================================================= */
.examples-section {
  position: relative;
  overflow: hidden;
}

.examples-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(circle, rgba(6, 10, 16, .3) 1.3px, transparent 1.4px);
  background-size: 24px 24px;
  background-position: 0 0;
}

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

.examples-stack .pipeline-arrow {
  position: relative;
  color: var(--ink) !important;
}

.examples-stack .pipeline-arrow::after {
  content: "→";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--flow-accent);
  opacity: 0;
  transform: translateX(0) scale(1);
  pointer-events: none;
}

.examples-section .pipeline-arrow:nth-child(2)::after {
  animation: flowArrowOverlayPulse var(--flow-cycle) cubic-bezier(.2,.8,.2,1) infinite .38s;
}

.examples-section .pipeline-arrow:nth-child(4)::after {
  animation: flowArrowOverlayPulse var(--flow-cycle) cubic-bezier(.2,.8,.2,1) infinite 1.58s;
}

.examples-section .pipeline-arrow:nth-child(6)::after {
  animation: flowArrowOverlayPulse var(--flow-cycle) cubic-bezier(.2,.8,.2,1) infinite 2.78s;
}

@keyframes flowArrowOverlayPulse {
  0%, 14%, 100% {
    opacity: 0;
    transform: translateX(0) scale(1);
    filter: none;
  }
  5%, 9% {
    opacity: 1;
    transform: translateX(6px) scale(1.1);
    filter: drop-shadow(0 3px 0 rgba(0,0,0,.10)) drop-shadow(0 6px 12px rgba(0,0,0,.07));
  }
}

@media (max-width: 620px) {
  .examples-section::after {
    opacity: .28;
    background-size: 20px 20px;
  }
}


/* =========================================================
   IDEAS EN ACCION — RONDA 7 (v97)
   Subir el bloque izquierdo + tipografia alta y bold
   ========================================================= */
.examples-intro {
  position: sticky;
  top: 96px !important;
  margin-top: -14px;
}

.examples-intro .eyebrow {
  margin: 0 0 18px !important;
  color: var(--ink) !important;
  font-family: "An Awesome Font", Impact, "Arial Black", Arial, sans-serif !important;
  font-size: clamp(44px, 4.4vw, 74px) !important;
  font-weight: 900 !important;
  line-height: .86 !important;
  letter-spacing: -.045em !important;
  text-transform: none !important;
}

.examples-intro h2 {
  max-width: 560px;
  margin: 22px 0 0;
  color: var(--ink);
  font-family: "An Awesome Font", Impact, "Arial Black", Arial, sans-serif !important;
  font-size: clamp(58px, 5.4vw, 92px) !important;
  font-weight: 900 !important;
  line-height: .88 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

.examples-intro .button {
  margin-top: 30px;
}

@media (max-width: 1180px) {
  .examples-intro {
    position: static;
    margin-top: 0;
  }

  .examples-intro .eyebrow {
    font-size: clamp(38px, 7vw, 60px) !important;
  }

  .examples-intro h2 {
    font-size: clamp(50px, 8vw, 78px) !important;
    max-width: 760px;
  }
}

@media (max-width: 620px) {
  .examples-intro .eyebrow {
    margin-bottom: 14px !important;
    font-size: clamp(30px, 10vw, 46px) !important;
    line-height: .9 !important;
  }

  .examples-intro h2 {
    font-size: clamp(42px, 12vw, 60px) !important;
    line-height: .92 !important;
  }
}


/* =========================================================
   IDEAS EN ACCION — RONDA 8 (v98)
   Alineacion superior + mayusculas + CTA rosa
   ========================================================= */
@media (min-width: 1181px) {
  .examples-intro {
    /* La sección padre (.examples-section) usa overflow:hidden para la curva
       decorativa, lo que rompe position:sticky en los navegadores: el bloque
       queda "atascado" en una posición fija ignorando cualquier margin-top.
       Se usa position:static para que el alineado top del grid
       (align-items:start en .examples-layout) funcione de forma normal. */
    position: static !important;
    margin-top: 0 !important;
    top: auto !important;
  }
}

.examples-intro .eyebrow,
.examples-intro h2 {
  text-transform: uppercase !important;
}

.examples-intro .button.button-outline-small {
  width: auto;
  min-height: 50px;
  padding: 0 20px;
  color: var(--ink) !important;
  background: #ff8fc8 !important;
  border: 3px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.examples-intro .button.button-outline-small:hover {
  color: var(--ink) !important;
  background: #ffadd5 !important;
  border-color: var(--ink) !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  transform: translate(3px, 3px);
}

@media (max-width: 1180px) {
  .examples-intro {
    margin-top: 0 !important;
  }
}

@media (max-width: 620px) {
  .examples-intro .button.button-outline-small {
    width: 100%;
  }
}

/* =========================================================
   NUESTRO PROCESO — VENTANAS TERMINAL (v104)
   Tarjetas negras tipo terminal con número gigante de color
   y sombra dura del mismo color
   ========================================================= */
.process-pipeline {
  display: flex;
  flex-direction: row;
  gap: 28px;
  width: 100%;
  flex-wrap: wrap;
}

.process-terminal {
  flex: 1;
  min-width: 220px;
  background: var(--ink);
  border: 3px solid var(--ink);
  position: relative;
  display: flex;
  flex-direction: column;
}

.process-terminal:nth-child(1) { box-shadow: 8px 8px 0 #35f2b5; }
.process-terminal:nth-child(2) { box-shadow: 8px 8px 0 #9b61d9; }
.process-terminal:nth-child(3) { box-shadow: 8px 8px 0 #c4ff00; }
.process-terminal:nth-child(4) { box-shadow: 8px 8px 0 #ff9500; }

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 16px;
  border-bottom: 2px solid rgba(255,255,255,.12);
  position: relative;
}

.terminal-filename {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-family: "JetBrains Mono", "Courier New", monospace;
  color: rgba(255,255,255,.45);
  letter-spacing: .02em;
}

.terminal-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.terminal-dot-red { background: #ff5f57; }
.terminal-dot-yellow { background: #febc2e; }
.terminal-dot-green { background: #28c840; }

.terminal-body {
  padding: 12px 24px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.terminal-number {
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  font-family: "An Awesome Font", Impact, "Arial Black", Arial, sans-serif;
  margin: 0 0 4px;
}

.process-terminal:nth-child(1) .terminal-number { color: #35f2b5; }
.process-terminal:nth-child(2) .terminal-number { color: #9b61d9; }
.process-terminal:nth-child(3) .terminal-number { color: #c4ff00; }
.process-terminal:nth-child(4) .terminal-number { color: #ff9500; }

.terminal-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-family: "JetBrains Mono", "Courier New", monospace;
}

.terminal-body h3::before {
  content: '> ';
  opacity: .6;
}

.terminal-body p {
  font-size: 15px;
  line-height: 1.6;
  color: #b8b8b8;
  margin: 0;
  font-family: "JetBrains Mono", "Courier New", monospace;
}

/* Tarjeta ancha (cuando queda sola en su fila): número a la izquierda, texto a la derecha */
.process-terminal-wide .terminal-body {
  flex-direction: row;
  align-items: center;
  gap: 32px;
}

.process-terminal-wide .terminal-number {
  margin: 0;
  flex-shrink: 0;
}

.process-terminal-wide .terminal-text-col {
  flex: 1;
  max-width: 560px;
}

.process-terminal-wide .terminal-body h3 {
  margin: 0 0 10px;
}

@media (max-width: 1180px) {
  .process-terminal-wide .terminal-body {
    flex-direction: column;
    align-items: flex-start;
  }
}

.terminal-cursor {
  display: inline-block;
  color: currentColor;
  animation: terminalBlink 1s step-end infinite;
}

.process-terminal:nth-child(1) .terminal-cursor { color: #35f2b5; }
.process-terminal:nth-child(2) .terminal-cursor { color: #9b61d9; }
.process-terminal:nth-child(3) .terminal-cursor { color: #c4ff00; }
.process-terminal:nth-child(4) .terminal-cursor { color: #ff9500; }

@keyframes terminalBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (max-width: 1180px) {
  .process-pipeline {
    flex-direction: column;
    gap: 32px;
  }

  .process-terminal {
    min-width: 100%;
  }
}

/* =========================================================
   HABLEMOS — FORMULARIO ESTILO WHATSAPP (v116)
   ========================================================= */
.whatsapp-form {
  background: #e5ddd5 !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 460px;
  width: 100%;
  border-radius: 10px !important;
  justify-self: center;
}

.whatsapp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #075e54;
  border-bottom: 3px solid var(--ink);
}

.whatsapp-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  flex-shrink: 0;
}

.whatsapp-avatar svg { width: 100%; height: 100%; }

.whatsapp-header-text strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.whatsapp-header-text span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,.8);
  font-size: 11px;
}

.whatsapp-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35f2b5;
  display: inline-block;
}

.whatsapp-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 6px;
  background-color: #e5ddd5;
  background-image: radial-gradient(rgba(6,10,16,.08) 1px, transparent 1.2px);
  background-size: 18px 18px;
}

.chat-row { display: flex; }
.chat-row-out { justify-content: flex-end; }

.chat-bubble.chat-in {
  max-width: 80%;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px 10px 10px 2px;
  box-shadow: 3px 3px 0 rgba(10,10,10,.18);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.chat-bubble.chat-out {
  display: block;
  max-width: 80%;
  background: #dcf8c6;
  border: 2px solid var(--ink);
  border-radius: 10px 10px 2px 10px;
  box-shadow: 3px 3px 0 rgba(10,10,10,.18);
  padding: 2px;
  margin: 0;
}

.chat-bubble.chat-out input,
.chat-bubble.chat-out textarea {
  display: block;
  width: 240px;
  max-width: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 13px;
  font-weight: 700;
  color: #075e54;
  height: auto !important;
}

.chat-bubble.chat-out textarea {
  min-height: 70px;
  resize: vertical;
  width: 260px;
}

.chat-bubble.chat-out input::placeholder,
.chat-bubble.chat-out textarea::placeholder { color: #6b9c7f; }

.chat-bubble.chat-out:focus-within {
  box-shadow: 3px 3px 0 rgba(10,10,10,.18), 0 0 0 2px #25d366;
}

.whatsapp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: #f0f0f0;
  border-top: 3px solid var(--ink);
}

.whatsapp-secure-note {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  margin: 0;
  color: #6b7580;
  font-size: 10.5px;
  border: none;
  background: none;
}

.whatsapp-secure-note svg {
  width: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.whatsapp-send {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  color: #fff;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.whatsapp-send svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.whatsapp-send:hover {
  background: #20bd5a;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.whatsapp-send[disabled] {
  width: auto;
  border-radius: 26px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  background: #cfead9;
  cursor: wait;
}

.whatsapp-form .form-feedback {
  padding: 0 20px;
  min-height: 0;
  margin-top: 0;
  background: #f0f0f0;
}

.whatsapp-form .form-feedback.success,
.whatsapp-form .form-feedback.error {
  padding: 10px 20px 16px;
}

@media (max-width: 620px) {
  .chat-bubble.chat-out input,
  .chat-bubble.chat-out textarea { width: 180px; }
}

/* =========================================================
   HABLEMOS — acento verde WhatsApp + sticker highlight (v125)
   ========================================================= */

/* =========================================================
   HERO — fondo de puntitos cuadrícula en la ventana simulada (v134)
   ========================================================= */
.automation-flow-stage {
  background-image: radial-gradient(rgba(10,10,10,.12) 1.3px, transparent 1.4px) !important;
  background-size: 20px 20px !important;
  background-position: 0 0 !important;
}

/* =========================================================
   HERO — sombra sutil en el titular (v177)
   ========================================================= */
.hero h1,
.hero h1 span {
  text-shadow: 4px 4px 0 rgba(10,10,10,.3) !important;
  font-family: "Arial Black", Arial, Helvetica, sans-serif !important;
  font-weight: 950 !important;
  letter-spacing: -.045em !important;
}

.hero h1 {
  text-align: center !important;
  font-size: clamp(44px, 6.5vw, 96px) !important;
  max-width: 100% !important;
}

.hero h1 span {
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

/* =========================================================
   BADGE AMARILLO SUPERIOR — mayúsculas y más grande (v137)
   ========================================================= */
.brand-banner-badge {
  text-transform: uppercase !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  min-height: 40px !important;
}

/* =========================================================
   HERO — triángulo decorativo azul/negro esquina sup. izq. (v140)
   ========================================================= */
.hero-corner-deco {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(110px, 11vw, 190px);
  z-index: 0;
  pointer-events: none;
}

.hero-corner-deco svg {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   HERO SERVICES — texto más grande y colores más neón (v143)
   ========================================================= */
.hero-service-item {
  font-size: 17px !important;
}

.hero-service-item svg {
  width: 27px !important;
  height: 27px !important;
}

.hero-service-item:nth-child(1),
.hero-service-item:nth-child(1) svg {
  color: #2d6bff !important;
  stroke: #2d6bff !important;
}
.hero-service-item:nth-child(1) svg { fill: #2d6bff !important; }

.hero-service-item:nth-child(2),
.hero-service-item:nth-child(2) svg {
  color: #a855f7 !important;
  stroke: #a855f7 !important;
}

.hero-service-item:nth-child(3),
.hero-service-item:nth-child(3) svg {
  color: #00e6a8 !important;
  stroke: #00e6a8 !important;
}

.hero-service-item:nth-child(4),
.hero-service-item:nth-child(4) svg {
  color: #bdd800 !important;
  stroke: #bdd800 !important;
}

/* =========================================================
   COMO TRABAJAMOS + HABLEMOS — misma fuente que IDEAS EN ACCIÓN (v151)
   ========================================================= */
.process-title .eyebrow,
.automation-contact-eyebrow {
  font-family: "An Awesome Font", Impact, "Arial Black", Arial, sans-serif !important;
}

.automation-contact-eyebrow {
  font-size: 20px !important;
  padding: 10px 16px !important;
}

/* =========================================================
   HERO — marco grueso mint + rayas diagonales (v164)
   ========================================================= */
.hero {
  border: 8px solid var(--mint) !important;
  box-sizing: border-box !important;
}

.hero-stripes-deco {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(220px, 26vw, 380px);
  height: clamp(220px, 26vw, 380px);
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--mint) 0px,
    var(--mint) 7px,
    transparent 7px,
    transparent 26px
  );
  opacity: .45;
}

/* =========================================================
   HERO — fondo blanco, sin puntitos (v165)
   ========================================================= */
.hero {
  background: #ffffff !important;
}

.hero::before {
  display: block !important;
  opacity: 1 !important;
  background-image:
    linear-gradient(rgba(10,10,10,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.06) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
}

.hero::after {
  display: none !important;
}

.hero-starfield {
  display: none !important;
}

.hero-grid::before {
  display: none !important;
}

.hero-stripes-deco {
  display: none !important;
}

/* =========================================================
   VENTANA DEL FLUJO — modo oscuro (v168)
   ========================================================= */
.automation-flow-stage {
  background-color: #14161a !important;
  background-image: radial-gradient(rgba(255,255,255,.09) 1.4px, transparent 1.5px) !important;
  background-size: 22px 22px !important;
}

.automation-flow-stage .hero-auto-label {
  color: #f2f2f2 !important;
}

.automation-flow-stage .hero-auto-path {
  stroke: rgba(255,255,255,.55) !important;
}

.automation-flow-stage .hero-integration-path {
  stroke: rgba(255,255,255,.55) !important;
}

.automation-flow-stage .flow-stage-tag {
  color: #f2f2f2 !important;
}

/* =========================================================
   VENTANA DEL FLUJO — barra de título con nombre (v169)
   ========================================================= */
.flow-stage-titlebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: #1a1c21;
  border-bottom: 2px solid rgba(255,255,255,.14);
  border-radius: 15px 15px 0 0;
  z-index: 2;
  pointer-events: none;
}

.flow-stage-filename {
  position: absolute;
  top: 9px;
  left: 0;
  right: 110px;
  z-index: 50 !important;
  text-align: center;
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: .02em;
  pointer-events: none;
}

.flow-stage-window-dots {
  top: 11px !important;
}

/* =========================================================
   HERO — más espacio entre eslogan y párrafo (v182)
   ========================================================= */
.hero-lead {
  margin-top: 32px !important;
}


/* =========================================================
   LOGO OFICIAL CHOCOMENTA LABS — v184
   Replaces the provisional SVG lockup in header, contact and footer.
   ========================================================= */
.brand-official {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 2px 7px !important;
  background: #ffffff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 5px !important;
  box-shadow: 3px 3px 0 var(--mint) !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.brand-logo-official {
  display: block !important;
  width: 138px !important;
  height: auto !important;
  max-height: 42px !important;
  object-fit: contain !important;
}

.site-header .brand-official {
  flex: 0 0 auto !important;
}

.footer-brand.brand-official {
  width: fit-content !important;
  margin-bottom: 20px !important;
  box-shadow: 4px 4px 0 var(--mint) !important;
}

.footer-brand .brand-logo-official {
  width: 168px !important;
  max-height: 50px !important;
}

.whatsapp-avatar {
  padding: 4px !important;
  overflow: hidden !important;
}

.whatsapp-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

@media (max-width: 1180px) {
  .brand-logo-official {
    width: 132px !important;
    max-height: 40px !important;
  }
}

@media (max-width: 520px) {
  .brand-official {
    padding: 2px 5px !important;
    box-shadow: 2px 2px 0 var(--mint) !important;
  }
  .brand-logo-official {
    width: 116px !important;
    max-height: 35px !important;
  }
}

/* =========================================================
   HEADER LOGO REFINEMENT — v185
   Keep official logo visible in the main banner/header,
   but remove the CTA/button appearance only there.
   ========================================================= */
.site-header .brand-official {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.site-header .brand-logo-official {
  width: 188px !important;
  max-height: 56px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

@media (max-width: 1180px) {
  .site-header .brand-logo-official {
    width: 170px !important;
    max-height: 52px !important;
    padding: 0 !important;
  }
}

@media (max-width: 520px) {
  .site-header .brand-logo-official {
    width: 148px !important;
    max-height: 46px !important;
    padding: 0 !important;
  }
}


/* =========================================================
   FORMULARIO REAL + ANTISPAM — v188
   ========================================================= */
.form-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

.form-submit:disabled {
  cursor: wait !important;
  opacity: 0.68 !important;
}

/* =========================================================
   MOBILE RESPONSIVE REBUILD — v189
   One responsive site: no horizontal scroll, mobile-first
   compositions for flows, statement, examples, process and contact.
   ========================================================= */
@media (max-width: 720px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0 !important;
  }

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

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

  .container {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  /* Header */
  .nav-shell {
    min-height: 64px !important;
    gap: 12px !important;
  }

  .brand-banner-badge {
    display: none !important;
  }

  .site-header .brand-logo-official {
    width: 140px !important;
    max-height: 46px !important;
  }

  .menu-toggle {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    display: flex !important;
    background: var(--yellow) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 var(--blue) !important;
  }

  .menu-toggle span {
    width: 24px !important;
    height: 3px !important;
    background: var(--ink) !important;
    border-radius: 0 !important;
  }

  .primary-nav {
    inset: 64px 0 auto 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 64px) !important;
  }

  /* Hero copy */
  .hero {
    width: 100% !important;
    border-width: 5px !important;
    overflow: hidden !important;
  }

  .hero-grid {
    width: calc(100% - 16px) !important;
    gap: 34px !important;
    padding: 32px 0 44px !important;
  }

  .hero-grid::before {
    display: none !important;
  }

  .hero-copy {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 4px !important;
  }

  .hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    font-size: clamp(38px, 12.3vw, 52px) !important;
    line-height: .89 !important;
    letter-spacing: -.055em !important;
    text-wrap: balance;
  }

  .hero h1 span {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
  }

  .hero-lead {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 28px !important;
    font-size: 16px !important;
    line-height: 1.48 !important;
    text-wrap: pretty;
  }

  .hero-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 28px !important;
  }

  .hero-actions .button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .hero-services {
    width: 100% !important;
    max-width: 350px !important;
    margin: 32px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 10px !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }

  .hero-service-item {
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }

  .hero-service-item svg {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
  }

  /* Hero animated flow: compact snake layout, fully visible */
  .hero-visual {
    width: 100% !important;
    min-width: 0 !important;
    margin: 6px 0 0 !important;
  }

  .automation-flow-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 18px 0 0 !important;
  }

  .automation-flow-stage {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 710px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  .automation-flow-stage::before,
  .automation-flow-stage::after,
  .flow-stage-tech-lines,
  .flow-stage-tech-lines-bottom,
  .flow-stage-chip,
  .flow-stage-diamond-wrap {
    display: none !important;
  }

  .flow-stage-titlebar {
    height: 34px !important;
    border-radius: 10px 10px 0 0 !important;
  }

  .flow-stage-filename {
    top: 8px !important;
    right: 0 !important;
    font-size: 12px !important;
  }

  .flow-stage-window-dots {
    top: 10px !important;
    left: 12px !important;
    right: auto !important;
  }

  .flow-stage-tag {
    top: 44px !important;
    left: 10px !important;
    max-width: calc(100% - 20px) !important;
    min-height: 32px !important;
    padding: 7px 10px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    transform: rotate(-3deg) !important;
    box-shadow: 4px 4px 0 var(--ink) !important;
  }

  .hero-auto-connectors {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .hero-auto-grid {
    position: absolute !important;
    top: 104px !important;
    left: 18px !important;
    right: 18px !important;
    width: auto !important;
    height: 392px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 84px 84px !important;
    grid-template-rows: repeat(3, 84px) !important;
    column-gap: 0 !important;
    row-gap: 70px !important;
    justify-content: space-between !important;
    align-content: start !important;
    justify-items: center !important;
    align-items: start !important;
  }

  .hero-auto-node {
    width: 84px !important;
    height: 84px !important;
    max-width: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }

  .hero-auto-node:nth-child(1) { grid-column: 1; grid-row: 1; }
  .hero-auto-node:nth-child(2) { grid-column: 2; grid-row: 1; }
  .hero-auto-node:nth-child(3) { grid-column: 2; grid-row: 2; }
  .hero-auto-node:nth-child(4) { grid-column: 1; grid-row: 2; }
  .hero-auto-node:nth-child(5) { grid-column: 1; grid-row: 3; }
  .hero-auto-node:nth-child(6) { grid-column: 2; grid-row: 3; }

  .hero-auto-node .hero-auto-icon,
  .hero-auto-node.is-current .hero-auto-icon,
  .hero-auto-node.is-complete .hero-auto-icon,
  .hero-auto-node.flash-hit .hero-auto-icon {
    inset: 6px !important;
  }

  .hero-auto-grid .hero-auto-node .hero-auto-icon > img.node-icon-art {
    width: 50% !important;
    height: 50% !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }

  .hero-auto-node::after,
  .hero-auto-node.is-current::after,
  .hero-auto-node.is-complete::after {
    top: -7px !important;
    left: -7px !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }

  .hero-auto-label {
    top: calc(100% + 7px) !important;
    width: 104px !important;
    font-size: 11px !important;
    line-height: .96 !important;
  }

  .node-port,
  .hero-integration-path,
  .hero-integration-signal,
  .integration-port {
    display: none !important;
  }

  .hero-auto-path {
    stroke-width: 2.2px !important;
    stroke-dasharray: 1 5 !important;
  }

  .hero-auto-triangle {
    transform: scale(.82);
    transform-origin: center;
  }

  .hero-integrations-panel {
    top: 538px !important;
    left: 12px !important;
    right: 12px !important;
    min-height: 146px !important;
    padding: 14px 10px 12px !important;
    overflow: hidden !important;
    box-shadow: 5px 5px 0 var(--ink) !important;
  }

  .integration-apps {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px 4px !important;
  }

  .integration-app {
    grid-column: span 2;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 5px !important;
    text-align: center !important;
  }

  .integration-app:nth-child(4) { grid-column: 2 / span 2; }
  .integration-app:nth-child(5) { grid-column: 4 / span 2; }

  .integration-logo {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    box-shadow: inset 0 0 0 2px var(--ink), 2px 2px 0 var(--ink) !important;
  }

  .integration-logo img,
  .integration-app:first-child .integration-logo img {
    width: 23px !important;
    height: 23px !important;
  }

  .integration-app span {
    width: 100% !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* Statement: no clipped text and a compact 2x2 system grid */
  .statement-strip {
    width: 100% !important;
    padding: 0 0 24px !important;
    overflow: hidden !important;
  }

  .statement-strip > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .statement-shell {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  .statement-shell::before {
    inset: 8px !important;
  }

  .statement-frame {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    padding: 32px 2px 26px !important;
  }

  .statement-layout,
  .statement-info-column,
  .statement-heading-wrap,
  .statement-heading-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .statement-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .statement-heading-wrap {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
  }

  .statement-bolt {
    width: 48px !important;
    flex-basis: 48px !important;
  }

  .statement-kicker,
  .statement-heading-copy h2 {
    font-size: clamp(25px, 8vw, 34px) !important;
    line-height: .94 !important;
    letter-spacing: -.035em !important;
  }

  .statement-info-column {
    gap: 20px !important;
  }

  .statement-copy {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 4px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere;
  }

  .statement-process-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px) !important;
  }

  .statement-step,
  .statement-step:nth-child(2),
  .statement-step:last-child {
    min-width: 0 !important;
    min-height: 164px !important;
    padding: 18px 10px 16px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    border-right: 1px dashed rgba(255,255,255,.62) !important;
    border-bottom: 1px dashed rgba(255,255,255,.62) !important;
  }

  .statement-step:nth-child(2),
  .statement-step:nth-child(4) {
    border-right: 0 !important;
  }

  .statement-step:nth-child(3),
  .statement-step:nth-child(4) {
    border-bottom: 0 !important;
  }

  .statement-step-icon {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 10px !important;
  }

  .statement-step h3 {
    font-size: 15px !important;
  }

  .statement-step p {
    width: 100% !important;
    max-width: none !important;
    margin-top: 7px !important;
    font-size: 11.5px !important;
    line-height: 1.38 !important;
  }

  /* Automation cards */
  .automation-section {
    width: 100% !important;
    padding-bottom: 48px !important;
    overflow: hidden !important;
  }

  .automation-badge {
    width: 100% !important;
    min-height: 54px !important;
    padding: 11px 10px 9px !important;
    font-size: clamp(18px, 6.6vw, 23px) !important;
    text-align: center !important;
  }

  .automation-cards.usecase-grid {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .automation-card.usecase-card,
  .automation-card-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Ideas in action: title and each animated flow stay inside the card */
  .examples-section {
    width: 100% !important;
    padding: 62px 0 68px !important;
    overflow: hidden !important;
  }

  .examples-layout {
    width: calc(100% - 24px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
  }

  .examples-intro,
  .examples-stack {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .examples-intro .eyebrow {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px !important;
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    font-size: clamp(27px, 8.4vw, 36px) !important;
    line-height: .9 !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  .examples-intro .eyebrow .eyebrow-dot {
    width: 10px !important;
    height: 10px !important;
    flex-basis: 10px !important;
  }

  .examples-intro h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(37px, 11.2vw, 48px) !important;
    line-height: .91 !important;
    letter-spacing: -.045em !important;
    overflow-wrap: normal;
  }

  .examples-intro h2 br {
    display: none !important;
  }

  .examples-intro .button.button-outline-small {
    width: 100% !important;
    margin-top: 28px !important;
  }

  .examples-stack {
    display: grid !important;
    gap: 24px !important;
  }

  .examples-stack .pipeline-card,
  .examples-stack .pipeline-card:nth-child(2),
  .examples-stack .pipeline-card:nth-child(3) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 26px 18px 24px !important;
    overflow: hidden !important;
    box-shadow: 6px 6px 0 var(--ink) !important;
  }

  .pipeline-title h3 {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
  }

  .pipeline-copy {
    width: 100% !important;
    margin-top: 16px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .examples-section .pipeline {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    justify-items: center !important;
    overflow: visible !important;
  }

  .examples-section .pipeline-step {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    justify-items: center !important;
  }

  .pipeline-icon-image,
  .app-chip svg {
    width: 38px !important;
    height: 38px !important;
  }

  .pipeline-step > span {
    margin-top: 6px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .examples-section .pipeline-arrow {
    width: 30px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 23px !important;
    line-height: 1 !important;
    transform: rotate(90deg);
  }

  .examples-section .pipeline-arrow::after {
    transform: rotate(90deg);
  }

  .examples-section .pipeline-arrow:nth-child(2),
  .examples-section .pipeline-arrow:nth-child(4),
  .examples-section .pipeline-arrow:nth-child(6) {
    animation-name: mobileFlowArrowPulse !important;
  }

  .examples-section .pipeline-arrow:nth-child(2)::after,
  .examples-section .pipeline-arrow:nth-child(4)::after,
  .examples-section .pipeline-arrow:nth-child(6)::after {
    animation-name: mobileFlowArrowOverlayPulse !important;
  }

  /* Process */
  .process-section {
    width: 100% !important;
    padding: 68px 0 !important;
    overflow: hidden !important;
  }

  .process-layout {
    width: calc(100% - 24px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
  }

  .process-title,
  .process-pipeline,
  .process-terminal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .process-title h2 {
    font-size: clamp(38px, 11vw, 50px) !important;
    line-height: .94 !important;
  }

  .process-pipeline {
    gap: 20px !important;
  }

  .process-terminal {
    box-shadow: 6px 6px 0 currentColor;
  }

  .terminal-body {
    padding: 12px 18px 24px !important;
  }

  .terminal-number {
    font-size: 72px !important;
  }

  .process-terminal-wide .terminal-body {
    gap: 12px !important;
  }

  /* Contact */
  .automation-contact-wrap {
    width: 100% !important;
    padding: 58px 0 72px !important;
    overflow: hidden !important;
  }

  .automation-contact {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 26px 16px 20px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
    overflow: hidden !important;
    border-width: 3px !important;
    box-shadow: 7px 7px 0 var(--ink) !important;
  }

  .automation-contact-copy,
  .automation-contact-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .automation-contact-eyebrow {
    max-width: 100% !important;
    padding: 9px 12px !important;
    font-size: 17px !important;
  }

  .automation-contact-question {
    width: 100% !important;
    max-width: none !important;
    top: 0 !important;
    margin: 20px 0 18px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .automation-contact-copy h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(34px, 10.5vw, 45px) !important;
    line-height: .94 !important;
    letter-spacing: -.045em !important;
  }

  .automation-contact-copy h2 span {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .automation-contact-copy .sticker-highlight {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 10px 10px !important;
    transform: rotate(-1.2deg) !important;
    transform-origin: center !important;
    overflow: hidden !important;
  }

  .automation-contact-copy h3 {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  .automation-contact-description {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .whatsapp-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    box-shadow: 5px 5px 0 var(--ink) !important;
  }

  .whatsapp-header {
    gap: 10px !important;
    padding: 13px 14px !important;
  }

  .whatsapp-avatar {
    width: 38px !important;
    height: 38px !important;
  }

  .whatsapp-body {
    width: 100% !important;
    padding: 16px 12px 8px !important;
    gap: 10px !important;
  }

  .chat-row,
  .chat-row-out {
    width: 100% !important;
    max-width: 100% !important;
  }

  .chat-bubble.chat-in {
    max-width: 92% !important;
    padding: 9px 11px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  .chat-bubble.chat-out {
    width: min(88%, 280px) !important;
    max-width: 88% !important;
    min-width: 0 !important;
  }

  .chat-bubble.chat-out input,
  .chat-bubble.chat-out textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
    font-size: 12.5px !important;
  }

  .chat-bubble.chat-out textarea {
    min-height: 82px !important;
  }

  .whatsapp-footer {
    width: 100% !important;
    gap: 10px !important;
    padding: 11px 12px !important;
  }

  .whatsapp-secure-note {
    min-width: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.25 !important;
  }

  .whatsapp-send {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    box-shadow: 3px 3px 0 var(--ink) !important;
  }

  .site-footer,
  .footer-grid,
  .footer-bottom {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

@keyframes mobileFlowArrowPulse {
  0%, 14%, 100% {
    opacity: 1;
    transform: rotate(90deg) translateX(0) scale(1);
    color: var(--ink);
    filter: none;
  }
  5%, 9% {
    opacity: 1;
    transform: rotate(90deg) translateX(5px) scale(1.08);
    color: var(--flow-accent);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.10));
  }
}

@keyframes mobileFlowArrowOverlayPulse {
  0%, 14%, 100% {
    opacity: 0;
    transform: rotate(90deg) translateX(0) scale(1);
    filter: none;
  }
  5%, 9% {
    opacity: 1;
    transform: rotate(90deg) translateX(5px) scale(1.08);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.08));
  }
}

/* v189.1 — final mobile overflow polish */
@media (max-width: 720px) {
  .hero h1 {
    font-size: clamp(35px, 10.6vw, 43px) !important;
    letter-spacing: -.05em !important;
  }

  .hero-auto-grid {
    left: 22px !important;
    right: 22px !important;
  }

  .hero-auto-label {
    width: 94px !important;
    font-size: 10.5px !important;
  }

  .statement-bolt-image {
    width: 48px !important;
    max-width: 48px !important;
  }

  .examples-intro h2 {
    font-size: clamp(34px, 9.4vw, 40px) !important;
    line-height: .92 !important;
  }

  .examples-intro h2 br {
    display: block !important;
  }

  .automation-contact-copy .sticker-highlight {
    font-size: .9em !important;
    transform: rotate(-1deg) scale(.96) !important;
  }

  .automation-contact-copy .sticker-highlight::before {
    inset: 0 !important;
  }
}

/* v189.2 — mobile contact headline: clean word wrapping */
@media (max-width: 720px) {
  .automation-contact-copy h2 {
    font-size: clamp(36px, 10.2vw, 42px) !important;
  }

  .automation-contact-copy .sticker-highlight {
    font-size: .74em !important;
    line-height: 1.02 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    transform: rotate(-1deg) !important;
  }

  .automation-contact-copy h2 > span:last-child {
    font-size: .78em !important;
    line-height: .94 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    letter-spacing: -.055em !important;
  }
}

/* v189.3 — separate the two layers of the mobile contact headline */
@media (max-width: 720px) {
  .automation-contact-copy .sticker-highlight {
    margin-bottom: 12px !important;
  }

  .automation-contact-copy h2 > span:last-child {
    display: block !important;
    margin-top: 8px !important;
  }
}

/* Header refinement: remove the bottom border line from the main site header. */
.site-header {
  border-bottom: 0 !important;
}

/* Final adjustment: remove the mint frame around the complete hero section. */
.hero {
  border: 0 !important;
}

/* Keep the Products menu above the hero and open it only after clicking. */
.site-header,
.nav-shell,
.primary-nav {
  overflow: visible !important;
}

.site-header { z-index: 1000 !important; }
.primary-nav { z-index: 1001; }

/* =========================================================
   PRODUCTS DROPDOWN — NOLEN
   ========================================================= */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  font-family: "Soin Sans", "Soin Sans Neue", "Soin Sans Pro", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color var(--transition);
}

.nav-dropdown-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -9px;
  height: 4px;
  background: var(--blue);
  transition: right var(--transition);
}

.nav-dropdown-toggle > span {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  transition: transform var(--transition);
}

.nav-dropdown.open .nav-dropdown-toggle {
  color: var(--cyan);
}

.nav-dropdown.open .nav-dropdown-toggle::after {
  right: 0;
}

.nav-dropdown.open .nav-dropdown-toggle > span {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  width: 310px;
  padding: 10px;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 7px 7px 0 var(--blue);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  z-index: 120;
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -11px;
  right: 30px;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-left: 3px solid var(--ink);
  border-top: 3px solid var(--ink);
  transform: rotate(45deg);
}

.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-dropdown-menu a {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding: 14px 15px;
  color: var(--ink) !important;
  background: #f4f6f8;
  border: 2px solid var(--ink);
  border-radius: 9px;
  text-transform: none;
  letter-spacing: 0;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.nav-dropdown-menu a::after { display: none !important; }
.nav-dropdown-menu a:hover {
  color: var(--ink) !important;
  background: var(--mint);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.nav-dropdown-menu strong { font-size: 16px; letter-spacing: .025em; }
.nav-dropdown-menu small { font-size: 12px; line-height: 1.4; font-weight: 700; color: #3d4850; }

@media (max-width: 1100px) {
  .nav-dropdown {
    width: 100%;
    display: block;
    border-bottom: 2px solid var(--ink);
  }
  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0;
    color: var(--ink) !important;
    font-size: 17px;
  }
  .nav-dropdown-toggle::after { display: none; }
  .nav-dropdown-menu {
    position: static;
    width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height .28s ease, padding .28s ease;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown.open .nav-dropdown-menu {
    max-height: 140px;
    padding: 12px 0 2px;
  }
  .nav-dropdown-menu a {
    padding: 13px 14px;
    background: rgba(255,255,255,.6);
  }
}

/* =========================================================
   AJUSTES MOBILE — sesión de pulido (7 puntos)
   ========================================================= */
@media (max-width: 720px) {

  /* 1. Menú móvil: fondo negro en vez de menta, texto blanco */
  .primary-nav,
  .site-header .primary-nav {
    background: var(--ink) !important;
  }
  .site-header .primary-nav a:not(.nav-cta) {
    color: var(--white) !important;
  }
  .primary-nav a { border-bottom-color: rgba(255,255,255,.18) !important; }

  /* 2. Sombra del H1 del hero: más chica en mobile */
  .hero h1,
  .hero h1 span {
    text-shadow: 2px 2px 0 rgba(10,10,10,.28) !important;
  }

  /* 3. Cuadrícula de fondo de la ventana de flujo: más chica en mobile */
  .automation-flow-stage {
    background-size: 10px 10px !important;
  }

  /* 4. Simplificar la ventana de flujo: quitar líneas técnicas y chip */
  .flow-stage-tech-lines,
  .flow-stage-chip {
    display: none !important;
  }

  /* 5. "Ideas en acción": centrar el texto (en mobile ya no hay columna a la derecha) */
  .examples-intro {
    text-align: center !important;
  }
  .examples-intro .button.button-outline-small {
    margin: 0 auto !important;
  }

  /* 6. Flechas del pipeline: garantizar que apunten hacia abajo */
  .examples-section .pipeline-arrow,
  .examples-section .pipeline-arrow::after {
    transform: rotate(90deg) !important;
  }

  /* 7. "Hablemos": acercar "automatizarse." a la etiqueta de arriba */
  .automation-contact-copy .sticker-highlight {
    margin-bottom: 2px !important;
  }
  .automation-contact-copy h2 > span:last-child {
    margin-top: 0 !important;
  }
}

/* =========================================================
   AJUSTES MOBILE — sesión 2 (7 puntos)
   ========================================================= */

/* 5. Nuevo flujo tipo stepper para mobile (oculto en desktop) */
.hero-flow-mobile { display: none; }

@media (max-width: 720px) {

  /* 1. "Productos" invisible en el menú (botón, no heredaba el color blanco) */
  .primary-nav .nav-dropdown-toggle {
    color: var(--white) !important;
  }

  /* 2. Tarjeta NOLEN dentro del menú: quitar caja gris, texto blanco + menta */
  .primary-nav .nav-dropdown-menu a {
    background: transparent !important;
    border-color: rgba(255,255,255,.25) !important;
  }
  .primary-nav .nav-dropdown-menu strong { color: var(--mint) !important; }
  .primary-nav .nav-dropdown-menu small { color: rgba(255,255,255,.72) !important; }
  .primary-nav .nav-dropdown-menu a:hover,
  .primary-nav .nav-dropdown-menu a:active {
    background: rgba(255,255,255,.08) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* 3. Quitar sombra dura del botón "Cuéntanos tu idea" en el menú */
  .primary-nav .nav-cta {
    box-shadow: none !important;
  }

  /* 4. Cuadrícula de la ventana de flujo: aún más chica */
  .automation-flow-stage {
    background-size: 6px 6px !important;
  }

  /* 5. Reemplazar la ventana de flujo por un stepper neo-brutalista */
  .hero-visual { display: none !important; }

  .hero-flow-mobile {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    margin-top: 26px;
  }

  .hero-flow-step {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--white);
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    padding: 14px 16px;
    position: relative;
    z-index: 1;
  }

  .hero-flow-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
  }
  .hero-flow-icon-purple { background: #ede7fb; }
  .hero-flow-icon-mint { background: #d8f8ee; }
  .hero-flow-icon-green { background: #e3f6c7; }
  .hero-flow-icon-orange { background: #ffe7be; }
  .hero-flow-icon-image { width: 26px; height: 26px; }

  .hero-flow-copy h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--ink);
  }
  .hero-flow-copy p {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--ink);
    opacity: .72;
  }

  .hero-flow-line {
    width: 4px;
    height: 18px;
    background: var(--ink);
    margin-left: 38px;
  }

  /* 6. Centrar el rayo contra todo el bloque de texto, no solo la primera línea */
  .statement-heading-wrap {
    align-items: center !important;
  }

  /* 7. "Ideas en acción": bajar más el tamaño de letra para que quepan las 3 líneas compactas */
  .examples-intro h2 {
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: .95 !important;
  }
}

/* =========================================================
   AJUSTES MOBILE — sesión 3: escalar la ventana de flujo real
   en vez de reemplazarla (revierte el stepper de la sesión 2)
   ========================================================= */
@media (max-width: 720px) {

  /* Revertir el stepper de reemplazo — volvemos a la ventana original */
  .hero-flow-mobile { display: none !important; }
  .hero-visual { display: block !important; }

  /* Volver a mostrar los detalles decorativos (ya no los quitamos, los escalamos) */
  .flow-stage-tech-lines,
  .flow-stage-chip {
    display: block !important;
  }

  /* La cuadrícula de puntos vuelve a su tamaño natural: el escalado de abajo
     la reduce de forma proporcional junto con todo lo demás */
  .automation-flow-stage {
    background-size: 22px 22px !important;
  }

  /* Encoger toda la ventana (860x460, tamaño fijo pensado para desktop)
     proporcionalmente para que quepa en pantallas angostas, sin recortar
     ni reacomodar nada por dentro */
  .automation-flow-scroll {
    overflow: hidden !important;
    height: calc((100vw - 32px) * 460 / 860) !important;
  }

  .automation-flow-stage {
    width: 860px !important;
    min-width: 0 !important;
    transform-origin: top left;
  }
}

/* Escalas fijas por rango de ancho — calc() no puede convertir px en un
   número puro para scale(), así que se calculan a mano por tramo */
@media (max-width: 720px) {
  .automation-flow-stage { transform: scale(.78) !important; }
  .automation-flow-scroll { height: 359px !important; }
}
@media (max-width: 480px) {
  .automation-flow-stage { transform: scale(.52) !important; }
  .automation-flow-scroll { height: 239px !important; }
}
@media (max-width: 414px) {
  .automation-flow-stage { transform: scale(.47) !important; }
  .automation-flow-scroll { height: 216px !important; }
}
@media (max-width: 375px) {
  .automation-flow-stage { transform: scale(.41) !important; }
  .automation-flow-scroll { height: 189px !important; }
}
@media (max-width: 340px) {
  .automation-flow-stage { transform: scale(.37) !important; }
  .automation-flow-scroll { height: 170px !important; }
}

/* =========================================================
   AJUSTES MOBILE — sesión 4: revertir el escalado del flujo,
   volver al tamaño natural (se probó y no convenció)
   ========================================================= */
@media (max-width: 720px) {
  .automation-flow-stage {
    transform: none !important;
    background-size: 6px 6px !important;
  }
  .automation-flow-scroll {
    overflow: visible !important;
    height: auto !important;
  }
}

/* =========================================================
   AJUSTES MOBILE — sesión 5: terminar de revertir el ancho
   forzado que quedó a medias (causaba que la señal, el chip
   y las líneas se desalinearan de los nodos reales)
   ========================================================= */
@media (max-width: 720px) {
  .automation-flow-stage {
    width: 100% !important;
    min-width: 860px !important;
  }
}

/* =========================================================
   AJUSTES MOBILE — sesión 6: flujo vertical de una columna,
   mismo diseño de tarjetas, ventana con alto flexible.
   El script ya calcula las líneas/señal según la posición real
   de cada tarjeta, así que no requiere cambios de JS.
   ========================================================= */
@media (max-width: 720px) {

  /* La ventana ya no fuerza 860px ni una altura fija: crece con su contenido */
  .automation-flow-stage {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 32px !important;
  }
  .automation-flow-scroll {
    overflow: visible !important;
    height: auto !important;
  }

  /* Grid de nodos: una sola columna, orden natural 1 → 6 */
  .hero-auto-grid {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 100px 0 0 !important;
    padding: 0 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 56px !important;
  }

  .hero-auto-node:nth-child(1),
  .hero-auto-node:nth-child(2),
  .hero-auto-node:nth-child(3),
  .hero-auto-node:nth-child(4),
  .hero-auto-node:nth-child(5),
  .hero-auto-node:nth-child(6) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Panel de integraciones: fluye normal después del grid, ya no fijo */
  .hero-integrations-panel {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 40px 16px 0 !important;
  }

  .hero-auto-connectors {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }
}

/* =========================================================
   AJUSTES MOBILE — sesión 7: deshacer el re-mostrado accidental
   de las líneas técnicas y el chip (ya estaban ocultos a
   propósito desde antes de esta sesión)
   ========================================================= */
@media (max-width: 720px) {
  .flow-stage-tech-lines,
  .flow-stage-tech-lines-bottom,
  .flow-stage-chip,
  .flow-stage-diamond-wrap {
    display: none !important;
  }
}

/* =========================================================
   AJUSTES MOBILE — sesión 8: etiquetas alternadas a los lados,
   para que no se crucen con la línea/flecha central
   ========================================================= */
@media (max-width: 720px) {
  .hero-auto-node:nth-child(odd) .hero-auto-label {
    top: 50% !important;
    left: calc(100% + 16px) !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    width: 118px !important;
    text-align: left !important;
  }
  .hero-auto-node:nth-child(even) .hero-auto-label {
    top: 50% !important;
    left: auto !important;
    right: calc(100% + 16px) !important;
    transform: translateY(-50%) !important;
    width: 118px !important;
    text-align: right !important;
  }
}

/* =========================================================
   AJUSTES MOBILE — sesión 9: quitar la flechita viajera en
   móvil (se queda solo la animación de resaltado por nodo),
   texto más grande, menos separación entre tarjetas
   ========================================================= */
@media (max-width: 720px) {
  .hero-auto-signal {
    display: none !important;
  }

  .hero-auto-grid {
    gap: 38px !important;
  }

  .hero-auto-node:nth-child(odd) .hero-auto-label,
  .hero-auto-node:nth-child(even) .hero-auto-label {
    font-size: 18px !important;
    line-height: 1.05 !important;
    width: 128px !important;
  }
}

/* =========================================================
   AJUSTES MOBILE — sesión 10: apagar la animación de la
   flecha del pipeline (competía con el !important y ganaba),
   dejarla fija ya rotada; mover el botón debajo de las tarjetas
   ========================================================= */
@media (max-width: 720px) {
  /* Flecha de "Ideas en acción": animación propia, autocontenida —
     rota hacia abajo, brinca y se ilumina del color de su tarjeta
     (--flow-accent ya lo define cada tarjeta más arriba en el CSS).
     Va con la misma especificidad que la regla original para
     garantizar que gane, y usa nombre de keyframe propio para no
     depender de nada de la animación vieja. */
  .examples-section .pipeline-arrow:nth-child(2) {
    animation-name: chocoArrowJump !important;
    animation-duration: 4.8s !important;
    animation-timing-function: cubic-bezier(.2,.8,.2,1) !important;
    animation-iteration-count: infinite !important;
    animation-delay: .38s !important;
  }
  .examples-section .pipeline-arrow:nth-child(4) {
    animation-name: chocoArrowJump !important;
    animation-duration: 4.8s !important;
    animation-timing-function: cubic-bezier(.2,.8,.2,1) !important;
    animation-iteration-count: infinite !important;
    animation-delay: 1.58s !important;
  }
  .examples-section .pipeline-arrow:nth-child(6) {
    animation-name: chocoArrowJump !important;
    animation-duration: 4.8s !important;
    animation-timing-function: cubic-bezier(.2,.8,.2,1) !important;
    animation-iteration-count: infinite !important;
    animation-delay: 2.78s !important;
  }

  /* La flecha "de repuesto" (::after) se queda apagada, como antes —
     solo debía destellar durante la animación que ya quitamos */
  .examples-section .pipeline-arrow::after,
  .examples-section .pipeline-arrow:nth-child(2)::after,
  .examples-section .pipeline-arrow:nth-child(4)::after,
  .examples-section .pipeline-arrow:nth-child(6)::after {
    animation: none !important;
    opacity: 0 !important;
  }

  /* Botón "Cuéntanos tu idea": debajo de las tarjetas del flujo */
  .examples-intro {
    display: contents !important;
  }
  .examples-intro .eyebrow { order: 1 !important; }
  .examples-intro h2 { order: 2 !important; }
  .examples-stack { order: 3 !important; }
  .examples-intro .button.button-outline-small {
    order: 4 !important;
    margin: 24px auto 0 !important;
  }
}

/* Sombra más chica en "automatizarse." dentro de "Hablemos" (mobile) */
@media (max-width: 720px) {
  .automation-contact-copy h2 > span:last-child {
    text-shadow: 2px 2px 0 var(--ink) !important;
  }
}

/* Keyframe propio para la flecha del pipeline en mobile — fuera del
   @media a propósito, con nombre único para no chocar con nada viejo */
@keyframes chocoArrowJump {
  0%, 16%, 100% {
    opacity: .35;
    transform: rotate(90deg) translateY(0) scale(1);
    color: var(--ink);
  }
  6%, 10% {
    opacity: 1;
    transform: rotate(90deg) translateY(4px) scale(1.18);
    color: var(--flow-accent);
  }
}