:root {
  --black: #02030a;
  --navy: #050716;
  --navy-2: #090d20;
  --panel: rgba(12, 16, 34, 0.68);
  --panel-strong: rgba(16, 20, 42, 0.82);
  --line: rgba(255, 255, 255, 0.1);
  --text: #f8f8ff;
  --muted: #b6bbd2;
  --soft: #858ba5;
  --violet: #8f45ff;
  --purple: #d23cff;
  --cyan: #18d8f3;
  --tiffany: #8ff8f3;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
  --radius: 22px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 12%, rgba(143, 69, 255, 0.22), transparent 28rem),
    radial-gradient(circle at 80% 16%, rgba(24, 216, 243, 0.14), transparent 30rem),
    linear-gradient(180deg, #010208 0%, var(--navy) 42%, #030612 100%);
  letter-spacing: 0;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}

.page-glow {
  position: fixed;
  inset: -20% -10% auto;
  z-index: -2;
  height: 70vh;
  pointer-events: none;
  background:
    radial-gradient(circle at 46% 45%, rgba(210, 60, 255, 0.18), transparent 24rem),
    radial-gradient(circle at 62% 52%, rgba(24, 216, 243, 0.11), transparent 25rem);
  filter: blur(8px);
  animation: ambientGlow 10s ease-in-out infinite alternate;
}

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

.site-header,
main {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 12px;
  padding: 0;
}

.brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.brand img {
  display: block;
  width: clamp(190px, 18vw, 230px);
  max-height: 76px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 0 20px rgba(210, 60, 255, 0.2));
}

.nav-shell {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  margin-left: auto;
  padding: 10px 12px 10px 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background: rgba(3, 5, 14, 0.78);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(22px);
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 34px);
  color: #dde2f5;
  font-size: 0.92rem;
  font-weight: 700;
}

.main-nav a {
  position: relative;
  padding: 10px 0;
  transition: color 180ms ease;
}

.main-nav a::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.main-nav a:hover,
.main-nav .active {
  color: #ffffff;
}

.main-nav a:hover::after,
.main-nav .active::after {
  transform: scaleX(1);
}

.header-cta,
.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.header-cta {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0 18px;
  border: 1px solid rgba(143, 248, 243, 0.36);
  border-radius: 999px;
  background: rgba(143, 248, 243, 0.08);
  color: var(--tiffany);
  font-size: 0.86rem;
}

.header-cta:hover {
  border-color: rgba(143, 248, 243, 0.7);
  box-shadow: 0 0 32px rgba(24, 216, 243, 0.16);
  transform: translateY(-1px);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  gap: 46px;
  align-items: center;
  min-height: calc(100vh - 110px);
  padding: 70px 0 42px;
}

.hero::before {
  position: absolute;
  inset: 8% 33% auto auto;
  width: 38vw;
  height: 38vw;
  max-width: 560px;
  max-height: 560px;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, rgba(143, 69, 255, 0.22), transparent 68%);
  filter: blur(16px);
}

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

.eyebrow-pill,
.eyebrow {
  color: var(--tiffany);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 10px 14px;
  border: 1px solid rgba(143, 69, 255, 0.42);
  border-radius: 999px;
  background: rgba(17, 12, 40, 0.74);
  box-shadow: inset 0 0 24px rgba(143, 69, 255, 0.12);
  color: #f5f2ff;
  letter-spacing: 0;
  text-transform: none;
}

.eyebrow-pill span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
}

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

h1 {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: clamp(3.2rem, 6.1vw, 5.85rem);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: 0;
}

h1,
h2 {
  text-wrap: balance;
}

.hero h1 {
  background: linear-gradient(180deg, #ffffff 0%, #e9eaff 58%, #8ff8f3 118%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-text {
  max-width: 670px;
  margin-bottom: 30px;
  color: #d6daeb;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.72;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}

.primary-button,
.secondary-button {
  min-height: 54px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 0.98rem;
}

.primary-button {
  gap: 10px;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow: 0 18px 58px rgba(24, 216, 243, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #02030a;
}

.primary-button:hover {
  box-shadow: 0 24px 70px rgba(24, 216, 243, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}

.secondary-button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: #f4f7ff;
}

.secondary-button:hover {
  border-color: rgba(143, 248, 243, 0.38);
  background: rgba(143, 248, 243, 0.08);
  transform: translateY(-2px);
}

.benefit-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 760px;
}

.benefit-row article {
  display: flex;
  min-height: 112px;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(14px);
}

.benefit-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(143, 248, 243, 0.22);
  border-radius: 10px;
  background: rgba(143, 248, 243, 0.08);
  color: var(--tiffany);
  font-size: 0.72rem;
  font-weight: 900;
}

.benefit-row strong,
.benefit-row small {
  display: block;
}

.benefit-row strong {
  margin-bottom: 7px;
  color: white;
  font-size: 0.95rem;
  line-height: 1.28;
}

.benefit-row small {
  color: var(--muted);
  line-height: 1.48;
}

.hero-visual {
  min-height: 610px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 48%, rgba(24, 216, 243, 0.18), transparent 14rem),
    radial-gradient(circle at 40% 30%, rgba(210, 60, 255, 0.17), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018));
  box-shadow: var(--shadow), inset 0 0 70px rgba(143, 69, 255, 0.08);
}

.hero-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(rgba(143, 248, 243, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 69, 255, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 48%, black, transparent 82%);
}

.orbit-glow {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(210, 60, 255, 0.22), rgba(24, 216, 243, 0.22), transparent, rgba(210, 60, 255, 0.22));
  filter: blur(36px);
  opacity: 0.55;
  animation: rotateGlow 12s linear infinite;
}

.workflow-lines {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  overflow: visible;
}

.workflow-track {
  fill: none;
  stroke: url("#lineGradient");
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 36 22;
  filter: url("#lineGlow");
  opacity: 0.76;
  animation: dashFlow 4.5s linear infinite;
}

.track-b {
  animation-duration: 5.8s;
  animation-direction: reverse;
  opacity: 0.58;
}

.track-c {
  animation-duration: 6.6s;
  opacity: 0.5;
}

.workflow-node {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 172px;
  min-height: 148px;
  place-items: center;
  padding: 18px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16), transparent 50%),
    rgba(7, 10, 24, 0.72);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4), inset 0 0 28px rgba(255, 255, 255, 0.06);
  text-align: center;
  backdrop-filter: blur(18px);
  animation: nodeFloat 6s ease-in-out infinite;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.workflow-node:hover {
  border-color: rgba(143, 248, 243, 0.5);
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.48), 0 0 44px rgba(24, 216, 243, 0.16);
  transform: translateY(-8px);
}

.node-top {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  margin-bottom: 12px;
  border: 1px solid rgba(143, 248, 243, 0.28);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(143, 248, 243, 0.16), rgba(143, 69, 255, 0.2));
  color: var(--tiffany);
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 0 28px rgba(24, 216, 243, 0.16);
  animation: nodePulse 2.8s ease-in-out infinite;
}

.workflow-node strong {
  margin-bottom: 7px;
  color: #ffffff;
  font-size: 1rem;
}

.workflow-node small {
  color: var(--muted);
  line-height: 1.4;
}

.node-lead {
  left: 5%;
  bottom: 22%;
  color: var(--purple);
}

.node-agent {
  left: 31%;
  top: 30%;
  color: var(--cyan);
  animation-delay: -1.2s;
}

.node-crm {
  right: 23%;
  top: 10%;
  color: var(--violet);
  animation-delay: -2.5s;
}

.node-whatsapp {
  right: 18%;
  bottom: 16%;
  color: var(--cyan);
  animation-delay: -3.7s;
}

.node-deal {
  right: 3%;
  top: 41%;
  color: #bf79ff;
  animation-delay: -4.4s;
}

.trusted,
.section,
.cta {
  margin-bottom: 104px;
}

.trusted {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 64px rgba(143, 69, 255, 0.08);
  backdrop-filter: blur(16px);
}

.trusted p {
  margin-bottom: 24px;
  color: #d8dbec;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.tech-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.tech-strip span {
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(3, 5, 14, 0.64);
  color: #f0f3ff;
  font-size: clamp(0.95rem, 1.5vw, 1.18rem);
  font-weight: 900;
}

.section-heading {
  max-width: 850px;
  margin-bottom: 34px;
}

.section-heading p:not(.eyebrow) {
  max-width: 740px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.72;
}

.eyebrow {
  margin-bottom: 14px;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(2.15rem, 4vw, 4rem);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 12px;
  font-size: 1.22rem;
  line-height: 1.26;
}

.card-grid,
.process-grid,
.industry-grid,
.why-grid {
  display: grid;
  gap: 18px;
}

.card-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

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

.feature-card,
.process-card,
.mini-card,
.automation-panel,
.cta {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 85% 0%, rgba(24, 216, 243, 0.12), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.024));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.feature-card,
.process-card,
.mini-card {
  min-height: 244px;
  padding: 26px;
  border-radius: var(--radius);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.feature-card:hover,
.process-card:hover,
.mini-card:hover {
  border-color: rgba(143, 248, 243, 0.36);
  background:
    radial-gradient(circle at 85% 0%, rgba(24, 216, 243, 0.16), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.032));
  transform: translateY(-5px);
}

.feature-card span,
.process-card span {
  display: inline-flex;
  margin-bottom: 24px;
  padding: 8px 11px;
  border: 1px solid rgba(143, 248, 243, 0.2);
  border-radius: 999px;
  color: var(--tiffany);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-card p,
.process-card p,
.mini-card p,
.cta p {
  color: var(--muted);
  line-height: 1.68;
}

.split-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: 38px;
  align-items: start;
  padding: 42px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  background: rgba(3, 5, 14, 0.58);
  box-shadow: inset 0 0 70px rgba(143, 69, 255, 0.08);
}

.automation-panel {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius);
}

.automation-panel div {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(2, 3, 10, 0.48);
  color: #edf1ff;
  font-weight: 750;
  line-height: 1.45;
}

.automation-panel span {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
}

.industry-grid {
  grid-template-columns: repeat(7, 1fr);
}

