.elementor-2761 .elementor-element.elementor-element-70e2b90{--display:flex;--margin-top:-10%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-d3f91f9 *//* ==========================================================
   KODCRAFT AI - WORKFLOW AUTOMATION & INTEGRATION SERVICES
   Elementor-ready stylesheet. Body content only.
   Fonts are referenced but not imported so Elementor/site-level
   font loading can control delivery.
   ========================================================== */

.kc-auto-service-page {
  --kc-lime: #C7F32F;
  --kc-lime-bright: #D7FF4A;
  --kc-lime-soft: rgba(199, 243, 47, 0.10);
  --kc-lime-faint: rgba(199, 243, 47, 0.055);
  --kc-black: #070807;
  --kc-black-2: #0A0C0A;
  --kc-charcoal: #0E110E;
  --kc-charcoal-2: #121612;
  --kc-card: #101310;
  --kc-card-2: #151915;
  --kc-text: #F1F3EC;
  --kc-muted: #A5ACA1;
  --kc-muted-2: #747C72;
  --kc-border: rgba(255, 255, 255, 0.095);
  --kc-border-strong: rgba(255, 255, 255, 0.17);
  --kc-lime-border: rgba(199, 243, 47, 0.30);
  --kc-shadow: 0 24px 78px rgba(0, 0, 0, 0.32);
  --kc-radius-sm: 14px;
  --kc-radius: 20px;
  --kc-radius-lg: 28px;
  --kc-container: 1240px;
  --kc-section-space: clamp(84px, 9vw, 144px);

  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--kc-black);
  color: var(--kc-text);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.kc-auto-service-page *,
.kc-auto-service-page *::before,
.kc-auto-service-page *::after {
  box-sizing: border-box;
}

.kc-auto-service-page :where(h1, h2, h3, p, ul, ol, blockquote) {
  margin-top: 0;
}

.kc-auto-service-page :where(a, summary) {
  -webkit-tap-highlight-color: transparent;
}

.kc-auto-service-page a { color: inherit; }

.kc-auto-service-page h1,
.kc-auto-service-page h2,
.kc-auto-service-page h3 {
  font-family: "Syne", Arial, sans-serif;
  color: var(--kc-text);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.kc-auto-service-page h1 {
  margin-bottom: 28px;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.08em !important;
}

.kc-auto-service-page h2 {
  margin-bottom: 24px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1em;
}

.kc-auto-service-page h3 {
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1em;
}

.kc-auto-service-page p,
.kc-auto-service-page li {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

.kc-auto-service-page p {
  margin-bottom: 16px;
  color: var(--kc-muted);
}

.kc-auto-service-page strong {
  color: var(--kc-text);
  font-weight: 600;
}

.kc-auto-container {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), var(--kc-container));
  margin-inline: auto;
}

.kc-auto-section {
  position: relative;
  padding-block: var(--kc-section-space);
  background: var(--kc-black);
}

.kc-auto-section-alt { background: var(--kc-black-2); }

.kc-auto-section-accented {
  background:
    linear-gradient(110deg, rgba(199, 243, 47, 0.065), transparent 38%),
    var(--kc-black);
  border-block: 1px solid rgba(199, 243, 47, 0.10);
}

.kc-auto-accent { color: var(--kc-lime); }

.kc-auto-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px !important;
  color: #D8DCCF !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kc-auto-eyebrow > span {
  width: 26px;
  height: 1px;
  background: var(--kc-lime);
  box-shadow: 0 0 18px rgba(199, 243, 47, 0.35);
}

.kc-auto-lead {
  color: var(--kc-text) !important;
  font-size: 19px !important;
  line-height: 28px !important;
}

.kc-auto-card-label {
  margin-bottom: 13px !important;
  color: var(--kc-lime) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.kc-auto-section-heading,
.kc-auto-process-heading {
  margin-bottom: clamp(46px, 5vw, 74px);
}

.kc-auto-heading-split,
.kc-auto-process-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.55fr);
  gap: clamp(38px, 6vw, 92px);
  align-items: end;
}

.kc-auto-heading-split > p,
.kc-auto-process-heading > p {
  max-width: 480px;
  margin: 0 0 4px auto;
}

/* Buttons */
.kc-auto-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.kc-auto-actions-center { justify-content: center; }

.kc-auto-btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 19px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  transition: transform 260ms ease, border-color 260ms ease, background-color 260ms ease, color 260ms ease, box-shadow 260ms ease;
}

.kc-auto-btn span,
.kc-auto-text-link span {
  display: inline-block;
  transition: transform 240ms ease;
}

.kc-auto-btn:hover { transform: translateY(-2px); }
.kc-auto-btn:hover span,
.kc-auto-text-link:hover span { transform: translateX(4px); }

.kc-auto-btn-primary {
  background: var(--kc-lime);
  color: #0A0C08 !important;
  box-shadow: 0 12px 34px rgba(199, 243, 47, 0.14);
}

.kc-auto-btn-primary:hover {
  background: var(--kc-lime-bright);
  box-shadow: 0 16px 40px rgba(199, 243, 47, 0.21);
}

.kc-auto-btn-secondary {
  border-color: var(--kc-border-strong);
  background: rgba(255, 255, 255, 0.025);
  color: var(--kc-text) !important;
}

.kc-auto-btn-secondary:hover {
  border-color: var(--kc-lime-border);
  background: var(--kc-lime-faint);
}

.kc-auto-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  color: var(--kc-text) !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
}

.kc-auto-text-link:hover { color: var(--kc-lime) !important; }

.kc-auto-service-page :where(a, summary):focus-visible {
  outline: 2px solid var(--kc-lime);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Hero */
.kc-auto-hero {
  min-height: 760px;
  display: flex;
  align-items: center;
  padding-top: clamp(200px, 10vw, 150px) !important;
  background:
    radial-gradient(circle at 82% 24%, rgba(199, 243, 47, 0.07), transparent 27%),
    var(--kc-black);
}

.kc-auto-grid-glow {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent 88%);
}

.kc-auto-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(440px, 0.96fr);
  gap: clamp(52px, 7vw, 104px);
  align-items: center;
}

.kc-auto-hero-copy { max-width: 690px; }
.kc-auto-hero-copy > p:not(.kc-auto-eyebrow):not(.kc-auto-lead) { max-width: 650px; }

.kc-auto-friction-list {
  display: grid;
  gap: 6px;
  margin: 26px 0 24px;
}

.kc-auto-friction-list p {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  margin: 0 !important;
  padding: 9px 12px;
  border-left: 1px solid var(--kc-border);
  color: #B9BFB5 !important;
}

.kc-auto-friction-list span {
  color: var(--kc-lime);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.kc-auto-hero-visual {
  position: relative;
  min-height: 620px;
  padding: 42px 26px 24px;
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 50%),
    #0B0E0B;
  box-shadow: var(--kc-shadow);
  overflow: hidden;
}

.kc-auto-hero-visual::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -130px;
  top: -120px;
  border-radius: 50%;
  background: rgba(199, 243, 47, 0.07);
  filter: blur(8px);
}

.kc-auto-visual-label {
  position: absolute;
  top: 22px;
  left: 26px;
  z-index: 2;
  color: #7F887B;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.kc-auto-flow-svg { width: 100%; height: auto; display: block; }

.kc-auto-svg-panel,
.kc-auto-svg-output {
  fill: #101410;
  stroke: rgba(255,255,255,0.12);
  stroke-width: 1;
}

.kc-auto-svg-output { fill: #0D110D; }

.kc-auto-svg-core {
  fill: rgba(199, 243, 47, 0.08);
  stroke: rgba(199, 243, 47, 0.48);
  stroke-width: 1.4;
}

.kc-auto-svg-node-dot { fill: #4D564B; }
.kc-auto-svg-core-dot,
.kc-auto-svg-pulse-dot { fill: var(--kc-lime); }

.kc-auto-svg-title {
  fill: #EEF1E8;
  font-family: "Syne", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.kc-auto-svg-subtitle {
  fill: #818A7E;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 10px;
}

.kc-auto-svg-core-line { fill: rgba(199, 243, 47, 0.86); }
.kc-auto-svg-core-line-soft { fill: rgba(199, 243, 47, 0.29); }
.kc-auto-svg-core-caption {
  fill: var(--kc-lime);
  font-family: "Syne", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.kc-auto-svg-flow {
  fill: none;
  stroke: url(#kcAutoFlowGradient);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 12;
  animation: kc-auto-dash 4s linear infinite;
}

.kc-auto-svg-flow-2,
.kc-auto-svg-flow-5 { animation-delay: -1.25s; }
.kc-auto-svg-flow-3,
.kc-auto-svg-flow-6 { animation-delay: -2.4s; }
.kc-auto-svg-flow-4 { animation-delay: -0.65s; }

.kc-auto-svg-pulse-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: kc-auto-pulse 2.2s ease-in-out infinite;
}
.kc-auto-svg-pulse-delay { animation-delay: 0.7s; }
.kc-auto-svg-pulse-delay-2 { animation-delay: 1.4s; }

.kc-auto-visual-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: -8px 8px 0;
  padding-top: 18px;
  border-top: 1px solid var(--kc-border);
  color: #7F887B;
  font-size: 11px;
}

.kc-auto-visual-status span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #BFC6BA;
}

.kc-auto-visual-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kc-lime);
  box-shadow: 0 0 16px rgba(199,243,47,0.55);
}

/* Definition */
.kc-auto-definition-layout {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: 18px;
}

.kc-auto-definition-card {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius);
  background: var(--kc-card);
}