.industry-grid span {
  display: grid;
  min-height: 112px;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  color: white;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.industry-grid span:hover {
  border-color: rgba(210, 60, 255, 0.48);
  background: rgba(210, 60, 255, 0.11);
  transform: translateY(-4px);
}

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

.mini-card {
  min-height: 170px;
}

.mini-card strong {
  display: block;
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 1.05rem;
}

.cta {
  padding: 66px;
  border-radius: 30px;
  text-align: center;
}

.cta h2,
.cta p {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
}

.cta p {
  margin-bottom: 28px;
  font-size: 1.06rem;
}

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

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

@keyframes ambientGlow {
  from {
    opacity: 0.72;
    transform: translate3d(-1.5%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(1.5%, 1%, 0);
  }
}

@keyframes rotateGlow {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dashFlow {
  to {
    stroke-dashoffset: -116;
  }
}

@keyframes nodeFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -12px;
  }
}

@keyframes nodePulse {
  0%,
  100% {
    box-shadow: 0 0 24px rgba(24, 216, 243, 0.14);
  }

  50% {
    box-shadow: 0 0 34px rgba(24, 216, 243, 0.32), 0 0 42px rgba(210, 60, 255, 0.14);
  }
}

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

@media (max-width: 1180px) {
  .site-header,
  main {
    width: min(100% - 36px, 980px);
  }

  .main-nav {
    gap: 16px;
    font-size: 0.86rem;
  }

  .nav-shell {
    gap: 16px;
    padding-left: 18px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 58px;
  }

  .hero-copy {
    max-width: 860px;
  }

  .hero-visual {
    min-height: 620px;
  }

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

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

@media (max-width: 900px) {
  .site-header {
    position: relative;
    top: 0;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 0;
  }

  .brand img {
    width: 190px;
  }

  .nav-shell {
    width: 100%;
    justify-content: space-between;
  }

  .main-nav {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .main-nav a {
    flex: 0 0 auto;
  }

  .header-cta {
    margin-left: auto;
  }

  .benefit-row,
  .process-grid,
  .split-panel,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 680px;
  }

  .node-lead {
    left: 3%;
    bottom: 20%;
  }

  .node-agent {
    left: 27%;
    top: 25%;
  }

  .node-crm {
    right: 15%;
    top: 7%;
  }

  .node-whatsapp {
    right: 14%;
    bottom: 14%;
  }

  .node-deal {
    right: 2%;
    top: 43%;
  }
}

@media (max-width: 640px) {
  .site-header,
  main {
    width: min(100% - 24px, 460px);
  }

  .site-header {
    gap: 14px;
    padding: 14px 0 16px;
  }

  .brand img {
    width: min(210px, calc(100vw - 24px));
  }

  .nav-shell {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
  }

  .header-cta {
    min-height: 40px;
    width: 100%;
    padding: 0 12px;
    font-size: 0.78rem;
  }

  .hero {
    padding-top: 42px;
  }

  h1 {
    font-size: clamp(2.55rem, 13vw, 4rem);
  }

  h2 {
    font-size: clamp(1.9rem, 9vw, 2.75rem);
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .hero-visual {
    min-height: 720px;
    margin-right: -4px;
    margin-left: -4px;
    border-radius: 22px;
  }

  .workflow-lines {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .workflow-track {
    stroke-width: 5;
  }

  .workflow-node {
    width: calc(100% - 34px);
    min-height: 112px;
    padding: 15px;
  }

  .node-top {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 14px;
  }

  .node-lead {
    top: 28px;
    bottom: auto;
    left: 17px;
  }

  .node-agent {
    top: 156px;
    left: 17px;
  }

  .node-crm {
    top: 284px;
    right: auto;
    left: 17px;
  }

  .node-whatsapp {
    top: 412px;
    right: auto;
    bottom: auto;
    left: 17px;
  }

  .node-deal {
    top: 540px;
    right: auto;
    left: 17px;
  }

  .trusted,
  .section,
  .cta {
    margin-bottom: 74px;
  }

  .trusted,
  .split-panel,
  .cta {
    padding: 24px;
    border-radius: 20px;
  }

  .card-grid.four,
  .industry-grid {
    grid-template-columns: 1fr;
  }

  .feature-card,
  .process-card,
  .mini-card {
    min-height: auto;
    padding: 22px;
  }
}

/* iFlowork logo integration; the original AITECHFLOWS design is preserved. */
.brand.brand-home { flex-direction: column; align-items: center; gap: 7.2px; padding: 12px 14px; border-radius: 12px; background: #f4fcfc; }
.logo-art { position: relative; display: block; width: 187.2px; aspect-ratio: 2090 / 324; }
.logo-symbol, .logo-word { position: absolute; top: 0; height: 100%; overflow: hidden; }
.logo-symbol { left: 0; width: 15.75%; }
.logo-word { right: 0; width: 81.34%; }
.logo-art img { position: absolute; display: block; max-width: none; max-height: none; object-fit: fill; filter: none; }
.logo-symbol img { width: 631.395%; height: 213.569%; left: -14.244%; top: -55.457%; }
.logo-word img { width: 127.765%; height: 223.457%; left: -24.118%; top: -57.716%; }
.brand-slogan { font-weight: 400; opacity: .68; letter-spacing: -.025em; }
.brand-slogan span { color: #00b9bf; }
.header-slogan { display: block; margin: 0; color: #08284b; font-size: 11.4px; line-height: 1.3; white-space: nowrap; }
.section-slogan { line-height: 1.25; }
.about-hero { max-width: 990px; padding-top: 86px; }
.about-hero h1 { max-width: 990px; font-size: clamp(2.7rem,6vw,5.3rem); line-height: 1.06; }
.about-hero .hero-text { max-width: 780px; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 14px; background: #fff; color: #04224a; }
.skip-link:focus { top: 10px; }
a:focus-visible { outline: 3px solid #8ff8f3; outline-offset: 5px; }
section[id] { scroll-margin-top: 130px; }
/* Keep original content visible if JavaScript is unavailable. */
.reveal { opacity: 1; transform: none; }
@media (min-width: 901px) and (max-width: 1100px) {
  .site-header { position: relative; top: 0; flex-wrap: wrap; }
  .nav-shell { width: 100%; justify-content: space-between; }
}
@media (max-width: 900px) { section[id] { scroll-margin-top: 20px; } }
@media (max-width: 640px) {
  .brand.brand-home { gap: 6.6px; }
  .logo-art { width: 170.4px; }
  .header-slogan { font-size: 10.4px; }
  .main-nav { flex-wrap: wrap; overflow: visible; gap: 5px 16px; }
  .main-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .about-hero { padding-top: 42px; }
  .hero-visual { display: grid; gap: 14px; padding: 20px 16px; min-height: auto; }
  .workflow-node { position: relative; inset: auto; width: 100%; animation: none; }
}

/* Smaller homepage typography; brand lockups and About typography stay unchanged. */
.home-page .hero h1 { font-size: clamp(2.56rem, 4.88vw, 4.68rem); line-height: 1.06; }
.home-page h2:not(.brand-slogan) { font-size: clamp(1.72rem, 3.2vw, 3.2rem); line-height: 1.12; }
.home-page h3 { font-size: 1.1rem; }
.home-page .hero-text { font-size: clamp(.95rem, 1.1vw, 1.04rem); }
.home-page .section-heading p:not(.eyebrow),
.home-page .feature-card p,
.home-page .process-card p,
.home-page .mini-card p,
.home-page .cta p:not(.eyebrow) { font-size: .95rem; }
.home-page .benefit-row strong { font-size: .88rem; }
.home-page .mini-card strong, .home-page .workflow-node strong { font-size: .95rem; }
.home-page .automation-panel div, .home-page .industry-grid span, .home-page .trusted p { font-size: .95rem; }
.home-page .tech-strip span { font-size: clamp(.9rem, 1.35vw, 1.06rem); }
@media (max-width: 640px) {
  .home-page .hero h1 { font-size: clamp(2.04rem, 10.4vw, 3.2rem); }
  .home-page h2:not(.brand-slogan) { font-size: clamp(1.6rem, 7.2vw, 2.2rem); }
}

/* Original AITECHFLOWS neural-head symbol, displayed from its unchanged source. */
.brand.brand-home { background: transparent; }
.logo-symbol.original-symbol { width: 13.3%; mix-blend-mode: screen; }
.logo-symbol.original-symbol img { width: 724%; height: 206.857%; left: -40.667%; top: -54.286%; }
/* White wordmark and soft slogan provide contrast on the original dark design. */
.brand-home .logo-word img { filter: brightness(0) invert(1); }
.brand-home .header-slogan { color: #f0f5ff; }

/* Final approved header logo, approximately 30% larger. */
.site-header .brand.brand-home.brand-final {
  width: 280px;
  max-width: 100%;
  height: auto;
  padding: 0;
  gap: 0;
  justify-content: center;
}
.site-header .brand.brand-final .final-logo {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  filter: none;
}
@media (max-width: 640px) {
  .site-header .brand.brand-home.brand-final {
    width: 258px;
  }
}


/* Compact iFlowork footer */
.site-footer {
  width: min(1240px, calc(100% - 48px));
  margin: 14px auto 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(2, 3, 10, 0.34);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(300px, 1fr) minmax(220px, .8fr);
  align-items: center;
  gap: 34px;
  padding: 26px 0 20px;
}
.footer-logo { display:inline-flex; width:180px; max-width:100%; margin-bottom:10px; line-height:0; }
.footer-logo img { display:block; width:100%; height:auto; border:0; outline:0; box-shadow:none; }
.footer-brand p { max-width:450px; margin:0; color:var(--muted); font-size:.86rem; line-height:1.6; }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; }
.footer-nav a,.footer-email { color:#edf1ff; font-size:.86rem; font-weight:700; }
.footer-nav a:hover,.footer-email:hover { color:var(--tiffany); }
.footer-contact { display:grid; justify-items:end; gap:6px; text-align:right; }
.footer-contact span { color:var(--muted); font-size:.82rem; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0 16px; border-top:1px solid rgba(255,255,255,.07); color:var(--soft); font-size:.78rem; }
.footer-bottom span:last-child { color:#dce2f4; font-weight:700; }
@media (max-width:900px){
  .site-footer{width:min(100% - 36px,980px)}
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-nav{justify-content:flex-start}
}
@media (max-width:640px){
  .site-footer{width:min(100% - 24px,460px);margin-bottom:14px}
  .footer-inner{grid-template-columns:1fr;gap:20px;padding:22px 0 18px}
  .footer-logo{width:160px}
  .footer-nav{justify-content:flex-start}
  .footer-contact{justify-items:start;text-align:left}
  .footer-bottom{align-items:flex-start;flex-direction:column;gap:6px}
}

/* Clean logo filename/proportions */
.site-header .brand.brand-home.brand-final { width:280px; max-width:100%; height:auto; padding:0; gap:0; overflow:visible; line-height:0; }
.site-header .brand.brand-final .final-logo { display:block; width:100%; height:auto; max-height:none; object-fit:contain; border:0; outline:0; box-shadow:none; filter:none; clip-path:none; transform:none; }
@media(max-width:640px){ .site-header .brand.brand-home.brand-final{width:230px} }

/* Growth upgrade: detailed industries + portfolio */
.industry-detail-grid,.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.industry-detail-card,.portfolio-card{
  border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(circle at 90% 0%,rgba(24,216,243,.10),transparent 13rem),linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.024));
  box-shadow:var(--shadow);backdrop-filter:blur(16px);padding:28px;border-radius:var(--radius)
}
.industry-tag,.portfolio-type,.portfolio-number{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border:1px solid rgba(143,248,243,.22);border-radius:999px;color:var(--tiffany);font-size:.72rem;font-weight:900}
.industry-detail-card h3,.portfolio-card h3{margin-top:22px;color:#fff;font-size:1.2rem}
.industry-detail-card>p,.portfolio-summary{color:var(--muted);line-height:1.68}
.industry-detail-card ul{margin:20px 0 0;padding:0;list-style:none}
.industry-detail-card li{position:relative;margin-top:10px;padding-left:20px;color:#dde2f2;font-size:.9rem;line-height:1.55}
.industry-detail-card li::before{position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;content:"";background:var(--cyan);box-shadow:0 0 12px rgba(24,216,243,.55)}
.industry-secondary{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.industry-secondary span{padding:10px 14px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.035);color:var(--muted);font-size:.84rem;font-weight:700}
.portfolio-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.portfolio-number{border-color:rgba(210,60,255,.32);color:#d7a5ff}
.portfolio-flow{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:22px 0}
.portfolio-flow span{padding:8px 10px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(2,3,10,.48);color:#eef2ff;font-size:.75rem;font-weight:800}
.portfolio-flow b{color:var(--cyan)}
.portfolio-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}
.portfolio-meta div{padding:14px;border:1px solid rgba(255,255,255,.075);border-radius:13px;background:rgba(255,255,255,.025)}
.portfolio-meta small,.portfolio-meta strong{display:block}
.portfolio-meta small{margin-bottom:7px;color:var(--soft);font-size:.72rem}
.portfolio-meta strong{color:#fff;font-size:.84rem}
.portfolio-note{margin:18px 0 0;color:var(--soft);font-size:.78rem;line-height:1.55}
@media(max-width:1000px){.industry-detail-grid,.portfolio-grid{grid-template-columns:1fr}}
@media(max-width:640px){.industry-detail-card,.portfolio-card{padding:22px}.portfolio-meta{grid-template-columns:1fr}}

/* Sample-inspired estimate section */
.website-field{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.estimate-section{
  position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
  gap:clamp(28px,5vw,64px);align-items:center;margin:22px 0 88px;padding:clamp(38px,5vw,68px);
  border:1px solid rgba(255,255,255,.08);border-radius:30px;overflow:hidden;
  background:radial-gradient(circle at 14% 18%,rgba(143,69,255,.16),transparent 22rem),radial-gradient(circle at 83% 28%,rgba(24,216,243,.08),transparent 20rem),linear-gradient(140deg,rgba(4,6,17,.98),rgba(6,8,20,.94));
  box-shadow:0 34px 110px rgba(0,0,0,.46)
}
.estimate-section::before{position:absolute;inset:0;content:"";pointer-events:none;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to right,black,transparent 78%)}
.estimate-left,.estimate-form-shell{position:relative;z-index:1}
.estimate-left h2{max-width:760px;margin-bottom:20px;font-size:clamp(2.5rem,4.7vw,4.8rem);line-height:1.02}
.estimate-lead{max-width:720px;margin-bottom:28px;color:#d1d5e7;font-size:1.03rem;line-height:1.72}
.estimate-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.estimate-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;max-width:780px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.estimate-points div{display:flex;gap:10px;color:#dce1f0;font-size:.9rem;line-height:1.45}
.estimate-points span{color:var(--tiffany);font-weight:900}
.estimate-sectors{margin-top:30px}
.estimate-sectors>p{margin-bottom:12px;color:var(--soft);font-size:.72rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.estimate-sectors>div{display:flex;flex-wrap:wrap;gap:9px}
.estimate-sectors span{padding:9px 12px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.035);color:#dfe4f4;font-size:.78rem;font-weight:750}
.estimate-form-shell{padding:30px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(14,17,34,.92),rgba(7,9,20,.92));box-shadow:0 22px 80px rgba(0,0,0,.38)}
.estimate-form-head{margin-bottom:22px}
.estimate-form-head .eyebrow{margin-bottom:10px}
.estimate-form-head h3{margin-bottom:8px;color:#fff;font-size:1.45rem}
.estimate-form-head p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.55}
.estimate-form{display:grid;gap:14px}
.estimate-form .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.estimate-form label{display:grid;gap:7px}
.estimate-form label>span{color:#e7ebf7;font-size:.78rem;font-weight:800}
.estimate-form input,.estimate-form select,.estimate-form textarea{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:0;outline:none;background:rgba(255,255,255,.045);color:#fff;font:inherit}
.estimate-form input,.estimate-form select{min-height:50px;padding:0 14px}
.estimate-form textarea{min-height:118px;padding:14px;resize:vertical;line-height:1.5}
.estimate-form input:focus,.estimate-form select:focus,.estimate-form textarea:focus{border-color:rgba(143,248,243,.55);box-shadow:0 0 0 3px rgba(24,216,243,.07)}
.estimate-submit{min-height:54px;width:100%;border:0;border-radius:0;cursor:pointer;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#02030a;font-size:.92rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.estimate-note{color:var(--soft);font-size:.76rem;text-align:center}
@media(max-width:1000px){.estimate-section{grid-template-columns:1fr}}
@media(max-width:640px){
  .estimate-section{margin-bottom:60px;padding:24px;border-radius:22px}
  .estimate-actions{align-items:stretch;flex-direction:column}
  .estimate-actions .primary-button,.estimate-actions .secondary-button{width:100%}
  .estimate-points,.estimate-form .form-row{grid-template-columns:1fr}
  .estimate-form-shell{padding:22px}
}


/* =========================================================
   iFlowork final combined update — clean header + footer
   + AI Products page
   ========================================================= */

/* Header: remove capsule and header CTA, keep clean navigation */
.site-header {
  align-items: center;
}
.nav-shell {
  min-height: auto !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.main-nav {
  gap: clamp(20px, 2.45vw, 36px);
  font-size: .93rem;
}
.main-nav a {
  padding: 12px 0;
}
.main-nav a::after {
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  opacity: .9;
}
.header-cta {
  display: none !important;
}

/* Solutions: five cards flow naturally without leaving one oversized row */
#solutions .card-grid.four {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#solutions .feature-card:nth-child(4),
#solutions .feature-card:nth-child(5) {
  grid-column: span 1;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--tiffany);
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
}
.card-link:hover {
  color: #fff;
}

/* Cleaner footer: no repeated navigation */
.site-footer {
  width: min(1240px, calc(100% - 48px));
  margin: 18px auto 28px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: transparent;
}
.footer-inner.footer-inner-clean {
  display: grid;
  grid-template-columns: minmax(280px, 1.45fr) minmax(240px, .75fr);
  align-items: center;
  gap: 44px;
  padding: 30px 0 22px;
}
.footer-logo {
  width: 215px;
  max-width: 100%;
  margin-bottom: 12px;
}
.footer-contact {
  display: grid;
  justify-items: end;
  gap: 9px;
  text-align: right;
}
.footer-contact a {
  color: #edf1ff;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}
.footer-contact a:hover {
  color: var(--tiffany);
}
.footer-contact span {
  color: var(--muted);
  font-size: .82rem;
}
.footer-bottom {
  padding: 14px 0 16px;
}

/* AI Products */
.products-hero {
  padding-top: clamp(76px, 9vw, 132px);
  padding-bottom: 54px;
  max-width: 980px;
}
.products-hero h1 {
  max-width: 900px;
  font-size: clamp(3rem, 7vw, 6.1rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.products-hero .hero-text {
  max-width: 820px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.product-card {
  position: relative;
  min-height: 100%;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 90% 0%, rgba(24,216,243,.11), transparent 13rem),
    linear-gradient(145deg, rgba(255,255,255,.064), rgba(255,255,255,.024));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.product-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 44%;
  height: 1px;
  background: linear-gradient(90deg, var(--violet), var(--cyan), transparent);
}
.product-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(143,248,243,.2);
  border-radius: 999px;
  color: var(--tiffany);
  font-size: .72rem;
  font-weight: 900;
}
.product-kicker {
  margin: 22px 0 8px;
  color: var(--soft);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.product-card h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 1.28rem;
}
.product-card > p:not(.product-kicker) {
  color: var(--muted);
  line-height: 1.7;
}
.product-card ul {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
  padding-left: 18px;
  color: #dbe0ef;
  font-size: .88rem;
  line-height: 1.55;
}
.product-card li::marker {
  color: var(--tiffany);
}
.product-cta {
  margin-top: 34px;
  margin-bottom: 70px;
}

@media (max-width: 1000px) {
  #solutions .card-grid.four,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-inner.footer-inner-clean {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 900px) {
  .site-header {
    position: relative;
    top: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .nav-shell {
    width: 100%;
    justify-content: flex-start;
  }
  .main-nav {
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
    justify-content: flex-start;
    gap: 9px 20px;
  }
}
@media (max-width: 640px) {
  .site-footer {
    width: min(100% - 24px, 460px);
  }
  .footer-inner.footer-inner-clean {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 0 18px;
  }
  .footer-logo {
    width: 190px;
  }
  .footer-contact {
    justify-items: start;
    text-align: left;
  }
  .main-nav {
    gap: 7px 15px;
    font-size: .81rem;
  }
  .main-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  #solutions .card-grid.four,
  .product-grid {
    grid-template-columns: 1fr;
  }
  .products-hero h1 {
    font-size: clamp(2.65rem, 14vw, 4.3rem);
  }
}


/* =========================================================
   Hero refinement — balanced typography + stable workflow
   ========================================================= */

/* Reduce the oversized homepage headline and improve line rhythm */
.home-page .hero {
  grid-template-columns: minmax(0, 0.96fr) minmax(500px, 1.04fr);
  gap: 44px;
}

.home-page .hero h1 {
  max-width: 690px;
  font-size: clamp(3rem, 4.35vw, 4.4rem) !important;
  line-height: 1.03 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  text-wrap: pretty;
}

.home-page .hero-text {
  max-width: 650px;
  font-size: clamp(.98rem, 1vw, 1.08rem) !important;
  line-height: 1.68;
}

/* Make the workflow panel more proportional and visually calmer */
.home-page .hero-visual {
  min-height: 560px;
  border-radius: 28px;
}

/* Stop the floating rectangular workflow cards */
.home-page .workflow-node {
  animation: none !important;
  translate: 0 0 !important;
}

/* Keep a subtle animated workflow line, but remove rotating background motion */
.home-page .orbit-glow {
  animation: none !important;
}

/* Prevent hover from making cards jump */
.home-page .workflow-node:hover {
  transform: none !important;
}

/* Slightly reduce card scale so the visual feels less crowded */
.home-page .workflow-node {
  width: 164px;
  min-height: 140px;
  padding: 16px 13px;
}

/* Desktop balance */
@media (min-width: 1181px) {
  .home-page .hero {
    min-height: calc(100vh - 120px);
    padding-top: 62px;
  }
}

/* Tablet */
@media (max-width: 1180px) {
  .home-page .hero h1 {
    font-size: clamp(2.8rem, 6vw, 4rem) !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .home-page .hero h1 {
    font-size: clamp(2.35rem, 11vw, 3.35rem) !important;
    line-height: 1.04 !important;
  }

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


/* =========================================================
   Final hero image + AI Products typography refinement
   ========================================================= */

/* Homepage: use the approved high-quality ecosystem image */
.home-page .hero {
  align-items: start !important;
}

.home-page .hero-image-panel {
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 26px;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.home-page .hero-workflow-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
  border-radius: inherit;
}

/* Remove obsolete workflow presentation effects */
.home-page .hero-image-panel::before,
.home-page .hero-image-panel::after {
  display: none !important;
}

/* AI Products: reduce oversized headline and wasted vertical space */
.products-hero {
  padding-top: clamp(46px, 5.5vw, 78px) !important;
  padding-bottom: 34px !important;
  max-width: 1040px;
}

.products-hero h1 {
  max-width: 900px;
  font-size: clamp(2.7rem, 5vw, 4.65rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  font-weight: 800 !important;
  text-wrap: balance;
}

.products-hero .hero-text {
  max-width: 900px;
  margin-top: 20px;
  font-size: clamp(.98rem, 1.15vw, 1.12rem) !important;
  line-height: 1.65;
}

.products-hero .hero-actions {
  margin-top: 28px;
}

@media (max-width: 900px) {
  .products-hero {
    padding-top: 38px !important;
  }

  .products-hero h1 {
    font-size: clamp(2.45rem, 8vw, 3.8rem) !important;
  }
}

@media (max-width: 640px) {
  .home-page .hero-image-panel {
    border-radius: 20px;
  }

  .products-hero {
    padding-top: 30px !important;
    padding-bottom: 24px !important;
  }

  .products-hero h1 {
    font-size: clamp(2.2rem, 11vw, 3.05rem) !important;
  }
}


/* =========================================================
   Hero layout enlargement + alignment refinement
   ========================================================= */

/* Use more of the available width and make the right-side image
   feel properly anchored under the navigation. */
.home-page .hero {
  grid-template-columns: minmax(0, 0.84fr) minmax(640px, 1.16fr) !important;
  gap: 26px !important;
  align-items: start !important;
  padding-top: 56px !important;
}

.home-page .hero-copy {
  max-width: 630px;
}

.home-page .hero h1 {
  max-width: 620px;
  font-size: clamp(2.9rem, 4.15vw, 4.25rem) !important;
}

.home-page .hero-image-panel,
.home-page .hero-visual.hero-image-panel {
  justify-self: stretch !important;
  align-self: start !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: 8px !important;
  border-radius: 28px !important;
}

.home-page .hero-workflow-image {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Give the image side stronger visual presence on large screens */
@media (min-width: 1280px) {
  .home-page .hero {
    grid-template-columns: minmax(0, 0.8fr) minmax(700px, 1.2fr) !important;
    gap: 22px !important;
  }

  .home-page .hero h1 {
    max-width: 600px;
  }
}

/* Keep the layout balanced on tablet */
@media (max-width: 1180px) {
  .home-page .hero {
    grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr) !important;
    gap: 20px !important;
  }

  .home-page .hero-image-panel {
    margin-top: 6px !important;
  }
}


/* =========================================================
   Hero image vertical centering
   ========================================================= */

/* Keep the visual large, but center it vertically in the hero
   instead of placing it close to the navigation. */
.home-page .hero {
  align-items: center !important;
}

.home-page .hero-copy,
.home-page .hero-image-panel {
  align-self: center !important;
}

.home-page .hero-image-panel,
.home-page .hero-visual.hero-image-panel {
  margin-top: 0 !important;
}

@media (min-width: 1181px) {
  .home-page .hero {
    padding-top: 62px !important;
    padding-bottom: 52px !important;
  }
}


/* =========================================================
   REAL HERO WIDTH + CENTERING FIX
   The previous layout was constrained by the global 1240px main width.
   This opens the homepage hero to the available desktop width and
   centers the image within the right side.
   ========================================================= */

body.home-page main {
  width: min(1500px, calc(100% - 64px)) !important;
}

body.home-page .hero {
  grid-template-columns: minmax(440px, 0.82fr) minmax(680px, 1.18fr) !important;
  gap: 54px !important;
  align-items: center !important;
  min-height: calc(100vh - 118px) !important;
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

body.home-page .hero-copy {
  align-self: center !important;
  max-width: 560px !important;
}

body.home-page .hero h1 {
  max-width: 560px !important;
  font-size: clamp(2.85rem, 3.65vw, 4rem) !important;
  line-height: 1.04 !important;
}

body.home-page .hero-image-panel,
body.home-page .hero-visual.hero-image-panel {
  width: 100% !important;
  max-width: 830px !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 auto !important;
}

body.home-page .hero-workflow-image {
  width: 100% !important;
  height: auto !important;
}

/* Large desktop: allow the image to breathe and sit in the visual center */
@media (min-width: 1500px) {
  body.home-page main {
    width: min(1540px, calc(100% - 72px)) !important;
  }

  body.home-page .hero {
    grid-template-columns: minmax(430px, 0.78fr) minmax(760px, 1.22fr) !important;
    gap: 64px !important;
  }

  body.home-page .hero-image-panel,
  body.home-page .hero-visual.hero-image-panel {
    max-width: 900px !important;
  }
}

/* Tablet fallback */
@media (max-width: 1180px) {
  body.home-page main {
    width: min(100% - 36px, 1080px) !important;
  }

  body.home-page .hero {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  body.home-page .hero-copy {
    max-width: 760px !important;
  }

  body.home-page .hero-image-panel,
  body.home-page .hero-visual.hero-image-panel {
    max-width: 860px !important;
  }
}


/* =========================================================
   AI Products — compact real design with vector icons
   ========================================================= */

.products-hero-compact {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
  align-items: center;
  gap: 56px;
  max-width: none !important;
  padding-top: 46px !important;
  padding-bottom: 42px !important;
}

.products-hero-copy {
  max-width: 650px;
}

.products-hero-compact h1 {
  max-width: 650px !important;
  margin: 12px 0 0;
  font-size: clamp(2.7rem, 4.2vw, 4.35rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}

.products-hero-compact .hero-text {
  max-width: 640px !important;
  margin-top: 22px !important;
  margin-bottom: 0;
  font-size: clamp(.98rem, 1.05vw, 1.08rem) !important;
  line-height: 1.68;
}

.products-hero-compact .hero-actions {
  margin-top: 28px !important;
}

/* Product constellation */
.products-orbit {
  position: relative;
  min-height: 470px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(24,216,243,.18), transparent 11rem),
    radial-gradient(circle at 52% 48%, rgba(143,69,255,.22), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 0 70px rgba(143,69,255,.05);
}

.products-orbit::before,
.products-orbit::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(143,248,243,.12);
  border-radius: 50%;
  pointer-events: none;
}

.products-orbit::before {
  width: 330px;
  height: 330px;
}

.products-orbit::after {
  width: 440px;
  height: 440px;
  border-color: rgba(143,69,255,.11);
}

.products-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 122px;
  height: 122px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(143,248,243,.42);
  border-radius: 28px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), transparent 35%),
    linear-gradient(145deg, rgba(24,216,243,.24), rgba(143,69,255,.31));
  box-shadow:
    0 0 0 10px rgba(24,216,243,.04),
    0 0 55px rgba(24,216,243,.24),
    0 0 80px rgba(143,69,255,.22);
}

.products-core span {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -.05em;
  background: linear-gradient(135deg, #fff 0%, var(--tiffany) 42%, #a975ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.orbit-card {
  position: absolute;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 128px;
  padding: 16px 10px 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(11,16,36,.94), rgba(9,11,26,.86));
  box-shadow: 0 16px 32px rgba(0,0,0,.28);
  color: #fff;
  text-align: center;
}

.orbit-card svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: url(#none);
  stroke: var(--tiffany);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px rgba(24,216,243,.25));
}

.orbit-card span {
  font-size: .8rem;
  font-weight: 800;
}

.orbit-card-1 { left: 8%;  top: 18%; }
.orbit-card-2 { right: 8%; top: 18%; }
.orbit-card-3 { left: 50%; top: 7%; transform: translateX(-50%); }
.orbit-card-4 { left: 8%;  bottom: 15%; }
.orbit-card-5 { right: 8%; bottom: 15%; }
.orbit-card-6 { left: 50%; bottom: 6%; transform: translateX(-50%); }

/* Lightweight connector lines */
.products-orbit .orbit-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 88px;
  height: 1px;
  background: linear-gradient(90deg, rgba(24,216,243,.12), rgba(143,69,255,.7));
  box-shadow: 0 0 10px rgba(24,216,243,.25);
}

.orbit-card-1::before { right: -72px; top: 68px; transform: rotate(22deg); }
.orbit-card-2::before { left: -72px; top: 68px; transform: rotate(-22deg); }
.orbit-card-3::before { left: 50%; bottom: -50px; transform: translateX(-50%) rotate(90deg); width: 68px; }
.orbit-card-4::before { right: -72px; top: 44px; transform: rotate(-18deg); }
.orbit-card-5::before { left: -72px; top: 44px; transform: rotate(18deg); }
.orbit-card-6::before { left: 50%; top: -48px; transform: translateX(-50%) rotate(90deg); width: 66px; }

/* Tighten page rhythm */
#product-types.section {
  padding-top: 44px;
  padding-bottom: 46px;
}

#product-types .section-heading {
  margin-bottom: 28px;
}

.product-grid {
  gap: 16px !important;
}

.product-card {
  padding: 24px !important;
}

.product-card h3 {
  margin-bottom: 10px !important;
}

.product-card > p:not(.product-kicker) {
  line-height: 1.62 !important;
}

.product-card ul {
  margin-top: 16px !important;
  gap: 6px !important;
}

.product-principles.section {
  padding-top: 34px;
  padding-bottom: 38px;
}

.product-cta {
  margin-top: 20px !important;
  margin-bottom: 48px !important;
}

@media (max-width: 1100px) {
  .products-hero-compact {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .products-hero-copy {
    max-width: 800px;
  }

  .products-hero-compact h1,
  .products-hero-compact .hero-text {
    max-width: 800px !important;
  }

  .products-orbit {
    min-height: 450px;
  }
}

@media (max-width: 640px) {
  .products-hero-compact {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
    gap: 24px;
  }

  .products-hero-compact h1 {
    font-size: clamp(2.15rem, 10vw, 3.05rem) !important;
  }

  .products-orbit {
    min-height: 520px;
    border-radius: 22px;
  }

  .products-core {
    width: 102px;
    height: 102px;
  }

  .orbit-card {
    width: 106px;
    padding: 13px 8px 12px;
  }

  .orbit-card svg {
    width: 29px;
    height: 29px;
  }

  .orbit-card span {
    font-size: .72rem;
  }

  .orbit-card-1 { left: 4%; top: 16%; }
  .orbit-card-2 { right: 4%; top: 16%; }
  .orbit-card-3 { top: 3%; }
  .orbit-card-4 { left: 4%; bottom: 14%; }
  .orbit-card-5 { right: 4%; bottom: 14%; }
  .orbit-card-6 { bottom: 2%; }
}


/* =========================================================
   AI Products approved hero image
   ========================================================= */

.products-hero-compact {
  grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr) !important;
  gap: 48px !important;
  align-items: center !important;
}

.products-hero-visual {
  justify-self: stretch;
  align-self: center;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  background: transparent;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.products-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
}

@media (min-width: 1300px) {
  .products-hero-compact {
    grid-template-columns: minmax(0, .82fr) minmax(650px, 1.18fr) !important;
    gap: 54px !important;
  }

  .products-hero-visual {
    max-width: 820px;
    justify-self: center;
  }
}

@media (max-width: 1100px) {
  .products-hero-compact {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .products-hero-visual {
    max-width: 900px;
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .products-hero-visual {
    border-radius: 20px;
  }
}


/* =========================================================
   Homepage hero — match AI Products visual scale and presence
   ========================================================= */

body.home-page main {
  width: min(1560px, calc(100% - 64px)) !important;
}

body.home-page .hero {
  grid-template-columns: minmax(420px, 0.72fr) minmax(760px, 1.28fr) !important;
  gap: 46px !important;
  align-items: center !important;
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}

body.home-page .hero-copy {
  max-width: 540px !important;
}

body.home-page .hero h1 {
  max-width: 540px !important;
  font-size: clamp(2.75rem, 3.35vw, 3.85rem) !important;
  line-height: 1.04 !important;
}

body.home-page .hero-image-panel,
body.home-page .hero-visual.hero-image-panel {
  width: 100% !important;
  max-width: 920px !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 auto !important;
  border-radius: 30px !important;
  overflow: hidden !important;
}

body.home-page .hero-workflow-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  image-rendering: auto;
}

@media (min-width: 1600px) {
  body.home-page .hero-image-panel,
  body.home-page .hero-visual.hero-image-panel {
    max-width: 980px !important;
  }
}

@media (max-width: 1180px) {
  body.home-page main {
    width: min(100% - 36px, 1080px) !important;
  }

  body.home-page .hero {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  body.home-page .hero-copy {
    max-width: 760px !important;
  }

  body.home-page .hero-image-panel,
  body.home-page .hero-visual.hero-image-panel {
    max-width: 900px !important;
  }
}


/* =========================================================
   FINAL MOBILE RESPONSIVE PASS
   Home + AI Products + About
   ========================================================= */

@media (max-width: 900px) {
  .site-header {
    position: relative !important;
    top: 0 !important;
    display: block !important;
    min-height: auto !important;
    padding: 18px 0 10px !important;
  }

  .site-header .brand.brand-home.brand-final {
    display: block !important;
    width: 210px !important;
    max-width: 72vw !important;
    margin: 0 0 16px 0 !important;
  }

  .nav-shell {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-shell::-webkit-scrollbar {
    display: none;
  }

  .main-nav {
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    padding: 0 2px 8px !important;
    white-space: nowrap !important;
  }

  .main-nav a {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 8px 0 !important;
    font-size: .82rem !important;
  }

  body {
    overflow-x: hidden !important;
  }

  main,
  .section,
  .hero,
  .products-hero-compact,
  .about-hero,
  .split-panel,
  .estimate-section,
  .cta,
  .site-footer {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.home-page .hero {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-top: 28px !important;
    padding-bottom: 38px !important;
    min-height: auto !important;
  }

  body.home-page .hero-copy,
  body.home-page .hero h1,
  body.home-page .hero-text {
    max-width: 100% !important;
  }

  body.home-page .hero h1 {
    font-size: clamp(2.35rem, 9.8vw, 3.45rem) !important;
    line-height: 1.02 !important;
  }

  body.home-page .hero-image-panel,
  body.home-page .hero-visual.hero-image-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 22px !important;
  }

  .products-hero-compact {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding-top: 28px !important;
    padding-bottom: 30px !important;
  }

  .products-hero-copy,
  .products-hero-compact h1,
  .products-hero-compact .hero-text {
    max-width: 100% !important;
    width: 100% !important;
  }

  .products-hero-compact h1 {
    font-size: clamp(2.25rem, 9.6vw, 3.25rem) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
  }

  .products-hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 22px !important;
  }

  .product-grid,
  #solutions .card-grid.four {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .product-card,
  .feature-card,
  .process-card,
  .mini-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .product-card {
    padding: 22px !important;
  }

  .product-card h3,
  .process-card h3,
  .feature-card h3 {
    overflow-wrap: anywhere !important;
  }

  .product-card p,
  .product-card li,
  .process-card p,
  .feature-card p {
    font-size: .95rem !important;
    line-height: 1.6 !important;
  }

  .product-principles .section-heading,
  .product-principles .section-heading h2,
  .product-principles .section-heading p {
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-principles .section-heading h2 {
    font-size: clamp(2rem, 8.7vw, 2.85rem) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .about-hero {
    max-width: 100% !important;
    padding-top: 32px !important;
  }

  .about-hero h1 {
    max-width: 100% !important;
    font-size: clamp(2.35rem, 9.5vw, 3.35rem) !important;
  }

  .split-panel {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 24px !important;
  }

  .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .primary-button,
  .secondary-button {
    min-height: 48px !important;
    padding: 0 18px !important;
    font-size: .88rem !important;
  }

  .footer-inner.footer-inner-clean {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .footer-contact {
    justify-items: start !important;
    text-align: left !important;
  }

  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

@media (max-width: 640px) {
  :root {
    --site-gutter: 14px;
  }

  .site-header,
  main,
  .site-footer {
    width: calc(100% - 28px) !important;
  }

  .site-header .brand.brand-home.brand-final {
    width: 190px !important;
  }

  .main-nav {
    gap: 15px !important;
  }

  .main-nav a {
    font-size: .78rem !important;
  }

  .eyebrow,
  .eyebrow-pill {
    font-size: .7rem !important;
  }

  .product-card {
    padding: 20px !important;
  }

  .product-card ul {
    padding-left: 17px !important;
  }

  .product-cta {
    padding: 34px 20px !important;
  }

  .product-cta h2 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
  }
}


/* =========================================================
   HOME MOBILE FINAL POLISH
   Keeps AI Products and About mobile behavior unchanged.
   ========================================================= */

@media (max-width: 900px) {
  body.home-page .site-header .brand.brand-home.brand-final {
    width: 225px !important;
    max-width: 76vw !important;
    margin-bottom: 18px !important;
  }

  body.home-page .main-nav {
    gap: 20px !important;
    padding-bottom: 10px !important;
  }

  body.home-page .main-nav a {
    font-size: .84rem !important;
  }

  body.home-page .hero {
    gap: 32px !important;
    padding-top: 34px !important;
    padding-bottom: 48px !important;
  }

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

  body.home-page .hero h1 {
    max-width: 92% !important;
    font-size: clamp(2.45rem, 9.2vw, 3.4rem) !important;
    line-height: 1.035 !important;
    letter-spacing: -.035em !important;
  }

  body.home-page .hero-text {
    max-width: 95% !important;
    font-size: 1rem !important;
    line-height: 1.68 !important;
    margin-bottom: 28px !important;
  }

  body.home-page .hero-actions {
    margin-top: 22px !important;
    margin-bottom: 26px !important;
  }

  body.home-page .hero-benefits {
    gap: 12px !important;
  }

  body.home-page .benefit-row {
    padding: 15px 16px !important;
  }

  body.home-page .benefit-row strong {
    font-size: .98rem !important;
  }

  body.home-page .benefit-row small {
    font-size: .88rem !important;
    line-height: 1.55 !important;
  }

  body.home-page .hero-image-panel {
    margin-top: 4px !important;
  }

  body.home-page .trusted,
  body.home-page .section,
  body.home-page .cta,
  body.home-page .estimate-section {
    margin-bottom: 64px !important;
  }

  body.home-page .section-heading {
    margin-bottom: 26px !important;
  }

  body.home-page .section-heading h2 {
    font-size: clamp(2.05rem, 8.5vw, 2.75rem) !important;
    line-height: 1.08 !important;
  }

  body.home-page .section-heading p:not(.eyebrow) {
    font-size: .98rem !important;
    line-height: 1.65 !important;
  }

  body.home-page .feature-card,
  body.home-page .industry-card,
  body.home-page .process-card,
  body.home-page .mini-card {
    padding: 22px !important;
  }

  body.home-page .feature-card h3,
  body.home-page .industry-card h3,
  body.home-page .process-card h3 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  body.home-page .feature-card p,
  body.home-page .industry-card p,
  body.home-page .process-card p,
  body.home-page .mini-card p {
    font-size: .95rem !important;
    line-height: 1.62 !important;
  }

  body.home-page .estimate-section {
    padding: 28px 22px !important;
  }

  body.home-page .estimate-copy h2 {
    font-size: clamp(2rem, 8vw, 2.7rem) !important;
    line-height: 1.08 !important;
  }

  body.home-page .estimate-copy p,
  body.home-page .estimate-form label,
  body.home-page .estimate-form input,
  body.home-page .estimate-form select,
  body.home-page .estimate-form textarea {
    font-size: .95rem !important;
  }
}

@media (max-width: 640px) {
  body.home-page .site-header .brand.brand-home.brand-final {
    width: 205px !important;
  }

  body.home-page .main-nav {
    gap: 17px !important;
  }

  body.home-page .main-nav a {
    font-size: .8rem !important;
  }

  body.home-page .hero h1 {
    max-width: 96% !important;
    font-size: clamp(2.35rem, 10.1vw, 3.15rem) !important;
  }

  body.home-page .hero-text {
    max-width: 100% !important;
  }

  body.home-page .trusted,
  body.home-page .section,
  body.home-page .cta,
  body.home-page .estimate-section {
    margin-bottom: 56px !important;
  }

  body.home-page .feature-card,
  body.home-page .industry-card,
  body.home-page .process-card,
  body.home-page .mini-card {
    padding: 20px !important;
  }
}


/* =========================================================
   FINAL MOBILE NAVIGATION
   All six links stay visible; desktop remains unchanged.
   ========================================================= */

@media (max-width: 900px) {
  .site-header {
    display: block !important;
    padding-top: 18px !important;
    padding-bottom: 12px !important;
  }

  .site-header .brand.brand-home.brand-final {
    display: block !important;
    width: 205px !important;
    max-width: 70vw !important;
    margin: 0 0 18px 0 !important;
  }

  .nav-shell {
    width: 100% !important;
    overflow: visible !important;
  }

  .main-nav {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px 10px !important;
    padding: 0 !important;
    white-space: normal !important;
  }

  .main-nav a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 42px !important;
    padding: 9px 5px !important;
    border-radius: 10px;
    font-size: .80rem !important;
    text-align: center;
  }

  .main-nav a.active {
    background: rgba(143, 248, 243, .045);
  }

  .main-nav a::after {
    left: 22% !important;
    right: 22% !important;
    bottom: 3px !important;
    width: auto !important;
  }
}

@media (max-width: 430px) {
  .site-header .brand.brand-home.brand-final {
    width: 190px !important;
  }

  .main-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px 8px !important;
  }

  .main-nav a {
    font-size: .82rem !important;
  }
}


/* =========================================================
   FINAL ROBUST MOBILE MENU — no JavaScript dependency
   ========================================================= */
.mobile-nav { display: none; }

@media (max-width: 900px) {
  .site-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }

  .site-header .brand.brand-home.brand-final {
    width: 205px !important;
    max-width: 65vw !important;
    margin: 0 !important;
  }

  .site-header > .nav-shell { display: none !important; }

  .mobile-nav {
    display: block !important;
    position: relative;
    margin-left: auto;
    z-index: 1000;
  }

  .mobile-nav summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(143,248,243,.34);
    border-radius: 12px;
    background: rgba(7,12,28,.92);
    color: #f4f8ff;
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
  }

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

  .mobile-nav[open] summary {
    border-color: rgba(143,248,243,.7);
    box-shadow: 0 0 18px rgba(69,224,214,.12);
  }

  .mobile-nav[open] .menu-icon { font-size: 0; }
  .mobile-nav[open] .menu-icon::after { content: "×"; font-size: 1.35rem; line-height: 1; }

  .mobile-nav-links {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(290px, calc(100vw - 28px));
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(143,248,243,.20);
    border-radius: 16px;
    background: rgba(5,7,22,.98);
    box-shadow: 0 18px 50px rgba(0,0,0,.38);
    backdrop-filter: blur(16px);
  }

  .mobile-nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #edf1ff;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 750;
  }

  .mobile-nav-links a:hover,
  .mobile-nav-links a.active {
    color: var(--tiffany);
    background: rgba(143,248,243,.07);
  }
}

@media (max-width: 430px) {
  .site-header .brand.brand-home.brand-final {
    width: 180px !important;
    max-width: 60vw !important;
  }

  .mobile-nav summary {
    padding: 0 12px;
  }
}


/* =========================================================
   iFlowork FINAL SITE HEADER + WHATSAPP — ALL PAGES
   Desktop (>900px): full navigation only
   Mobile/tablet (<=900px): logo + Menu only
   ========================================================= */

/* Mobile menu hidden by default on desktop. */
.site-header > .mobile-nav {
  display: none !important;
}

/* DESKTOP */
@media (min-width: 901px) {
  .site-header > .nav-shell {
    display: flex !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .site-header > .mobile-nav {
    display: none !important;
    visibility: hidden !important;
  }
}

/* MOBILE + TABLET */
@media (max-width: 900px) {
  .site-header {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* Hide the complete desktop navigation on mobile. */
  .site-header > .nav-shell {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  /* Show only the mobile Menu control. */
  .site-header > .mobile-nav {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
    margin-left: auto !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
  }

  .site-header .brand.brand-home.brand-final {
    margin: 0 !important;
  }

  /* Dropdown menu appears only after Menu is opened. */
  .site-header > .mobile-nav:not([open]) > .mobile-nav-links {
    display: none !important;
  }

  .site-header > .mobile-nav[open] > .mobile-nav-links {
    display: grid !important;
  }
}

/* Keep only the original contact-section WhatsApp button green. */
.estimate-actions .whatsapp-button {
  background: linear-gradient(135deg, #128c4a, #25d366) !important;
  border-color: rgba(37, 211, 102, .55) !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 24px rgba(18, 140, 74, .18),
    0 0 20px rgba(37, 211, 102, .12) !important;
}

.estimate-actions .whatsapp-button:hover {
  color: #ffffff !important;
  filter: brightness(1.05);
}


/* =========================================================
   iFlowork homepage dynamic workflow video — FIRST LOOK
   Only replaces the former static workflow image.
   ========================================================= */
body.home-page .hero-workflow-video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
  outline: 0;
  background: #030611;
}

/* Preserve the same responsive visual container on mobile/tablet. */
@media (max-width: 1180px) {
  body.home-page .hero-workflow-video {
    width: 100% !important;
    height: auto !important;
  }
}


/* =========================================================
   Android/mobile homepage video fit fix
   Keep full workflow video visible; do not crop.
   ========================================================= */
@media (max-width: 1180px) {
  body.home-page .hero-workflow-video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center center !important;
    max-height: none !important;
  }

  body.home-page .hero-visual,
  body.home-page .hero-visual-static {
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
  }
}


/* =========================================================
   SAFE ANDROID/TABLET VIDEO CONTAINER FIX ONLY
   No logo, navigation, footer, form, or content changes.
   ========================================================= */
@media (max-width: 1180px) {
  body.home-page .hero-image-panel {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }

  body.home-page .hero-image-panel .hero-workflow-video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}


/* =========================================================
   AI Production dynamic video — isolated integration only
   ========================================================= */
.product-hero-video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center center;
  border: 0;
  outline: 0;
  background: #030611;
}

@media (max-width: 1180px) {
  .product-hero-video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}


/* =========================================================
   AI Production TRUE 16:9 mobile/tablet fix
   Targets the actual live parent: .products-hero-visual
   ========================================================= */
@media (max-width: 1180px) {
  .products-hero-visual {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .products-hero-visual > .product-hero-video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
  }
}


/* =========================================================
   AI Production MOBILE/TABLET hard 16:9 fallback
   Reliable on Safari / Chrome / iPad / Android.
   Uses the classic padding-ratio box instead of relying only
   on CSS aspect-ratio for a replaced <video> element.
   ========================================================= */
@media (max-width: 1180px) {
  .products-hero-visual {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    /* Force a real 16:9 landscape box in all mobile browsers */
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    padding-top: 56.25% !important;

    overflow: hidden !important;
    aspect-ratio: auto !important;
  }

  .products-hero-visual > .product-hero-video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
  }
}


/* =========================================================
   iFlowork — HOMEPAGE FULL DYNAMIC MOTION
   Homepage only. No animated background. No layout redesign.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- HERO ---------- */
  html.iflowork-full-motion body.home-page .hero-copy > .eyebrow-pill,
  html.iflowork-full-motion body.home-page .hero-copy > h1,
  html.iflowork-full-motion body.home-page .hero-copy > .hero-text,
  html.iflowork-full-motion body.home-page .hero-copy > .hero-actions,
  html.iflowork-full-motion body.home-page .hero-copy > .benefit-row,
  html.iflowork-full-motion body.home-page .hero-image-panel {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .72s cubic-bezier(.2,.7,.2,1),
                transform .72s cubic-bezier(.2,.7,.2,1);
  }

  html.iflowork-full-motion body.home-page.iflowork-hero-on .hero-copy > .eyebrow-pill,
  html.iflowork-full-motion body.home-page.iflowork-hero-on .hero-copy > h1,
  html.iflowork-full-motion body.home-page.iflowork-hero-on .hero-copy > .hero-text,
  html.iflowork-full-motion body.home-page.iflowork-hero-on .hero-copy > .hero-actions,
  html.iflowork-full-motion body.home-page.iflowork-hero-on .hero-copy > .benefit-row,
  html.iflowork-full-motion body.home-page.iflowork-hero-on .hero-image-panel {
    opacity: 1;
    transform: translateY(0);
  }

  html.iflowork-full-motion body.home-page.iflowork-hero-on .hero-copy > .eyebrow-pill { transition-delay: .04s; }
  html.iflowork-full-motion body.home-page.iflowork-hero-on .hero-copy > h1            { transition-delay: .12s; }
  html.iflowork-full-motion body.home-page.iflowork-hero-on .hero-copy > .hero-text    { transition-delay: .20s; }
  html.iflowork-full-motion body.home-page.iflowork-hero-on .hero-copy > .hero-actions { transition-delay: .28s; }
  html.iflowork-full-motion body.home-page.iflowork-hero-on .benefit-row                { transition-delay: .36s; }
  html.iflowork-full-motion body.home-page.iflowork-hero-on .hero-image-panel           { transition-delay: .16s; }

  /* ---------- GENERAL SCROLL MOTION ---------- */
  html.iflowork-full-motion body.home-page [data-iflowork-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity .72s cubic-bezier(.2,.7,.2,1),
      transform .72s cubic-bezier(.2,.7,.2,1),
      border-color .28s ease,
      box-shadow .28s ease,
      background .28s ease;
    will-change: opacity, transform;
  }

  html.iflowork-full-motion body.home-page [data-iflowork-reveal="left"] {
    transform: translateX(-34px);
  }

  html.iflowork-full-motion body.home-page [data-iflowork-reveal="right"] {
    transform: translateX(34px);
  }

  html.iflowork-full-motion body.home-page [data-iflowork-reveal="scale"] {
    transform: translateY(22px) scale(.965);
  }

  html.iflowork-full-motion body.home-page [data-iflowork-reveal].iflowork-visible {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
  }

  html.iflowork-full-motion body.home-page [data-iflowork-delay="1"] { transition-delay: .05s; }
  html.iflowork-full-motion body.home-page [data-iflowork-delay="2"] { transition-delay: .10s; }
  html.iflowork-full-motion body.home-page [data-iflowork-delay="3"] { transition-delay: .15s; }
  html.iflowork-full-motion body.home-page [data-iflowork-delay="4"] { transition-delay: .20s; }
  html.iflowork-full-motion body.home-page [data-iflowork-delay="5"] { transition-delay: .25s; }
  html.iflowork-full-motion body.home-page [data-iflowork-delay="6"] { transition-delay: .30s; }

  /* ---------- SECTION HEADING ACCENT ---------- */
  body.home-page .section-heading {
    position: relative;
  }

  body.home-page .section-heading::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan), var(--violet));
    box-shadow: 0 0 18px rgba(24,216,243,.18);
    transition: width .8s cubic-bezier(.2,.7,.2,1);
  }

  body.home-page .section-heading.iflowork-visible::after {
    width: min(180px, 36%);
  }

  /* ---------- TRUSTED TECHNOLOGIES ---------- */
  body.home-page .tech-strip span {
    transition:
      transform .26s ease,
      border-color .26s ease,
      box-shadow .26s ease,
      background .26s ease;
  }

  body.home-page .tech-strip span:hover {
    transform: translateY(-4px);
    border-color: rgba(143,248,243,.34);
    box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 0 20px rgba(24,216,243,.06);
  }

  /* ---------- SOLUTION / PROCESS / ABOUT / INDUSTRY CARDS ---------- */
  body.home-page .feature-card,
  body.home-page .process-card,
  body.home-page .mini-card,
  body.home-page .industry-detail-card {
    transition:
      transform .30s cubic-bezier(.2,.7,.2,1),
      border-color .30s ease,
      box-shadow .30s ease,
      background .30s ease !important;
  }

  body.home-page .feature-card:hover,
  body.home-page .process-card:hover,
  body.home-page .mini-card:hover,
  body.home-page .industry-detail-card:hover {
    transform: translateY(-8px) scale(1.012);
    border-color: rgba(143,248,243,.36);
    box-shadow:
      0 22px 52px rgba(0,0,0,.22),
      0 0 30px rgba(24,216,243,.07);
  }

  /* ---------- AUTOMATION PANEL ---------- */
  body.home-page .automation-panel > div {
    transition:
      transform .26s ease,
      border-color .26s ease,
      background .26s ease,
      box-shadow .26s ease;
  }

  body.home-page .automation-panel > div:hover {
    transform: translateX(7px);
    border-color: rgba(143,248,243,.30);
    box-shadow: 0 8px 22px rgba(0,0,0,.16);
  }

  /* ---------- SECONDARY INDUSTRY PILLS / ITEMS ---------- */
  body.home-page .industry-secondary span,
  body.home-page .industry-secondary a {
    transition:
      transform .24s ease,
      border-color .24s ease,
      color .24s ease,
      background .24s ease;
  }

  body.home-page .industry-secondary span:hover,
  body.home-page .industry-secondary a:hover {
    transform: translateY(-3px);
  }

  /* ---------- BUTTONS ---------- */
  body.home-page .primary-button,
  body.home-page .secondary-button {
    position: relative;
    overflow: hidden;
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      border-color .22s ease,
      background .22s ease !important;
  }

  body.home-page .primary-button:hover,
  body.home-page .secondary-button:hover {
    transform: translateY(-3px);
  }

  body.home-page .primary-button:hover {
    box-shadow: 0 14px 34px rgba(24,216,243,.14);
  }

  /* ---------- HERO VIDEO PANEL ---------- */
  body.home-page .hero-image-panel {
    transition:
      transform .48s cubic-bezier(.2,.7,.2,1),
      box-shadow .48s ease !important;
  }

  @media (hover: hover) and (min-width: 901px) {
    body.home-page .hero-image-panel:hover {
      transform: translateY(-5px) scale(1.006);
      box-shadow:
        0 26px 72px rgba(0,0,0,.28),
        0 0 40px rgba(24,216,243,.06);
    }
  }

  /* ---------- CONTACT / ESTIMATE ---------- */
  body.home-page .estimate-form-shell {
    transition:
      transform .34s cubic-bezier(.2,.7,.2,1),
      border-color .34s ease,
      box-shadow .34s ease;
  }

  body.home-page .estimate-form-shell:hover {
    transform: translateY(-5px);
    border-color: rgba(143,248,243,.26);
    box-shadow: 0 24px 56px rgba(0,0,0,.20);
  }

  /* ---------- SUBTLE SECTION PARALLAX FEEL ---------- */
  body.home-page section.iflowork-section-active > .section-heading,
  body.home-page section.iflowork-section-active > .estimate-left {
    transform: translateY(-2px);
  }
}

/* Mobile: motion stays clean and lighter */
@media (max-width: 640px) {
  html.iflowork-full-motion body.home-page [data-iflowork-reveal="left"],
  html.iflowork-full-motion body.home-page [data-iflowork-reveal="right"],
  html.iflowork-full-motion body.home-page [data-iflowork-reveal="scale"],
  html.iflowork-full-motion body.home-page [data-iflowork-reveal] {
    transform: translateY(16px);
  }

  body.home-page .feature-card:hover,
  body.home-page .process-card:hover,
  body.home-page .mini-card:hover,
  body.home-page .industry-detail-card:hover,
  body.home-page .automation-panel > div:hover,
  body.home-page .estimate-form-shell:hover,
  body.home-page .primary-button:hover,
  body.home-page .secondary-button:hover {
    transform: none !important;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  html.iflowork-full-motion body.home-page [data-iflowork-reveal],
  html.iflowork-full-motion body.home-page .hero-copy > *,
  html.iflowork-full-motion body.home-page .hero-image-panel {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.home-page .section-heading::after {
    width: min(180px, 36%) !important;
    transition: none !important;
  }
}


/* =========================================================
   iFlowork — HERO BENEFIT CARDS DYNAMIC PATCH
   Targets the 01 / 02 / 03 cards under the hero buttons.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
  body.home-page .benefit-row article {
    position: relative;
    overflow: hidden;
    transition:
      transform .30s cubic-bezier(.2,.7,.2,1),
      border-color .30s ease,
      box-shadow .30s ease,
      background .30s ease !important;
  }

  body.home-page .benefit-row article::after {
    content: "";
    position: absolute;
    inset: auto -20% -45% -20%;
    height: 90%;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 0%,
        rgba(24,216,243,.16),
        rgba(143,69,255,.08) 38%,
        transparent 72%);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .32s ease, transform .32s ease;
  }

  body.home-page .benefit-row article:hover {
    transform: translateY(-7px) scale(1.018);
    border-color: rgba(143,248,243,.40);
    box-shadow:
      0 18px 42px rgba(0,0,0,.22),
      0 0 26px rgba(24,216,243,.08);
    background:
      radial-gradient(circle at 90% 0%, rgba(24,216,243,.11), transparent 9rem),
      rgba(255,255,255,.055);
  }

  body.home-page .benefit-row article:hover::after {
    opacity: 1;
    transform: translateY(0);
  }

  body.home-page .benefit-icon {
    transition:
      transform .30s cubic-bezier(.2,.7,.2,1),
      border-color .30s ease,
      box-shadow .30s ease,
      background .30s ease;
  }

  body.home-page .benefit-row article:hover .benefit-icon {
    transform: translateY(-2px) scale(1.08);
    border-color: rgba(143,248,243,.48);
    background: rgba(143,248,243,.12);
    box-shadow: 0 0 22px rgba(24,216,243,.12);
  }

  /* Entrance stagger for the three benefit cards */
  html.iflowork-full-motion body.home-page .benefit-row article[data-iflowork-benefit] {
    opacity: 0;
    transform: translateY(20px) scale(.975);
    transition:
      opacity .62s cubic-bezier(.2,.7,.2,1),
      transform .62s cubic-bezier(.2,.7,.2,1),
      border-color .30s ease,
      box-shadow .30s ease,
      background .30s ease;
  }

  html.iflowork-full-motion body.home-page.iflowork-benefits-on .benefit-row article[data-iflowork-benefit] {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  html.iflowork-full-motion body.home-page.iflowork-benefits-on .benefit-row article[data-iflowork-benefit="1"] {
    transition-delay: .34s;
  }

  html.iflowork-full-motion body.home-page.iflowork-benefits-on .benefit-row article[data-iflowork-benefit="2"] {
    transition-delay: .43s;
  }

  html.iflowork-full-motion body.home-page.iflowork-benefits-on .benefit-row article[data-iflowork-benefit="3"] {
    transition-delay: .52s;
  }
}

@media (max-width: 640px) {
  body.home-page .benefit-row article:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.iflowork-full-motion body.home-page .benefit-row article[data-iflowork-benefit] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================================
   iFlowork — AI PRODUCTION DYNAMIC FINISH
   Matches approved Homepage Dynamic V2.
   No background animation. No video/layout restructuring.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- HERO ---------- */
  html.iflowork-ai-products-motion body.ai-products-page .products-hero-copy > .eyebrow,
  html.iflowork-ai-products-motion body.ai-products-page .products-hero-copy > h1,
  html.iflowork-ai-products-motion body.ai-products-page .products-hero-copy > .hero-text,
  html.iflowork-ai-products-motion body.ai-products-page .products-hero-copy > .hero-actions,
  html.iflowork-ai-products-motion body.ai-products-page .products-hero-visual {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity .72s cubic-bezier(.2,.7,.2,1),
      transform .72s cubic-bezier(.2,.7,.2,1);
  }

  html.iflowork-ai-products-motion body.ai-products-page.iflowork-ai-hero-on .products-hero-copy > .eyebrow,
  html.iflowork-ai-products-motion body.ai-products-page.iflowork-ai-hero-on .products-hero-copy > h1,
  html.iflowork-ai-products-motion body.ai-products-page.iflowork-ai-hero-on .products-hero-copy > .hero-text,
  html.iflowork-ai-products-motion body.ai-products-page.iflowork-ai-hero-on .products-hero-copy > .hero-actions,
  html.iflowork-ai-products-motion body.ai-products-page.iflowork-ai-hero-on .products-hero-visual {
    opacity: 1;
    transform: translateY(0);
  }

  html.iflowork-ai-products-motion body.ai-products-page.iflowork-ai-hero-on .products-hero-copy > .eyebrow { transition-delay: .04s; }
  html.iflowork-ai-products-motion body.ai-products-page.iflowork-ai-hero-on .products-hero-copy > h1 { transition-delay: .12s; }
  html.iflowork-ai-products-motion body.ai-products-page.iflowork-ai-hero-on .products-hero-copy > .hero-text { transition-delay: .20s; }
  html.iflowork-ai-products-motion body.ai-products-page.iflowork-ai-hero-on .products-hero-copy > .hero-actions { transition-delay: .28s; }
  html.iflowork-ai-products-motion body.ai-products-page.iflowork-ai-hero-on .products-hero-visual { transition-delay: .14s; }

  /* ---------- SCROLL REVEAL ---------- */
  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity .70s cubic-bezier(.2,.7,.2,1),
      transform .70s cubic-bezier(.2,.7,.2,1),
      border-color .28s ease,
      box-shadow .28s ease,
      background .28s ease;
    will-change: opacity, transform;
  }

  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-reveal="left"] {
    transform: translateX(-32px);
  }

  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-reveal="right"] {
    transform: translateX(32px);
  }

  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-reveal="scale"] {
    transform: translateY(20px) scale(.97);
  }

  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-reveal].iflowork-ai-visible {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
  }

  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-delay="1"] { transition-delay: .05s; }
  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-delay="2"] { transition-delay: .10s; }
  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-delay="3"] { transition-delay: .15s; }
  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-delay="4"] { transition-delay: .20s; }
  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-delay="5"] { transition-delay: .25s; }
  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-delay="6"] { transition-delay: .30s; }

  /* ---------- SECTION ACCENT ---------- */
  body.ai-products-page .section-heading {
    position: relative;
  }

  body.ai-products-page .section-heading::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan), var(--violet));
    box-shadow: 0 0 18px rgba(24,216,243,.16);
    transition: width .8s cubic-bezier(.2,.7,.2,1);
  }

  body.ai-products-page .section-heading.iflowork-ai-visible::after {
    width: min(180px, 36%);
  }

  /* ---------- PRODUCT CARDS ---------- */
  body.ai-products-page .product-card {
    position: relative;
    overflow: hidden;
    transition:
      transform .30s cubic-bezier(.2,.7,.2,1),
      border-color .30s ease,
      box-shadow .30s ease,
      background .30s ease !important;
  }

  body.ai-products-page .product-card::after {
    content: "";
    position: absolute;
    inset: auto -18% -52% -18%;
    height: 85%;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 0%,
        rgba(24,216,243,.13),
        rgba(143,69,255,.07) 40%,
        transparent 72%);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .32s ease, transform .32s ease;
  }

  body.ai-products-page .product-card:hover {
    transform: translateY(-8px) scale(1.012);
    border-color: rgba(143,248,243,.36);
    box-shadow:
      0 22px 52px rgba(0,0,0,.22),
      0 0 30px rgba(24,216,243,.07);
  }

  body.ai-products-page .product-card:hover::after {
    opacity: 1;
    transform: translateY(0);
  }

  /* ---------- HERO VIDEO PANEL ---------- */
  body.ai-products-page .products-hero-visual {
    transition:
      transform .48s cubic-bezier(.2,.7,.2,1),
      box-shadow .48s ease !important;
  }

  @media (hover: hover) and (min-width: 901px) {
    body.ai-products-page .products-hero-visual:hover {
      transform: translateY(-5px) scale(1.006);
      box-shadow:
        0 26px 72px rgba(0,0,0,.28),
        0 0 40px rgba(24,216,243,.06);
    }
  }

  /* ---------- BUTTONS ---------- */
  body.ai-products-page .primary-button,
  body.ai-products-page .secondary-button {
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      border-color .22s ease,
      background .22s ease !important;
  }

  body.ai-products-page .primary-button:hover,
  body.ai-products-page .secondary-button:hover {
    transform: translateY(-3px);
  }

  body.ai-products-page .primary-button:hover {
    box-shadow: 0 14px 34px rgba(24,216,243,.14);
  }

  /* ---------- PRINCIPLES / CTA ---------- */
  body.ai-products-page .product-principles,
  body.ai-products-page .product-cta {
    transition:
      transform .34s cubic-bezier(.2,.7,.2,1),
      border-color .34s ease,
      box-shadow .34s ease;
  }

  body.ai-products-page .product-cta:hover {
    transform: translateY(-5px);
    border-color: rgba(143,248,243,.24);
    box-shadow: 0 24px 56px rgba(0,0,0,.20);
  }
}

/* Mobile: lighter, no hover movement */
@media (max-width: 640px) {
  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-reveal],
  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-reveal="left"],
  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-reveal="right"],
  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-reveal="scale"] {
    transform: translateY(16px);
  }

  body.ai-products-page .product-card:hover,
  body.ai-products-page .products-hero-visual:hover,
  body.ai-products-page .product-cta:hover,
  body.ai-products-page .primary-button:hover,
  body.ai-products-page .secondary-button:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.iflowork-ai-products-motion body.ai-products-page [data-iflowork-ai-reveal],
  html.iflowork-ai-products-motion body.ai-products-page .products-hero-copy > *,
  html.iflowork-ai-products-motion body.ai-products-page .products-hero-visual {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.ai-products-page .section-heading::after {
    width: min(180px, 36%) !important;
    transition: none !important;
  }
}