.kc-auto-definition-card-featured {
  background:
    linear-gradient(135deg, rgba(199,243,47,0.08), transparent 42%),
    var(--kc-card-2);
  border-color: rgba(199,243,47,0.19);
}

.kc-auto-definition-card blockquote,
.kc-auto-ai-copy blockquote {
  margin: 28px 0 0;
  padding: 18px 0 18px 22px;
  border-left: 2px solid var(--kc-lime);
  color: #E7EBDD;
  font-size: 17px;
  line-height: 25px;
}

.kc-auto-mini-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 28px 0;
}

.kc-auto-mini-flow span {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px solid var(--kc-border);
  border-radius: 14px;
  background: #0B0D0B;
  color: var(--kc-text);
  text-align: center;
  font-size: 13px;
  line-height: 18px;
}

.kc-auto-mini-flow i {
  color: var(--kc-lime);
  font-style: normal;
}

/* Opportunity grid */
.kc-auto-opportunity-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.kc-auto-opportunity-card {
  grid-column: span 4;
  position: relative;
  min-height: 250px;
  padding: 30px;
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius);
  background: var(--kc-card);
  overflow: hidden;
  transition: transform 280ms ease, border-color 280ms ease, background-color 280ms ease, box-shadow 280ms ease;
}

.kc-auto-opportunity-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -58px;
  bottom: -58px;
  border-radius: 50%;
  border: 1px solid rgba(199,243,47,0.10);
  transition: transform 350ms ease, border-color 350ms ease;
}

.kc-auto-opportunity-card:hover {
  transform: translateY(-5px);
  border-color: var(--kc-lime-border);
  background: #121612;
  box-shadow: 0 18px 42px rgba(0,0,0,0.2);
}

.kc-auto-opportunity-card:hover::after {
  transform: scale(1.18);
  border-color: rgba(199,243,47,0.26);
}

.kc-auto-opportunity-wide { grid-column: span 8; }
.kc-auto-opportunity-tall { min-height: 330px; }

.kc-auto-card-number {
  margin-bottom: 38px;
  color: #60685E;
  font-family: "Syne", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.kc-auto-opportunity-card h3 { max-width: 330px; }
.kc-auto-opportunity-card p:last-child { max-width: 590px; }

.kc-auto-sequence {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 36px;
}

.kc-auto-sequence span {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: rgba(199,243,47,0.13);
}

.kc-auto-sequence span:nth-child(1) { background: rgba(199,243,47,0.85); }
.kc-auto-sequence span:nth-child(2) { background: rgba(199,243,47,0.56); }
.kc-auto-sequence span:nth-child(3) { background: rgba(199,243,47,0.33); }

/* Integrations */
.kc-auto-integrations-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(54px, 8vw, 120px);
  align-items: center;
}

.kc-auto-integrations-copy { max-width: 510px; }

.kc-auto-integration-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius-lg);
  background:
    radial-gradient(circle at center, rgba(199,243,47,0.07), transparent 55%),
    #0B0D0B;
}

.kc-auto-integration-cloud span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid var(--kc-border);
  border-radius: 999px;
  background: #111411;
  color: #DDE1D7;
  font-size: 13px;
  font-weight: 600;
  transition: transform 250ms ease, border-color 250ms ease, color 250ms ease;
}

.kc-auto-integration-cloud span:nth-child(2n) { transform: translateY(8px); }
.kc-auto-integration-cloud span:hover {
  transform: translateY(-2px);
  border-color: var(--kc-lime-border);
  color: var(--kc-lime);
}

/* API / Webhook */
.kc-auto-connection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.kc-auto-connection-card {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius);
  background: var(--kc-card);
  transition: transform 280ms ease, border-color 280ms ease;
}