/* =========================================================
   iFlowork — SOLUTIONS PAGE DYNAMIC FINISH
   Matches approved Homepage V2 + AI Production motion style.
   No animated background. No layout redesign.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* HERO */
  html.iflowork-solutions-motion body.solutions-page .about-hero > .eyebrow,
  html.iflowork-solutions-motion body.solutions-page .about-hero > h1,
  html.iflowork-solutions-motion body.solutions-page .about-hero > .hero-text,
  html.iflowork-solutions-motion body.solutions-page .about-hero > .hero-actions {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity .72s cubic-bezier(.2,.7,.2,1),
      transform .72s cubic-bezier(.2,.7,.2,1);
  }

  html.iflowork-solutions-motion body.solutions-page.iflowork-solutions-hero-on .about-hero > .eyebrow,
  html.iflowork-solutions-motion body.solutions-page.iflowork-solutions-hero-on .about-hero > h1,
  html.iflowork-solutions-motion body.solutions-page.iflowork-solutions-hero-on .about-hero > .hero-text,
  html.iflowork-solutions-motion body.solutions-page.iflowork-solutions-hero-on .about-hero > .hero-actions {
    opacity: 1;
    transform: translateY(0);
  }

  html.iflowork-solutions-motion body.solutions-page.iflowork-solutions-hero-on .about-hero > .eyebrow { transition-delay: .04s; }
  html.iflowork-solutions-motion body.solutions-page.iflowork-solutions-hero-on .about-hero > h1 { transition-delay: .12s; }
  html.iflowork-solutions-motion body.solutions-page.iflowork-solutions-hero-on .about-hero > .hero-text { transition-delay: .20s; }
  html.iflowork-solutions-motion body.solutions-page.iflowork-solutions-hero-on .about-hero > .hero-actions { transition-delay: .28s; }

  /* GENERAL REVEAL */
  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity .70s cubic-bezier(.2,.7,.2,1),
      transform .70s cubic-bezier(.2,.7,.2,1),
      border-color .28s ease,
      box-shadow .28s ease,
      background .28s ease;
    will-change: opacity, transform;
  }

  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-reveal="left"] {
    transform: translateX(-32px);
  }

  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-reveal="right"] {
    transform: translateX(32px);
  }

  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-reveal="scale"] {
    transform: translateY(20px) scale(.97);
  }

  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-reveal].iflowork-solutions-visible {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
  }

  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-delay="1"] { transition-delay: .05s; }
  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-delay="2"] { transition-delay: .10s; }
  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-delay="3"] { transition-delay: .15s; }
  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-delay="4"] { transition-delay: .20s; }
  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-delay="5"] { transition-delay: .25s; }

  /* SECTION HEADING ACCENT */
  body.solutions-page .section-heading {
    position: relative;
  }

  body.solutions-page .section-heading::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan), var(--violet));
    box-shadow: 0 0 18px rgba(24,216,243,.16);
    transition: width .8s cubic-bezier(.2,.7,.2,1);
  }

  body.solutions-page .section-heading.iflowork-solutions-visible::after {
    width: min(180px, 36%);
  }

  /* FEATURE CARDS */
  body.solutions-page .feature-card,
  body.solutions-page .process-card {
    position: relative;
    overflow: hidden;
    transition:
      transform .30s cubic-bezier(.2,.7,.2,1),
      border-color .30s ease,
      box-shadow .30s ease,
      background .30s ease !important;
  }

  body.solutions-page .feature-card::after,
  body.solutions-page .process-card::after {
    content: "";
    position: absolute;
    inset: auto -18% -52% -18%;
    height: 85%;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 0%,
        rgba(24,216,243,.13),
        rgba(143,69,255,.07) 40%,
        transparent 72%);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .32s ease, transform .32s ease;
  }

  body.solutions-page .feature-card:hover,
  body.solutions-page .process-card:hover {
    transform: translateY(-8px) scale(1.012);
    border-color: rgba(143,248,243,.36);
    box-shadow:
      0 22px 52px rgba(0,0,0,.22),
      0 0 30px rgba(24,216,243,.07);
  }

  body.solutions-page .feature-card:hover::after,
  body.solutions-page .process-card:hover::after {
    opacity: 1;
    transform: translateY(0);
  }

  /* AUTOMATION PANEL ROWS */
  body.solutions-page .automation-panel > div {
    transition:
      transform .26s ease,
      border-color .26s ease,
      background .26s ease,
      box-shadow .26s ease;
  }

  body.solutions-page .automation-panel > div:hover {
    transform: translateX(7px);
    border-color: rgba(143,248,243,.30);
    box-shadow: 0 8px 22px rgba(0,0,0,.16);
  }

  /* CTA + BUTTONS */
  body.solutions-page .cta {
    transition:
      transform .34s cubic-bezier(.2,.7,.2,1),
      border-color .34s ease,
      box-shadow .34s ease;
  }

  body.solutions-page .cta:hover {
    transform: translateY(-5px);
    border-color: rgba(143,248,243,.24);
    box-shadow: 0 24px 56px rgba(0,0,0,.20);
  }

  body.solutions-page .primary-button,
  body.solutions-page .secondary-button {
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      border-color .22s ease,
      background .22s ease !important;
  }

  body.solutions-page .primary-button:hover,
  body.solutions-page .secondary-button:hover {
    transform: translateY(-3px);
  }

  body.solutions-page .primary-button:hover {
    box-shadow: 0 14px 34px rgba(24,216,243,.14);
  }
}