.kc-auto-connection-card:hover {
  transform: translateY(-4px);
  border-color: var(--kc-lime-border);
}

.kc-auto-connection-visual {
  display: grid;
  grid-template-columns: 1fr auto 74px auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 150px;
  margin-bottom: 36px;
  padding: 20px;
  border: 1px solid var(--kc-border);
  border-radius: 16px;
  background: #0A0D0A;
  overflow: hidden;
}

.kc-auto-connection-visual span,
.kc-auto-connection-visual b {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kc-border);
  border-radius: 11px;
  background: #111511;
  color: #DFE3D9;
  font-family: "Syne", Arial, sans-serif;
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.05em;
}

.kc-auto-connection-visual b {
  border-color: rgba(199,243,47,0.35);
  background: var(--kc-lime-soft);
  color: var(--kc-lime);
}

.kc-auto-connection-visual i {
  color: #61695F;
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.kc-auto-note {
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--kc-lime-border);
  border-radius: 12px;
  background: var(--kc-lime-faint);
  color: #C7CCBF !important;
}

/* What to automate first */
.kc-auto-first-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(460px, 1.15fr);
  gap: clamp(52px, 8vw, 112px);
  align-items: center;
}

.kc-auto-first-copy { max-width: 520px; }

.kc-auto-diagnostic {
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius-lg);
  background: var(--kc-card);
  box-shadow: var(--kc-shadow);
}

.kc-auto-diagnostic-title {
  margin-bottom: 22px !important;
  color: var(--kc-text) !important;
  font-family: "Syne", Arial, sans-serif;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.kc-auto-diagnostic ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kc-auto-diagnostic li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  min-height: 78px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--kc-border);
  border-radius: 13px;
  background: #0B0E0B;
}

.kc-auto-diagnostic li span {
  color: var(--kc-lime);
  font-size: 10px;
  font-weight: 700;
}

.kc-auto-diagnostic li strong {
  font-size: 13px;
  line-height: 18px;
}

/* Automation vs App */
.kc-auto-vs-grid {
  display: grid;
  grid-template-columns: 1fr 118px 1fr;
  gap: 16px;
  align-items: stretch;
}

.kc-auto-vs-card {
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius);
  background: var(--kc-card);
}

.kc-auto-vs-card:last-child { border-color: rgba(199,243,47,0.18); }

.kc-auto-vs-signal {
  display: grid;
  gap: 9px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--kc-border);
}

.kc-auto-vs-signal span {
  color: #777F74;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kc-auto-vs-signal strong { line-height: 22px; }

.kc-auto-vs-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #7B8478;
  text-align: center;
  font-size: 10px;
  line-height: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kc-auto-vs-bridge i {
  width: 1px;
  height: 84px;
  background: linear-gradient(to bottom, transparent, var(--kc-lime), transparent);
}

.kc-auto-hybrid-example {
  max-width: 780px;
  margin: 18px auto 0;
  padding: 22px 28px;
  border: 1px solid rgba(199,243,47,0.17);
  border-radius: 14px;
  background: var(--kc-lime-faint);
  text-align: center;
}

.kc-auto-hybrid-example p:last-child { margin-bottom: 0; }

/* AI */
.kc-auto-ai-section {
  background:
    radial-gradient(circle at 20% 55%, rgba(199,243,47,0.065), transparent 30%),
    var(--kc-black);
}

.kc-auto-ai-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(520px, 1.22fr);
  gap: clamp(54px, 8vw, 118px);
  align-items: center;
}

.kc-auto-ai-copy { max-width: 520px; }

.kc-auto-rule-example {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 26px 0 30px;
  padding: 18px 20px;
  border: 1px solid var(--kc-border);
  border-radius: 14px;
  background: #0E120E;
  color: #CDD2C8;
  font-size: 13px;
}

.kc-auto-rule-example span {
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--kc-lime);
  color: #090B08;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.07em;
}

.kc-auto-rule-example b { color: var(--kc-lime); }

.kc-auto-ai-capabilities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.kc-auto-ai-capabilities article {
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--kc-border);
  border-radius: 16px;
  background: var(--kc-card);
  transition: transform 260ms ease, border-color 260ms ease;
}

.kc-auto-ai-capabilities article:hover {
  transform: translateY(-3px);
  border-color: var(--kc-lime-border);
}

.kc-auto-ai-capabilities article > span {
  display: block;
  margin-bottom: 32px;
  color: var(--kc-lime);
  font-size: 10px;
  font-weight: 700;
}