/* Mobile: lighter motion */
@media (max-width: 640px) {
  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-reveal],
  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-reveal="left"],
  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-reveal="right"],
  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-reveal="scale"] {
    transform: translateY(16px);
  }

  body.solutions-page .feature-card:hover,
  body.solutions-page .process-card:hover,
  body.solutions-page .automation-panel > div:hover,
  body.solutions-page .cta:hover,
  body.solutions-page .primary-button:hover,
  body.solutions-page .secondary-button:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.iflowork-solutions-motion body.solutions-page [data-iflowork-solutions-reveal],
  html.iflowork-solutions-motion body.solutions-page .about-hero > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.solutions-page .section-heading::after {
    width: min(180px, 36%) !important;
    transition: none !important;
  }
}


/* =========================================================
   iFlowork — INDUSTRIES PAGE DYNAMIC FINISH
   Matches approved motion language across previous pages.
   No animated background. No layout redesign.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* HERO */
  html.iflowork-industries-motion body.industries-page .about-hero > .eyebrow,
  html.iflowork-industries-motion body.industries-page .about-hero > h1,
  html.iflowork-industries-motion body.industries-page .about-hero > .hero-text,
  html.iflowork-industries-motion body.industries-page .about-hero > .hero-actions {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity .72s cubic-bezier(.2,.7,.2,1),
      transform .72s cubic-bezier(.2,.7,.2,1);
  }

  html.iflowork-industries-motion body.industries-page.iflowork-industries-hero-on .about-hero > .eyebrow,
  html.iflowork-industries-motion body.industries-page.iflowork-industries-hero-on .about-hero > h1,
  html.iflowork-industries-motion body.industries-page.iflowork-industries-hero-on .about-hero > .hero-text,
  html.iflowork-industries-motion body.industries-page.iflowork-industries-hero-on .about-hero > .hero-actions {
    opacity: 1;
    transform: translateY(0);
  }

  html.iflowork-industries-motion body.industries-page.iflowork-industries-hero-on .about-hero > .eyebrow { transition-delay: .04s; }
  html.iflowork-industries-motion body.industries-page.iflowork-industries-hero-on .about-hero > h1 { transition-delay: .12s; }
  html.iflowork-industries-motion body.industries-page.iflowork-industries-hero-on .about-hero > .hero-text { transition-delay: .20s; }
  html.iflowork-industries-motion body.industries-page.iflowork-industries-hero-on .about-hero > .hero-actions { transition-delay: .28s; }

  /* GENERAL REVEAL */
  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity .70s cubic-bezier(.2,.7,.2,1),
      transform .70s cubic-bezier(.2,.7,.2,1),
      border-color .28s ease,
      box-shadow .28s ease,
      background .28s ease;
    will-change: opacity, transform;
  }

  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-reveal="left"] {
    transform: translateX(-32px);
  }

  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-reveal="right"] {
    transform: translateX(32px);
  }

  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-reveal="scale"] {
    transform: translateY(20px) scale(.97);
  }

  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-reveal].iflowork-industries-visible {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
  }

  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-delay="1"] { transition-delay: .06s; }
  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-delay="2"] { transition-delay: .12s; }
  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-delay="3"] { transition-delay: .18s; }

  /* SECTION HEADING ACCENT */
  body.industries-page .section-heading {
    position: relative;
  }

  body.industries-page .section-heading::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan), var(--violet));
    box-shadow: 0 0 18px rgba(24,216,243,.16);
    transition: width .8s cubic-bezier(.2,.7,.2,1);
  }

  body.industries-page .section-heading.iflowork-industries-visible::after {
    width: min(180px, 36%);
  }

  /* INDUSTRY CARDS */
  body.industries-page .industry-detail-card {
    position: relative;
    overflow: hidden;
    transition:
      transform .30s cubic-bezier(.2,.7,.2,1),
      border-color .30s ease,
      box-shadow .30s ease,
      background .30s ease !important;
  }

  body.industries-page .industry-detail-card::after {
    content: "";
    position: absolute;
    inset: auto -18% -52% -18%;
    height: 85%;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 0%,
        rgba(24,216,243,.13),
        rgba(143,69,255,.07) 40%,
        transparent 72%);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .32s ease, transform .32s ease;
  }

  body.industries-page .industry-detail-card:hover {
    transform: translateY(-8px) scale(1.012);
    border-color: rgba(143,248,243,.36);
    box-shadow:
      0 22px 52px rgba(0,0,0,.22),
      0 0 30px rgba(24,216,243,.07);
  }

  body.industries-page .industry-detail-card:hover::after {
    opacity: 1;
    transform: translateY(0);
  }

  /* CTA + BUTTONS */
  body.industries-page .cta {
    transition:
      transform .34s cubic-bezier(.2,.7,.2,1),
      border-color .34s ease,
      box-shadow .34s ease;
  }

  body.industries-page .cta:hover {
    transform: translateY(-5px);
    border-color: rgba(143,248,243,.24);
    box-shadow: 0 24px 56px rgba(0,0,0,.20);
  }

  body.industries-page .primary-button,
  body.industries-page .secondary-button {
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      border-color .22s ease,
      background .22s ease !important;
  }

  body.industries-page .primary-button:hover,
  body.industries-page .secondary-button:hover {
    transform: translateY(-3px);
  }

  body.industries-page .primary-button:hover {
    box-shadow: 0 14px 34px rgba(24,216,243,.14);
  }
}