.kc-auto-ai-capabilities h3 {
  font-size: 18px;
  line-height: 1.08;
}

.kc-auto-ai-capabilities p { margin-bottom: 0; font-size: 14px; line-height: 20px; }

/* Process */
.kc-auto-process-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kc-auto-process-list li {
  position: relative;
  min-height: 280px;
  padding: 28px;
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius);
  background: var(--kc-card);
  overflow: hidden;
  transition: transform 280ms ease, border-color 280ms ease;
}

.kc-auto-process-list li:hover {
  transform: translateY(-4px);
  border-color: var(--kc-lime-border);
}

.kc-auto-process-number {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-bottom: 46px;
  border: 1px solid rgba(199,243,47,0.30);
  border-radius: 50%;
  color: var(--kc-lime);
  font-family: "Syne", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.kc-auto-process-list li::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 1px;
  right: -54px;
  top: 50px;
  background: linear-gradient(90deg, rgba(199,243,47,0.3), transparent);
}

.kc-auto-process-list li:nth-child(3n)::after,
.kc-auto-process-list li:last-child::after { display: none; }

/* Audience */
.kc-auto-audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.kc-auto-audience-grid div {
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  border: 1px solid var(--kc-border);
  border-radius: 16px;
  background:
    linear-gradient(155deg, transparent 30%, rgba(199,243,47,0.05)),
    var(--kc-card);
  color: #E1E5DC;
  font-family: "Syne", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.18;
  transition: transform 260ms ease, border-color 260ms ease;
}

.kc-auto-audience-grid div:hover {
  transform: translateY(-3px);
  border-color: var(--kc-lime-border);
}

/* FAQ */
.kc-auto-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(520px, 1.3fr);
  gap: clamp(58px, 8vw, 112px);
  align-items: start;
}

.kc-auto-faq-intro {
  position: sticky;
  top: 32px;
}

.kc-auto-faq-list {
  border-top: 1px solid var(--kc-border);
}

.kc-auto-faq-list details {
  border-bottom: 1px solid var(--kc-border);
}

.kc-auto-faq-list summary {
  position: relative;
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 8px;
  color: var(--kc-text);
  font-family: "Syne", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
}

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

.kc-auto-faq-list summary > span {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.kc-auto-faq-list summary > span::before,
.kc-auto-faq-list summary > span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1px;
  background: var(--kc-lime);
  transform: translate(-50%, -50%);
  transition: transform 260ms ease;
}

.kc-auto-faq-list summary > span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.kc-auto-faq-list details[open] summary > span::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.kc-auto-faq-list details > div {
  padding: 0 48px 26px 8px;
  animation: kc-auto-faq-in 260ms ease both;
}

.kc-auto-faq-list details > div p { max-width: 710px; margin-bottom: 0; }

/* Final CTA */
.kc-auto-final-cta {
  min-height: 620px;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(199,243,47,0.10);
  background: #080A08;
  overflow: hidden;
}

.kc-auto-final-inner {
  max-width: 900px;
  text-align: center;
}

.kc-auto-final-inner h2 {
  max-width: 760px;
  margin-inline: auto;
}

.kc-auto-final-inner > p:not(.kc-auto-eyebrow) {
  max-width: 690px;
  margin-inline: auto;
}

.kc-auto-final-glow {
  position: absolute;
  inset: auto 50% -340px auto;
  width: 720px;
  height: 720px;
  transform: translateX(50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,243,47,0.10), transparent 67%);
  pointer-events: none;
}

/* Motion */
@keyframes kc-auto-dash {
  to { stroke-dashoffset: -38; }
}

@keyframes kc-auto-pulse {
  0%, 100% { transform: scale(0.82); opacity: 0.55; }
  50% { transform: scale(1.28); opacity: 1; }
}

@keyframes kc-auto-faq-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tablet */
@media (max-width: 1024px) {
  .kc-auto-service-page h1 { font-size: 50px; }
  .kc-auto-service-page h2 { font-size: 38px; }

  .kc-auto-hero-grid {
    grid-template-columns: 1fr 0.9fr;
    gap: 42px;
  }

  .kc-auto-hero-visual { min-height: 520px; padding-inline: 14px; }

  .kc-auto-opportunity-card { grid-column: span 6; }
  .kc-auto-opportunity-wide { grid-column: span 6; }

  .kc-auto-integrations-layout,
  .kc-auto-first-grid,
  .kc-auto-ai-grid,
  .kc-auto-faq-layout {
    grid-template-columns: 1fr 1fr;
    gap: 42px;
  }

  .kc-auto-ai-grid { align-items: start; }
  .kc-auto-process-list { grid-template-columns: repeat(2, 1fr); }
  .kc-auto-process-list li:nth-child(3n)::after { display: block; }
  .kc-auto-process-list li:nth-child(2n)::after { display: none; }
  .kc-auto-audience-grid { grid-template-columns: repeat(2, 1fr); }
  .kc-auto-faq-intro { position: static; }
}