/* Mobile: keep motion light */
@media (max-width: 640px) {
  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-reveal],
  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-reveal="left"],
  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-reveal="right"],
  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-reveal="scale"] {
    transform: translateY(16px);
  }

  body.industries-page .industry-detail-card:hover,
  body.industries-page .cta:hover,
  body.industries-page .primary-button:hover,
  body.industries-page .secondary-button:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.iflowork-industries-motion body.industries-page [data-iflowork-industries-reveal],
  html.iflowork-industries-motion body.industries-page .about-hero > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.industries-page .section-heading::after {
    width: min(180px, 36%) !important;
    transition: none !important;
  }
}


/* =========================================================
   iFlowork — INDUSTRY SECONDARY PILLS DYNAMIC PATCH
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  body.industries-page .industry-secondary span {
    position: relative;
    overflow: hidden;
    transition:
      transform .26s cubic-bezier(.2,.7,.2,1),
      border-color .26s ease,
      box-shadow .26s ease,
      background .26s ease,
      color .26s ease !important;
  }

  body.industries-page .industry-secondary span::after {
    content: "";
    position: absolute;
    inset: auto -22% -70% -22%;
    height: 115%;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 0%,
        rgba(24,216,243,.15),
        rgba(143,69,255,.08) 42%,
        transparent 74%);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .28s ease, transform .28s ease;
  }

  body.industries-page .industry-secondary span:hover {
    transform: translateY(-5px) scale(1.025);
    border-color: rgba(143,248,243,.38);
    color: #fff;
    background: rgba(255,255,255,.055);
    box-shadow:
      0 14px 30px rgba(0,0,0,.18),
      0 0 22px rgba(24,216,243,.07);
  }

  body.industries-page .industry-secondary span:hover::after {
    opacity: 1;
    transform: translateY(0);
  }

  html.iflowork-industries-motion body.industries-page .industry-secondary span[data-iflowork-industry-pill] {
    opacity: 0;
    transform: translateY(16px) scale(.975);
    transition:
      opacity .58s cubic-bezier(.2,.7,.2,1),
      transform .58s cubic-bezier(.2,.7,.2,1),
      border-color .26s ease,
      box-shadow .26s ease,
      background .26s ease,
      color .26s ease;
  }

  html.iflowork-industries-motion body.industries-page .industry-secondary.iflowork-industries-visible span[data-iflowork-industry-pill] {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  html.iflowork-industries-motion body.industries-page .industry-secondary span[data-iflowork-industry-pill="1"] { transition-delay: .05s; }
  html.iflowork-industries-motion body.industries-page .industry-secondary span[data-iflowork-industry-pill="2"] { transition-delay: .10s; }
  html.iflowork-industries-motion body.industries-page .industry-secondary span[data-iflowork-industry-pill="3"] { transition-delay: .15s; }
  html.iflowork-industries-motion body.industries-page .industry-secondary span[data-iflowork-industry-pill="4"] { transition-delay: .20s; }
  html.iflowork-industries-motion body.industries-page .industry-secondary span[data-iflowork-industry-pill="5"] { transition-delay: .25s; }
  html.iflowork-industries-motion body.industries-page .industry-secondary span[data-iflowork-industry-pill="6"] { transition-delay: .30s; }
}

@media (max-width: 640px) {
  body.industries-page .industry-secondary span:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.iflowork-industries-motion body.industries-page .industry-secondary span[data-iflowork-industry-pill] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================================
   iFlowork — ABOUT PAGE DYNAMIC FINISH
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html.iflowork-about-motion body.about-page .about-hero > .eyebrow,
  html.iflowork-about-motion body.about-page .about-hero > h1,
  html.iflowork-about-motion body.about-page .about-hero > .hero-text {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .72s cubic-bezier(.2,.7,.2,1),
                transform .72s cubic-bezier(.2,.7,.2,1);
  }

  html.iflowork-about-motion body.about-page.iflowork-about-hero-on .about-hero > .eyebrow,
  html.iflowork-about-motion body.about-page.iflowork-about-hero-on .about-hero > h1,
  html.iflowork-about-motion body.about-page.iflowork-about-hero-on .about-hero > .hero-text {
    opacity: 1;
    transform: translateY(0);
  }

  html.iflowork-about-motion body.about-page.iflowork-about-hero-on .about-hero > .eyebrow { transition-delay: .04s; }
  html.iflowork-about-motion body.about-page.iflowork-about-hero-on .about-hero > h1 { transition-delay: .12s; }
  html.iflowork-about-motion body.about-page.iflowork-about-hero-on .about-hero > .hero-text:nth-of-type(1) { transition-delay: .20s; }
  html.iflowork-about-motion body.about-page.iflowork-about-hero-on .about-hero > .hero-text:nth-of-type(2) { transition-delay: .28s; }

  html.iflowork-about-motion body.about-page [data-iflowork-about-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity .70s cubic-bezier(.2,.7,.2,1),
      transform .70s cubic-bezier(.2,.7,.2,1),
      border-color .28s ease,
      box-shadow .28s ease,
      background .28s ease;
    will-change: opacity, transform;
  }

  html.iflowork-about-motion body.about-page [data-iflowork-about-reveal="left"] { transform: translateX(-32px); }
  html.iflowork-about-motion body.about-page [data-iflowork-about-reveal="right"] { transform: translateX(32px); }
  html.iflowork-about-motion body.about-page [data-iflowork-about-reveal="scale"] { transform: translateY(20px) scale(.97); }

  html.iflowork-about-motion body.about-page [data-iflowork-about-reveal].iflowork-about-visible {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
  }

  html.iflowork-about-motion body.about-page [data-iflowork-about-delay="1"] { transition-delay: .06s; }
  html.iflowork-about-motion body.about-page [data-iflowork-about-delay="2"] { transition-delay: .12s; }
  html.iflowork-about-motion body.about-page [data-iflowork-about-delay="3"] { transition-delay: .18s; }
  html.iflowork-about-motion body.about-page [data-iflowork-about-delay="4"] { transition-delay: .24s; }

  body.about-page .section-heading {
    position: relative;
  }

  body.about-page .section-heading::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan), var(--violet));
    box-shadow: 0 0 18px rgba(24,216,243,.16);
    transition: width .8s cubic-bezier(.2,.7,.2,1);
  }

  body.about-page .section-heading.iflowork-about-visible::after {
    width: min(180px, 36%);
  }

  body.about-page .automation-panel > div,
  body.about-page .process-card {
    transition:
      transform .28s cubic-bezier(.2,.7,.2,1),
      border-color .28s ease,
      box-shadow .28s ease,
      background .28s ease !important;
  }

  body.about-page .automation-panel > div:hover {
    transform: translateX(7px);
    border-color: rgba(143,248,243,.30);
    box-shadow: 0 8px 22px rgba(0,0,0,.16);
  }

  body.about-page .process-card:hover {
    transform: translateY(-8px) scale(1.012);
    border-color: rgba(143,248,243,.36);
    box-shadow: 0 22px 52px rgba(0,0,0,.22), 0 0 30px rgba(24,216,243,.07);
  }

  body.about-page .cta {
    transition: transform .34s cubic-bezier(.2,.7,.2,1),
                border-color .34s ease,
                box-shadow .34s ease;
  }

  body.about-page .cta:hover {
    transform: translateY(-5px);
    border-color: rgba(143,248,243,.24);
    box-shadow: 0 24px 56px rgba(0,0,0,.20);
  }

  body.about-page .primary-button {
    transition: transform .22s ease, box-shadow .22s ease,
                border-color .22s ease, background .22s ease !important;
  }

  body.about-page .primary-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(24,216,243,.14);
  }
}

/* =========================================================
   iFlowork — CONTACT PAGE DYNAMIC FINISH
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html.iflowork-contact-motion body.contact-page .about-hero > .eyebrow,
  html.iflowork-contact-motion body.contact-page .about-hero > h1,
  html.iflowork-contact-motion body.contact-page .about-hero > .hero-text,
  html.iflowork-contact-motion body.contact-page .about-hero > .hero-actions {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .72s cubic-bezier(.2,.7,.2,1),
                transform .72s cubic-bezier(.2,.7,.2,1);
  }

  html.iflowork-contact-motion body.contact-page.iflowork-contact-hero-on .about-hero > .eyebrow,
  html.iflowork-contact-motion body.contact-page.iflowork-contact-hero-on .about-hero > h1,
  html.iflowork-contact-motion body.contact-page.iflowork-contact-hero-on .about-hero > .hero-text,
  html.iflowork-contact-motion body.contact-page.iflowork-contact-hero-on .about-hero > .hero-actions {
    opacity: 1;
    transform: translateY(0);
  }

  html.iflowork-contact-motion body.contact-page.iflowork-contact-hero-on .about-hero > .eyebrow { transition-delay: .04s; }
  html.iflowork-contact-motion body.contact-page.iflowork-contact-hero-on .about-hero > h1 { transition-delay: .12s; }
  html.iflowork-contact-motion body.contact-page.iflowork-contact-hero-on .about-hero > .hero-text { transition-delay: .20s; }
  html.iflowork-contact-motion body.contact-page.iflowork-contact-hero-on .about-hero > .hero-actions { transition-delay: .28s; }

  html.iflowork-contact-motion body.contact-page [data-iflowork-contact-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity .70s cubic-bezier(.2,.7,.2,1),
      transform .70s cubic-bezier(.2,.7,.2,1),
      border-color .28s ease,
      box-shadow .28s ease;
    will-change: opacity, transform;
  }

  html.iflowork-contact-motion body.contact-page [data-iflowork-contact-reveal="left"] { transform: translateX(-32px); }
  html.iflowork-contact-motion body.contact-page [data-iflowork-contact-reveal="right"] { transform: translateX(32px); }

  html.iflowork-contact-motion body.contact-page [data-iflowork-contact-reveal].iflowork-contact-visible {
    opacity: 1;
    transform: translate3d(0,0,0);
  }

  body.contact-page .estimate-left {
    position: relative;
  }

  body.contact-page .estimate-left::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan), var(--violet));
    box-shadow: 0 0 18px rgba(24,216,243,.16);
    transition: width .8s cubic-bezier(.2,.7,.2,1);
  }

  body.contact-page .estimate-left.iflowork-contact-visible::after {
    width: min(180px, 36%);
  }

  body.contact-page .estimate-form-shell {
    transition:
      transform .34s cubic-bezier(.2,.7,.2,1),
      border-color .34s ease,
      box-shadow .34s ease;
  }

  body.contact-page .estimate-form-shell:hover {
    transform: translateY(-5px);
    border-color: rgba(143,248,243,.26);
    box-shadow: 0 24px 56px rgba(0,0,0,.20);
  }

  body.contact-page .primary-button,
  body.contact-page .secondary-button {
    transition: transform .22s ease, box-shadow .22s ease,
                border-color .22s ease, background .22s ease !important;
  }

  body.contact-page .primary-button:hover,
  body.contact-page .secondary-button:hover {
    transform: translateY(-3px);
  }

  body.contact-page .primary-button:hover {
    box-shadow: 0 14px 34px rgba(24,216,243,.14);
  }
}

/* Mobile: keep all final-page motion lighter */
@media (max-width: 640px) {
  html.iflowork-about-motion body.about-page [data-iflowork-about-reveal],
  html.iflowork-about-motion body.about-page [data-iflowork-about-reveal="left"],
  html.iflowork-about-motion body.about-page [data-iflowork-about-reveal="right"],
  html.iflowork-about-motion body.about-page [data-iflowork-about-reveal="scale"],
  html.iflowork-contact-motion body.contact-page [data-iflowork-contact-reveal],
  html.iflowork-contact-motion body.contact-page [data-iflowork-contact-reveal="left"],
  html.iflowork-contact-motion body.contact-page [data-iflowork-contact-reveal="right"] {
    transform: translateY(16px);
  }

  body.about-page .automation-panel > div:hover,
  body.about-page .process-card:hover,
  body.about-page .cta:hover,
  body.about-page .primary-button:hover,
  body.contact-page .estimate-form-shell:hover,
  body.contact-page .primary-button:hover,
  body.contact-page .secondary-button:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.iflowork-about-motion body.about-page [data-iflowork-about-reveal],
  html.iflowork-about-motion body.about-page .about-hero > *,
  html.iflowork-contact-motion body.contact-page [data-iflowork-contact-reveal],
  html.iflowork-contact-motion body.contact-page .about-hero > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.about-page .section-heading::after,
  body.contact-page .estimate-left::after {
    width: min(180px, 36%) !important;
    transition: none !important;
  }
}