/* Mobile */
@media (max-width: 767px) {
  .kc-auto-service-page {
    --kc-section-space: 76px;
  }

  .kc-auto-container {
    width: min(calc(100% - 32px), var(--kc-container));
  }

  .kc-auto-service-page h1 {
    font-size: clamp(38px, 12vw, 46px);
    line-height: 1.04em;
  }

  .kc-auto-service-page h2 {
    font-size: clamp(32px, 9.6vw, 38px);
    line-height: 1.02em;
  }

  .kc-auto-service-page h3 {
    font-size: 22px;
  }

  .kc-auto-hero {
    min-height: 0;
    padding-top: 84px;
  }

  .kc-auto-hero-grid,
  .kc-auto-heading-split,
  .kc-auto-process-heading,
  .kc-auto-definition-layout,
  .kc-auto-integrations-layout,
  .kc-auto-connection-grid,
  .kc-auto-first-grid,
  .kc-auto-ai-grid,
  .kc-auto-faq-layout {
    grid-template-columns: 1fr;
  }

  .kc-auto-hero-grid { gap: 48px; }
  .kc-auto-heading-split,
  .kc-auto-process-heading { gap: 18px; }
  .kc-auto-heading-split > p,
  .kc-auto-process-heading > p { margin-left: 0; }

  .kc-auto-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .kc-auto-btn { width: 100%; min-height: 54px; }

  .kc-auto-friction-list p {
    grid-template-columns: 28px 1fr;
    padding-inline: 8px;
  }

  .kc-auto-hero-visual {
    min-height: 0;
    padding: 42px 5px 20px;
    border-radius: 20px;
  }

  .kc-auto-visual-label { left: 18px; }
  .kc-auto-visual-status { margin-inline: 14px; font-size: 10px; }

  .kc-auto-mini-flow {
    grid-template-columns: 1fr;
  }

  .kc-auto-mini-flow i { transform: rotate(90deg); text-align: center; }
  .kc-auto-mini-flow span { min-height: 68px; }

  .kc-auto-opportunity-grid { grid-template-columns: 1fr; }
  .kc-auto-opportunity-card,
  .kc-auto-opportunity-wide {
    grid-column: 1;
    min-height: 0;
    padding: 26px;
  }

  .kc-auto-card-number { margin-bottom: 30px; }

  .kc-auto-integration-cloud {
    justify-content: flex-start;
    padding: 24px;
  }
  .kc-auto-integration-cloud span:nth-child(2n) { transform: none; }

  .kc-auto-connection-visual {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .kc-auto-connection-visual i {
    writing-mode: horizontal-tb;
    text-align: center;
  }

  .kc-auto-diagnostic ul { grid-template-columns: 1fr; }

  .kc-auto-vs-grid {
    grid-template-columns: 1fr;
  }

  .kc-auto-vs-bridge {
    flex-direction: row;
    padding: 10px 0;
  }

  .kc-auto-vs-bridge i {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--kc-lime), transparent);
  }

  .kc-auto-ai-capabilities,
  .kc-auto-process-list,
  .kc-auto-audience-grid {
    grid-template-columns: 1fr;
  }

  .kc-auto-ai-capabilities article { min-height: 0; }

  .kc-auto-process-list li {
    min-height: 0;
    padding: 26px;
  }

  .kc-auto-process-list li::after { display: none !important; }

  .kc-auto-audience-grid div { min-height: 120px; }

  .kc-auto-faq-list summary {
    min-height: 78px;
    padding-block: 22px;
    font-size: 16px;
  }

  .kc-auto-faq-list details > div { padding-right: 36px; }

  .kc-auto-final-cta { min-height: 540px; }
}

@media (max-width: 420px) {
  .kc-auto-visual-status { display: grid; justify-content: start; }
  .kc-auto-rule-example { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-auto-service-page *,
  .kc-auto-service-page *::before,
  .kc-auto-service-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}/* End custom CSS */