/* =========================================================
   iFlowork — FINAL CONSISTENCY PASS
   Standard card effect + missing outer dynamic frames
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- STANDARD CARD EFFECT ACROSS ALL PAGES ---------- */
  body.home-page .benefit-row article,
  body.home-page .feature-card,
  body.home-page .process-card,
  body.home-page .mini-card,
  body.ai-products-page .product-card,
  body.solutions-page .feature-card,
  body.solutions-page .process-card,
  body.industries-page .industry-detail-card,
  body.about-page .process-card {
    position: relative;
    overflow: hidden;
    transition:
      transform .30s cubic-bezier(.2,.7,.2,1),
      border-color .30s ease,
      box-shadow .30s ease,
      background .30s ease !important;
  }

  body.home-page .benefit-row article::after,
  body.home-page .feature-card::after,
  body.home-page .process-card::after,
  body.home-page .mini-card::after,
  body.ai-products-page .product-card::after,
  body.solutions-page .feature-card::after,
  body.solutions-page .process-card::after,
  body.industries-page .industry-detail-card::after,
  body.about-page .process-card::after {
    content: "";
    position: absolute;
    inset: auto -18% -54% -18%;
    height: 88%;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 0%,
        rgba(24,216,243,.15),
        rgba(143,69,255,.08) 40%,
        transparent 74%);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .32s ease, transform .32s ease;
  }

  body.home-page .benefit-row article:hover,
  body.home-page .feature-card:hover,
  body.home-page .process-card:hover,
  body.home-page .mini-card:hover,
  body.ai-products-page .product-card:hover,
  body.solutions-page .feature-card:hover,
  body.solutions-page .process-card:hover,
  body.industries-page .industry-detail-card:hover,
  body.about-page .process-card:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: rgba(143,248,243,.44);
    box-shadow:
      0 22px 54px rgba(0,0,0,.24),
      0 0 30px rgba(24,216,243,.09);
    background:
      radial-gradient(circle at 88% 0%, rgba(24,216,243,.12), transparent 10rem),
      linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  }

  body.home-page .benefit-row article:hover::after,
  body.home-page .feature-card:hover::after,
  body.home-page .process-card:hover::after,
  body.home-page .mini-card:hover::after,
  body.ai-products-page .product-card:hover::after,
  body.solutions-page .feature-card:hover::after,
  body.solutions-page .process-card:hover::after,
  body.industries-page .industry-detail-card:hover::after,
  body.about-page .process-card:hover::after {
    opacity: 1;
    transform: translateY(0);
  }

  /* Number/icon response where available */
  body.home-page .benefit-icon,
  body.solutions-page .process-card > span,
  body.about-page .process-card > span,
  body.ai-products-page .product-card > span {
    transition:
      transform .28s cubic-bezier(.2,.7,.2,1),
      border-color .28s ease,
      box-shadow .28s ease,
      background .28s ease;
  }

  body.home-page .benefit-row article:hover .benefit-icon,
  body.solutions-page .process-card:hover > span,
  body.about-page .process-card:hover > span,
  body.ai-products-page .product-card:hover > span {
    transform: translateY(-2px) scale(1.07);
    border-color: rgba(143,248,243,.50);
    box-shadow: 0 0 22px rgba(24,216,243,.12);
  }

  /* ---------- OUTER FRAME EFFECT: ABOUT + SOLUTIONS ---------- */
  body.about-page .section.split-panel,
  body.solutions-page .section.split-panel {
    transition:
      transform .38s cubic-bezier(.2,.7,.2,1),
      border-color .38s ease,
      box-shadow .38s ease,
      background .38s ease;
  }

  body.about-page .section.split-panel:hover,
  body.solutions-page .section.split-panel:hover {
    transform: translateY(-6px);
    border-color: rgba(143,248,243,.24);
    box-shadow:
      0 26px 62px rgba(0,0,0,.22),
      0 0 34px rgba(24,216,243,.05);
  }

  body.about-page .automation-panel,
  body.solutions-page .automation-panel {
    transition:
      transform .32s cubic-bezier(.2,.7,.2,1),
      border-color .32s ease,
      box-shadow .32s ease;
  }

  body.about-page .automation-panel:hover,
  body.solutions-page .automation-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(143,248,243,.26);
    box-shadow: 0 20px 42px rgba(0,0,0,.18);
  }

  /* ---------- OUTER FRAME EFFECT: CONTACT ---------- */
  body.contact-page #contact.estimate-section {
    transition:
      transform .38s cubic-bezier(.2,.7,.2,1),
      border-color .38s ease,
      box-shadow .38s ease;
  }

  body.contact-page #contact.estimate-section:hover {
    transform: translateY(-6px);
    border-color: rgba(143,248,243,.24);
    box-shadow:
      0 26px 62px rgba(0,0,0,.22),
      0 0 34px rgba(24,216,243,.05);
  }

  body.contact-page .estimate-left,
  body.contact-page .estimate-form-shell {
    transition:
      transform .32s cubic-bezier(.2,.7,.2,1),
      border-color .32s ease,
      box-shadow .32s ease;
  }

  body.contact-page .estimate-left:hover {
    transform: translateY(-3px);
  }

  body.contact-page .estimate-form-shell:hover {
    transform: translateY(-5px);
    border-color: rgba(143,248,243,.28);
    box-shadow: 0 22px 48px rgba(0,0,0,.20);
  }

  /* Contact "Solutions for" pills */
  body.contact-page .estimate-sectors span {
    transition:
      transform .24s ease,
      border-color .24s ease,
      box-shadow .24s ease,
      background .24s ease,
      color .24s ease;
  }

  body.contact-page .estimate-sectors span:hover {
    transform: translateY(-4px) scale(1.02);
    color: #fff;
    border-color: rgba(143,248,243,.34);
    background: rgba(255,255,255,.055);
    box-shadow: 0 10px 24px rgba(0,0,0,.16), 0 0 18px rgba(24,216,243,.06);
  }

  /* Entrance animation for large outer frames */
  html.iflowork-final-frame-motion body.about-page .section.split-panel[data-iflowork-frame],
  html.iflowork-final-frame-motion body.solutions-page .section.split-panel[data-iflowork-frame],
  html.iflowork-final-frame-motion body.contact-page #contact.estimate-section[data-iflowork-frame] {
    opacity: 0;
    transform: translateY(26px) scale(.985);
    transition:
      opacity .72s cubic-bezier(.2,.7,.2,1),
      transform .72s cubic-bezier(.2,.7,.2,1),
      border-color .38s ease,
      box-shadow .38s ease;
  }

  html.iflowork-final-frame-motion body.about-page .section.split-panel[data-iflowork-frame].iflowork-frame-visible,
  html.iflowork-final-frame-motion body.solutions-page .section.split-panel[data-iflowork-frame].iflowork-frame-visible,
  html.iflowork-final-frame-motion body.contact-page #contact.estimate-section[data-iflowork-frame].iflowork-frame-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Contact pills stagger in */
  html.iflowork-final-frame-motion body.contact-page .estimate-sectors span[data-iflowork-contact-pill] {
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transition:
      opacity .52s cubic-bezier(.2,.7,.2,1),
      transform .52s cubic-bezier(.2,.7,.2,1),
      border-color .24s ease,
      box-shadow .24s ease,
      background .24s ease,
      color .24s ease;
  }

  html.iflowork-final-frame-motion body.contact-page .estimate-sectors.iflowork-contact-pills-visible span[data-iflowork-contact-pill] {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  html.iflowork-final-frame-motion body.contact-page .estimate-sectors span[data-iflowork-contact-pill="1"] { transition-delay: .04s; }
  html.iflowork-final-frame-motion body.contact-page .estimate-sectors span[data-iflowork-contact-pill="2"] { transition-delay: .08s; }
  html.iflowork-final-frame-motion body.contact-page .estimate-sectors span[data-iflowork-contact-pill="3"] { transition-delay: .12s; }
  html.iflowork-final-frame-motion body.contact-page .estimate-sectors span[data-iflowork-contact-pill="4"] { transition-delay: .16s; }
  html.iflowork-final-frame-motion body.contact-page .estimate-sectors span[data-iflowork-contact-pill="5"] { transition-delay: .20s; }
}

/* Mobile: keep the final pass safe and subtle */
@media (max-width: 640px) {
  body.home-page .benefit-row article:hover,
  body.home-page .feature-card:hover,
  body.home-page .process-card:hover,
  body.home-page .mini-card:hover,
  body.ai-products-page .product-card:hover,
  body.solutions-page .feature-card:hover,
  body.solutions-page .process-card:hover,
  body.industries-page .industry-detail-card:hover,
  body.about-page .process-card:hover,
  body.about-page .section.split-panel:hover,
  body.solutions-page .section.split-panel:hover,
  body.about-page .automation-panel:hover,
  body.solutions-page .automation-panel:hover,
  body.contact-page #contact.estimate-section:hover,
  body.contact-page .estimate-left:hover,
  body.contact-page .estimate-form-shell:hover,
  body.contact-page .estimate-sectors span:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.iflowork-final-frame-motion [data-iflowork-frame],
  html.iflowork-final-frame-motion body.contact-page .estimate-sectors span[data-iflowork-contact-pill] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}