.elementor-907 .elementor-element.elementor-element-bffd46a > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-0843a7b *//* ==========================================================
   KKV MEDIA – DIGITÁLIS INFRASTRUKTÚRA
   TELJES CSS / Elementor-kompatibilis / LILA FŐSZÍN + KÉKESZÖLD KONTRASZT
   ========================================================== */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.elementor-location-header {
  position: absolute !important;
  z-index: 99990 !important;
  inset: 0 0 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  pointer-events: none;
}

.elementor-location-header > *,
.elementor-location-header .e-con,
.elementor-location-header .elementor-element {
  background-color: transparent !important;
}

.elementor-location-header .kkv-site-header,
.elementor-location-header .kkv-header-inner,
.elementor-location-header .kkv-primary-nav,
.elementor-location-header .kkv-menu-toggle,
.elementor-location-header a,
.elementor-location-header button {
  pointer-events: auto;
}

.elementor-location-header .kkv-header-spacer { height: 0 !important; }
.kkv-site-header::before,
.kkv-header-glow { display: none !important; }
.kkv-site-header { background: transparent !important; }
.kkv-header-inner {
  box-shadow: 0 18px 52px rgba(2, 12, 17, .3), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.kkvdi {
  --di-night: #031014;
  --di-night-2: #061a1f;
  --di-night-3: #09272d;
  --di-night-4: #0e353c;
  --di-paper: #f2f6f4;
  --di-paper-2: #e6eeea;
  --di-ink: #061316;
  --di-white: #f8fffd;
  --di-muted: #a9c3c3;
  --di-muted-dark: #586c6c;
  --di-teal: #45dfc2;
  --di-teal-bright: #7af4de;
  --di-teal-deep: #159d91;
  --di-teal-dark: #0a5d59;
  --di-teal-pale: #dcf9f2;
  --di-cyan: #5fddff;
  --di-cyan-soft: #b8f2ff;
  --di-blue: #2e88c3;
  --di-warning: #ffce73;
  --di-line: rgba(255,255,255,.13);
  --di-line-dark: rgba(6,19,22,.14);
  --di-shadow: 0 36px 96px rgba(1, 12, 17, .24);
  --di-ease: cubic-bezier(.22, 1, .36, 1);

  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  color: var(--di-white);
  background: var(--di-night);
  font-family: Inter, Montserrat, "Segoe UI", Arial, sans-serif;
  isolation: isolate;
}

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

.kkvdi img { display: block; width: 100%; max-width: 100%; }
.kkvdi h1,
.kkvdi h2,
.kkvdi h3,
.kkvdi p,
.kkvdi ul,
.kkvdi ol,
.kkvdi figure { margin: 0; }
.kkvdi ul,
.kkvdi ol { padding: 0; list-style: none; }
.kkvdi button { font: inherit; }
.kkvdi [id] { scroll-margin-top: 100px; }
.kkvdi main > section { position: relative; }

/* Elementor globális piros link/hover színének teljes felülírása. */
.kkvdi a,
.kkvdi a:visited,
.kkvdi a:hover,
.kkvdi a:focus,
.kkvdi a:active {
  color: inherit !important;
  text-decoration: none !important;
}
.kkvdi button,
.kkvdi button:hover,
.kkvdi button:focus,
.kkvdi button:active {
  color: inherit;
}
.kkvdi .kkvdi-btn-primary,
.kkvdi .kkvdi-btn-primary:visited,
.kkvdi .kkvdi-btn-primary:hover,
.kkvdi .kkvdi-btn-primary:focus,
.kkvdi .kkvdi-btn-primary:active,
.kkvdi .kkvdi-service-cta,
.kkvdi .kkvdi-service-cta:visited,
.kkvdi .kkvdi-service-cta:hover,
.kkvdi .kkvdi-service-cta:focus,
.kkvdi .kkvdi-service-cta:active {
  color: #031214 !important;
}
.kkvdi .kkvdi-btn-quiet,
.kkvdi .kkvdi-btn-quiet:visited,
.kkvdi .kkvdi-btn-quiet:hover,
.kkvdi .kkvdi-btn-quiet:focus,
.kkvdi .kkvdi-btn-quiet:active,
.kkvdi .kkvdi-text-link,
.kkvdi .kkvdi-text-link:visited,
.kkvdi .kkvdi-text-link:hover,
.kkvdi .kkvdi-text-link:focus,
.kkvdi .kkvdi-text-link:active {
  color: var(--di-teal-bright) !important;
}
.kkvdi .kkvdi-editorial-copy a,
.kkvdi .kkvdi-editorial-copy a:visited,
.kkvdi .kkvdi-editorial-copy a:hover,
.kkvdi .kkvdi-editorial-copy a:focus,
.kkvdi .kkvdi-editorial-copy a:active {
  color: var(--di-teal-deep) !important;
}
.kkvdi button:focus-visible,
.kkvdi a:focus-visible {
  outline: 2px solid var(--di-teal-bright) !important;
  outline-offset: 3px;
}

.kkvdi-shell {
  position: relative;
  z-index: 5;
  width: min(1240px, calc(100% - 56px));
  margin-inline: auto;
}

.kkvdi-paper { color: var(--di-ink); background: var(--di-paper); }

.kkvdi-index,
.kkvdi-kicker {
  color: var(--di-teal-deep);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.45;
  text-transform: uppercase;
}
.kkvdi-kicker { color: var(--di-teal-bright); }
.kkvdi-kicker i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--di-teal);
  box-shadow: 0 0 18px rgba(69,223,194,.8);
}

.kkvdi h1,
.kkvdi h2,
.kkvdi h3 {
  font-family: Inter, Montserrat, "Segoe UI", Arial, sans-serif;
  text-wrap: balance;
}

.kkvdi h1 em,
.kkvdi h2 em {
  color: var(--di-teal);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.055em;
}

.kkvdi-section-head,
.kkvdi-architecture-head,
.kkvdi-flow-head,
.kkvdi-process-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .62fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 58px;
}

.kkvdi-section-head h2,
.kkvdi-architecture-head h2,
.kkvdi-flow-head h2,
.kkvdi-process-head h2,
.kkvdi-automation-copy h2,
.kkvdi-operations-copy h2,
.kkvdi-editorial-title h2,
.kkvdi-faq-intro h2,
.kkvdi-cta-copy h2 {
  margin-top: 15px;
  font-size: clamp(48px, 5.8vw, 82px);
  font-weight: 900;
  letter-spacing: -.066em;
  line-height: .94;
}

.kkvdi-section-head > p,
.kkvdi-architecture-head > p,
.kkvdi-flow-head > p,
.kkvdi-process-head > p {
  max-width: 520px;
  color: var(--di-muted-dark);
  font-size: 17px;
  line-height: 1.72;
}

.kkvdi-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .85s var(--di-ease), transform .85s var(--di-ease);
}
.kkvdi-reveal.is-visible { opacity: 1; transform: none; }

.kkvdi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 37px;
}
.kkvdi-btn {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 0 23px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .3s var(--di-ease), background .3s ease, color .3s ease, border-color .3s ease;
}
.kkvdi-btn:hover { transform: translateY(-3px); }
.kkvdi-btn-primary {
  color: #041214;
  background: var(--di-teal);
  box-shadow: 0 15px 40px rgba(69,223,194,.2);
}
.kkvdi-btn-primary:hover { background: var(--di-teal-bright); }
.kkvdi-btn-quiet {
  color: var(--di-white);
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(12px);
}
.kkvdi-btn-quiet:hover {
  border-color: var(--di-teal);
  background: rgba(69,223,194,.08);
}

/* ==========================================================
   HERO
   ========================================================== */
.kkvdi-hero {
  min-height: 960px;
  padding: 165px 0 190px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 27%, rgba(46,136,195,.24), transparent 27%),
    radial-gradient(circle at 18% 72%, rgba(69,223,194,.13), transparent 30%),
    linear-gradient(135deg, #020a0d 0%, #06191d 48%, #06161a 100%);
}
.kkvdi-grid-bg,
.kkvdi-cta-grid {
  position: absolute;
  inset: 0;
  opacity: .38;
  background-image:
    linear-gradient(rgba(122,244,222,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,244,222,.08) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.78) 58%, transparent 100%);
}
.kkvdi-grid-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,16,20,.95), transparent 40%, transparent 70%, rgba(3,16,20,.55));
}
.kkvdi-hero-glow {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.kkvdi-hero-glow-a { top: 110px; right: -160px; background: rgba(95,221,255,.12); }
.kkvdi-hero-glow-b { bottom: 20px; left: -180px; background: rgba(69,223,194,.12); }
.kkvdi-scanline {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(122,244,222,.04) 50%, transparent 51%);
  background-size: 100% 8px;
  opacity: .2;
}

.kkvdi-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(540px, 1.12fr);
  align-items: center;
  gap: 60px;
}
.kkvdi-hero-copy { position: relative; z-index: 8; }
.kkvdi-hero h1 {
  max-width: 760px;
  margin-top: 24px;
  font-size: clamp(62px, 7.5vw, 112px);
  font-weight: 900;
  letter-spacing: -.077em;
  line-height: .86;
}
.kkvdi-hero h1 em { display: block; }
.kkvdi-hero-lead {
  max-width: 670px;
  margin-top: 31px;
  color: #b6caca;
  font-size: 18px;
  line-height: 1.7;
}
.kkvdi-hero-lead strong { color: var(--di-white); font-weight: 700; }
.kkvdi-hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  color: #9cb6b6;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.kkvdi-hero-proof i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--di-teal);
}

/* HERO SYSTEM MAP */
.kkvdi-system-map { position: relative; z-index: 7; min-width: 0; }
.kkvdi-map-shell {
  overflow: hidden;
  border: 1px solid rgba(122,244,222,.24);
  background: rgba(3,16,20,.82);
  box-shadow: 0 44px 120px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}
.kkvdi-map-topline,
.kkvdi-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 47px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  color: var(--di-teal-bright);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.kkvdi-map-topline span,
.kkvdi-map-footer span { display: inline-flex; align-items: center; gap: 8px; }
.kkvdi-map-topline i,
.kkvdi-map-footer i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--di-teal);
  box-shadow: 0 0 14px rgba(69,223,194,.9);
}
.kkvdi-map-topline small { color: #789495; font-size: 8px; letter-spacing: .14em; }
.kkvdi-map-footer {
  min-height: 43px;
  justify-content: center;
  gap: 28px;
  border-top: 1px solid rgba(255,255,255,.11);
  border-bottom: 0;
  color: #819b9b;
}
.kkvdi-map-footer i { width: 5px; height: 5px; }

.kkvdi-map-stage {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(69,223,194,.08), transparent 33%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
}
.kkvdi-map-stage::before,
.kkvdi-map-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.kkvdi-map-stage::before {
  inset: 17px;
  border: 1px solid rgba(122,244,222,.08);
}
.kkvdi-map-stage::after {
  inset: 50% auto auto 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%,-50%) rotate(45deg);
  border: 1px solid var(--di-teal);
  box-shadow: 0 0 25px rgba(69,223,194,.6);
}
.kkvdi-map-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(122,244,222,.22);
  stroke-width: 1;
  stroke-dasharray: 5 8;
}
.kkvdi-map-lines path {
  animation: kkvdiDash 18s linear infinite;
}
.kkvdi-map-lines circle { stroke: rgba(95,221,255,.13); stroke-dasharray: 2 10; }
@keyframes kkvdiDash { to { stroke-dashoffset: -120; } }

.kkvdi-map-orbit {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  border: 1px solid rgba(122,244,222,.12);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.kkvdi-map-orbit-a { width: 280px; height: 280px; animation: kkvdiSpin 30s linear infinite; }
.kkvdi-map-orbit-b { width: 480px; height: 480px; border-style: dashed; animation: kkvdiSpin 45s linear infinite reverse; }
.kkvdi-map-orbit::after {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--di-cyan);
  box-shadow: 0 0 18px rgba(95,221,255,.8);
}
@keyframes kkvdiSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }

.kkvdi-core {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: flex;
  width: 226px;
  min-height: 226px;
  padding: 36px 27px 25px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(122,244,222,.5);
  border-radius: 50%;
  text-align: center;
  background: rgba(5,29,34,.94);
  box-shadow: 0 0 80px rgba(69,223,194,.14), inset 0 0 45px rgba(69,223,194,.07);
}
.kkvdi-core-pulse {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(122,244,222,.2);
  border-radius: 50%;
  animation: kkvdiPulse 2.8s ease-out infinite;
}
@keyframes kkvdiPulse {
  0% { transform: scale(.88); opacity: .8; }
  100% { transform: scale(1.18); opacity: 0; }
}
.kkvdi-core > small {
  color: var(--di-cyan-soft);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kkvdi-core > strong {
  max-width: 100%;
  margin-top: 7px;
  color: var(--di-white);
  font-size: 29px;
  font-weight: 900;
  letter-spacing: -.05em;
  overflow-wrap: anywhere;
}
.kkvdi-core > p {
  margin-top: 8px;
  color: #a4bcbc;
  font-size: 11px;
  line-height: 1.52;
}
.kkvdi-core-stats {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 15px;
}
.kkvdi-core-stats span {
  display: flex;
  min-width: 0;
  padding: 9px 5px;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
}
.kkvdi-core-stats b { color: var(--di-teal-bright); font-size: 13px; overflow-wrap: anywhere; }
.kkvdi-core-stats small { margin-top: 2px; color: #6f8b8b; font-size: 6px; letter-spacing: .09em; }

.kkvdi-node {
  position: absolute;
  z-index: 5;
  display: flex;
  width: 126px;
  min-height: 80px;
  padding: 13px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 2px;
  color: #a7bcbc;
  text-align: left;
  background: rgba(3,16,20,.82);
  cursor: pointer;
  box-shadow: 0 12px 35px rgba(0,0,0,.18);
  transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s var(--di-ease), box-shadow .3s ease;
}
.kkvdi-node:hover,
.kkvdi-node.is-active {
  color: var(--di-white);
  border-color: var(--di-teal);
  background: rgba(12,50,55,.96);
  box-shadow: 0 16px 42px rgba(0,0,0,.28), 0 0 30px rgba(69,223,194,.08);
}
.kkvdi-node span { color: var(--di-teal-bright); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.kkvdi-node strong { max-width: 100%; margin-top: 6px; font-size: 13px; line-height: 1.05; overflow-wrap: anywhere; }
.kkvdi-node small { max-width: 100%; margin-top: 5px; color: #789292; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.kkvdi-node-web { top: 10%; left: 6%; }
.kkvdi-node-seo { top: 10%; right: 6%; }
.kkvdi-node-crm { top: 43%; left: 1%; }
.kkvdi-node-auto { top: 43%; right: 1%; }
.kkvdi-node-ai { bottom: 8%; left: 17%; }
.kkvdi-node-data { right: 17%; bottom: 8%; }

.kkvdi-marquee {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: var(--di-teal);
  transform: rotate(-1.1deg) scale(1.02);
}
.kkvdi-marquee-track {
  display: flex;
  width: max-content;
  animation: kkvdiMarquee 28s linear infinite;
  will-change: transform;
}
.kkvdi-marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  min-width: max-content;
  padding: 16px 0;
}
.kkvdi-marquee span {
  color: #031214;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .13em;
  white-space: nowrap;
}
.kkvdi-marquee i { margin: 0 27px; color: #0c716a; font-style: normal; font-size: 10px; }
@keyframes kkvdiMarquee { to { transform: translateX(-50%); } }

/* ==========================================================
   OUTCOMES
   ========================================================== */
.kkvdi-outcomes { padding: 130px 0 138px; }
.kkvdi-outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--di-line-dark);
  border-left: 1px solid var(--di-line-dark);
}
.kkvdi-outcome-card {
  position: relative;
  min-width: 0;
  min-height: 350px;
  padding: 28px 27px 36px;
  overflow: hidden;
  border-right: 1px solid var(--di-line-dark);
  border-bottom: 1px solid var(--di-line-dark);
  background: rgba(255,255,255,.2);
  transition: background .35s ease, transform .35s var(--di-ease);
}
.kkvdi-outcome-card:hover { z-index: 2; transform: translateY(-7px); background: #fff; }
.kkvdi-outcome-card > span { color: var(--di-teal-deep); font-size: 11px; font-weight: 900; }
.kkvdi-outcome-card > small {
  display: block;
  margin-top: 43px;
  color: #708181;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}
.kkvdi-outcome-card h3 {
  max-width: 260px;
  margin-top: 13px;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.03;
}
.kkvdi-outcome-card p { max-width: 260px; margin-top: 18px; color: var(--di-muted-dark); font-size: 14px; line-height: 1.65; }
.kkvdi-outcome-card > b {
  position: absolute;
  right: -11px;
  bottom: -28px;
  color: rgba(6,19,22,.045);
  font-size: 120px;
  font-weight: 950;
  letter-spacing: -.1em;
  line-height: 1;
}

/* ==========================================================
   ARCHITECTURE
   ========================================================== */
.kkvdi-architecture {
  padding: 135px 0 145px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 20%, rgba(95,221,255,.1), transparent 27%),
    linear-gradient(140deg, #031014, #071c21 58%, #051519);
}
.kkvdi-architecture .kkvdi-index,
.kkvdi-flow .kkvdi-index,
.kkvdi-process .kkvdi-index,
.kkvdi-editorial .kkvdi-index,
.kkvdi-faq .kkvdi-index { color: var(--di-teal-bright); }
.kkvdi-architecture-head > p,
.kkvdi-flow-head > p,
.kkvdi-process-head > p { color: var(--di-muted); }
.kkvdi-architecture-layout {
  display: grid;
  grid-template-columns: minmax(280px, .37fr) minmax(0, 1fr);
  gap: 28px;
}
.kkvdi-layer-tabs {
  display: grid;
  border-top: 1px solid var(--di-line);
}
.kkvdi-layer-tabs button {
  display: grid;
  min-width: 0;
  min-height: 113px;
  grid-template-columns: 38px minmax(0,1fr) 24px;
  align-items: center;
  gap: 14px;
  padding: 20px 20px;
  border: 0;
  border-right: 1px solid var(--di-line);
  border-bottom: 1px solid var(--di-line);
  border-left: 1px solid var(--di-line);
  color: #8fa9a9;
  text-align: left;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.kkvdi-layer-tabs button:hover,
.kkvdi-layer-tabs button.is-active {
  color: var(--di-white);
  border-color: rgba(69,223,194,.42);
  background: rgba(69,223,194,.08);
}
.kkvdi-layer-tabs button > span { color: var(--di-teal-bright); font-size: 10px; font-weight: 900; }
.kkvdi-layer-tabs button div { min-width: 0; }
.kkvdi-layer-tabs strong { display: block; font-size: 17px; overflow-wrap: anywhere; }
.kkvdi-layer-tabs small { display: block; margin-top: 7px; color: #708d8d; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.kkvdi-layer-tabs b { font-size: 17px; transition: transform .3s var(--di-ease); }
.kkvdi-layer-tabs button:hover b,
.kkvdi-layer-tabs button.is-active b { color: var(--di-teal); transform: translate(3px,-3px); }

.kkvdi-layer-panel {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.08fr) minmax(310px, .72fr);
  border: 1px solid rgba(122,244,222,.22);
  background: rgba(2,13,16,.66);
  box-shadow: var(--di-shadow);
}
.kkvdi-layer-visual {
  min-width: 0;
  min-height: 500px;
  padding: 38px;
  overflow: hidden;
  border-right: 1px solid var(--di-line);
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(69,223,194,.08), transparent 55%);
  background-size: 28px 28px, 28px 28px, auto;
}
.kkvdi-layer-readout { display: flex; min-width: 0; padding: 39px 34px; flex-direction: column; }
.kkvdi-layer-readout > span { color: var(--di-cyan-soft); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.kkvdi-layer-readout h3 { margin-top: 17px; font-size: 31px; font-weight: 900; letter-spacing: -.045em; line-height: 1.04; }
.kkvdi-layer-readout > p { margin-top: 17px; color: var(--di-muted); font-size: 14px; line-height: 1.68; }
.kkvdi-layer-readout ul { display: grid; gap: 10px; margin-top: 25px; }
.kkvdi-layer-readout li { position: relative; padding-left: 20px; color: #d5e2e1; font-size: 13px; line-height: 1.5; }
.kkvdi-layer-readout li::before { content: "↳"; position: absolute; left: 0; color: var(--di-teal); }
.kkvdi-layer-output { margin-top: auto; padding-top: 28px; border-top: 1px solid var(--di-line); }
.kkvdi-layer-output small { display: block; color: #6f8989; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.kkvdi-layer-output strong { display: block; margin-top: 8px; color: var(--di-teal-bright); font-size: 15px; line-height: 1.45; }

/* architecture visuals */
.kkvdi-browser,
.kkvdi-convert-ui,
.kkvdi-operate-ui,
.kkvdi-analytics-ui {
  height: 100%;
  min-height: 420px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(4,19,23,.88);
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
}
.kkvdi-browser-bar {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.kkvdi-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
.kkvdi-browser-bar span {
  min-width: 0;
  margin-left: 8px;
  padding: 7px 14px;
  flex: 1;
  border: 1px solid rgba(255,255,255,.08);
  color: #6f8b8b;
  font-size: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kkvdi-search-result { padding: 55px 43px; }
.kkvdi-search-result small { color: var(--di-teal); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.kkvdi-search-result strong { display: block; max-width: 440px; margin-top: 17px; font-size: clamp(30px, 3.3vw, 49px); letter-spacing: -.06em; line-height: .98; }
.kkvdi-search-result p { max-width: 420px; margin-top: 18px; color: #91aaaa; font-size: 14px; line-height: 1.6; }
.kkvdi-search-result div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.kkvdi-search-result div span { padding: 8px 10px; border: 1px solid rgba(69,223,194,.26); color: var(--di-teal-bright); font-size: 8px; font-weight: 900; letter-spacing: .1em; }

.kkvdi-convert-ui { display: grid; grid-template-columns: 1.05fr .75fr; }
.kkvdi-convert-copy { display: flex; padding: 44px 35px; flex-direction: column; justify-content: center; }
.kkvdi-convert-copy small { color: var(--di-teal); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.kkvdi-convert-copy strong { margin-top: 14px; font-size: clamp(28px, 3vw, 45px); letter-spacing: -.06em; line-height: .96; }
.kkvdi-convert-copy p { margin-top: 17px; color: #93adad; font-size: 13px; line-height: 1.6; }
.kkvdi-convert-copy button { align-self: flex-start; margin-top: 28px; padding: 13px 16px; border: 0; color: #031214; background: var(--di-teal); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.kkvdi-convert-form { display: flex; padding: 35px 24px; flex-direction: column; justify-content: center; border-left: 1px solid var(--di-line); background: rgba(255,255,255,.025); }
.kkvdi-convert-form span { color: #779191; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.kkvdi-convert-form i { height: 39px; margin: 7px 0 17px; border: 1px solid rgba(255,255,255,.13); background: rgba(0,0,0,.12); }
.kkvdi-convert-form b { margin-top: 8px; padding: 13px; color: var(--di-teal-bright); border: 1px solid rgba(69,223,194,.35); text-align: center; font-size: 8px; letter-spacing: .12em; }

.kkvdi-operate-ui { padding: 30px; }
.kkvdi-operate-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--di-teal-bright); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.kkvdi-operate-head small { color: #6e8a8a; }
.kkvdi-pipeline { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; margin-top: 30px; }
.kkvdi-pipeline article { min-height: 190px; padding: 15px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); }
.kkvdi-pipeline small { display: block; color: #789292; font-size: 7px; letter-spacing: .1em; }
.kkvdi-pipeline strong { display: block; margin-top: 11px; color: var(--di-teal); font-size: 28px; }
.kkvdi-pipeline i { display: block; height: 92px; margin-top: 16px; border-radius: 2px; background: linear-gradient(150deg, rgba(69,223,194,.2), rgba(95,221,255,.04)); }
.kkvdi-automation-log { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.kkvdi-automation-log span { padding: 9px 11px; border: 1px solid rgba(69,223,194,.2); color: #abc1c1; font-size: 8px; }

.kkvdi-analytics-ui { padding: 35px; }
.kkvdi-chart-head { display: flex; align-items: flex-end; justify-content: space-between; }
.kkvdi-chart-head span { color: #779292; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.kkvdi-chart-head strong { color: var(--di-teal); font-size: 38px; letter-spacing: -.05em; }
.kkvdi-chart { display: flex; height: 250px; align-items: end; gap: 12px; margin-top: 35px; border-bottom: 1px solid rgba(255,255,255,.12); }
.kkvdi-chart i { display: block; height: var(--h); flex: 1; background: linear-gradient(to top, rgba(69,223,194,.18), var(--di-teal)); box-shadow: 0 0 24px rgba(69,223,194,.08); }
.kkvdi-chart-labels { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 16px; color: #668181; font-size: 7px; font-weight: 900; letter-spacing: .1em; }

/* ==========================================================
   SERVICES
   ========================================================== */
.kkvdi-services { padding: 135px 0 145px; }
.kkvdi-services-layout {
  display: grid;
  grid-template-columns: minmax(330px, .42fr) minmax(0, 1fr);
  gap: 28px;
}
.kkvdi-service-menu { display: grid; border-top: 1px solid var(--di-line-dark); }
.kkvdi-service-menu button {
  display: grid;
  min-width: 0;
  min-height: 95px;
  grid-template-columns: 36px minmax(0,1fr) 23px;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 0;
  border-right: 1px solid var(--di-line-dark);
  border-bottom: 1px solid var(--di-line-dark);
  border-left: 1px solid var(--di-line-dark);
  color: #657777;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.kkvdi-service-menu button:hover,
.kkvdi-service-menu button.is-active {
  color: var(--di-ink);
  border-color: rgba(21,157,145,.42);
  background: var(--di-teal-pale);
}
.kkvdi-service-menu button > span { color: var(--di-teal-deep); font-size: 9px; font-weight: 900; }
.kkvdi-service-menu button div { min-width: 0; }
.kkvdi-service-menu strong { display: block; font-size: 15px; line-height: 1.18; overflow-wrap: anywhere; }
.kkvdi-service-menu small { display: block; margin-top: 5px; color: #7a8989; font-size: 7px; letter-spacing: .09em; text-transform: uppercase; overflow-wrap: anywhere; }
.kkvdi-service-menu b { color: var(--di-teal-deep); transition: transform .3s var(--di-ease); }
.kkvdi-service-menu button:hover b,
.kkvdi-service-menu button.is-active b { transform: translate(3px,-3px); }

.kkvdi-service-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--di-line-dark);
  background: #fff;
  box-shadow: 0 28px 70px rgba(6,19,22,.09);
}
.kkvdi-service-panel-top {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 18px;
  border-bottom: 1px solid var(--di-line-dark);
  color: var(--di-teal-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
}
.kkvdi-service-panel-top small { color: #7f9090; }
.kkvdi-service-preview {
  min-width: 0;
  min-height: 390px;
  padding: 26px;
  overflow: hidden;
  color: var(--di-white);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(140deg, #031014, #082329);
  background-size: 28px 28px, 28px 28px, auto;
}
.kkvdi-service-copy { padding: 35px 36px 38px; }
.kkvdi-service-copy > h3 { font-size: 37px; font-weight: 900; letter-spacing: -.055em; line-height: .98; }
.kkvdi-service-copy > p { max-width: 760px; margin-top: 16px; color: var(--di-muted-dark); font-size: 15px; line-height: 1.67; }
.kkvdi-service-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }
.kkvdi-service-columns > div { min-width: 0; padding-top: 19px; border-top: 1px solid var(--di-line-dark); }
.kkvdi-service-columns small { color: var(--di-teal-deep); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.kkvdi-service-columns ul { display: grid; gap: 9px; margin-top: 14px; }
.kkvdi-service-columns li { position: relative; padding-left: 18px; color: #4f6363; font-size: 13px; line-height: 1.5; }
.kkvdi-service-columns li::before { content: "+"; position: absolute; left: 0; color: var(--di-teal-deep); font-weight: 900; }
.kkvdi-service-cta {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 30px;
  padding: 0 18px;
  color: #031214;
  background: var(--di-teal);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .3s var(--di-ease), background .3s ease;
}
.kkvdi-service-cta:hover { transform: translateY(-3px); background: var(--di-teal-bright); }

/* service previews */
.kkvdi-preview-window,
.kkvdi-seo-preview,
.kkvdi-crm-preview,
.kkvdi-auto-preview,
.kkvdi-ai-preview,
.kkvdi-data-preview {
  width: 100%;
  min-height: 338px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,12,15,.82);
  box-shadow: 0 25px 70px rgba(0,0,0,.28);
}
.kkvdi-preview-nav { display: flex; min-height: 43px; align-items: center; gap: 18px; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.1); }
.kkvdi-preview-nav i { width: 21px; height: 21px; border: 1px solid var(--di-teal); border-radius: 50%; }
.kkvdi-preview-nav span { width: 55px; height: 5px; background: rgba(255,255,255,.13); }
.kkvdi-preview-nav b { margin-left: auto; padding: 8px 10px; color: #031214; background: var(--di-teal); font-size: 7px; letter-spacing: .08em; }
.kkvdi-preview-hero { position: relative; min-height: 210px; padding: 40px 34px; overflow: hidden; }
.kkvdi-preview-hero::after { content: ""; position: absolute; top: 15px; right: 4%; width: 36%; height: 180px; border-radius: 50% 0 50% 50%; background: linear-gradient(145deg, rgba(95,221,255,.28), rgba(69,223,194,.05)); transform: rotate(-15deg); }
.kkvdi-preview-hero small { color: var(--di-teal); font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.kkvdi-preview-hero strong { position: relative; z-index: 2; display: block; margin-top: 12px; font-size: clamp(30px, 4vw, 54px); letter-spacing: -.07em; line-height: .9; }
.kkvdi-preview-hero p { position: relative; z-index: 2; max-width: 380px; margin-top: 14px; color: #91aaaa; font-size: 11px; }
.kkvdi-preview-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 0 14px 14px; }
.kkvdi-preview-cards span { height: 52px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.025); }

.kkvdi-seo-preview { padding: 32px; }
.kkvdi-seo-query { display: grid; grid-template-columns: 30px minmax(0,1fr) 45px; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.14); }
.kkvdi-seo-query span { color: var(--di-teal); font-size: 20px; }
.kkvdi-seo-query strong { min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kkvdi-seo-query i { height: 6px; background: var(--di-teal); }
.kkvdi-seo-tree { display: flex; align-items: center; flex-direction: column; margin-top: 35px; }
.kkvdi-seo-tree article { width: min(320px,100%); padding: 18px; border: 1px solid rgba(69,223,194,.35); text-align: center; background: rgba(69,223,194,.07); }
.kkvdi-seo-tree article small { display: block; color: #6f8b8b; font-size: 7px; letter-spacing: .12em; }
.kkvdi-seo-tree article strong { display: block; margin-top: 6px; font-size: 16px; }
.kkvdi-seo-tree > div:nth-child(2) { display: grid; width: 100%; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 34px; }
.kkvdi-seo-tree > div:nth-child(2) span { padding: 15px 7px; border: 1px solid rgba(255,255,255,.12); text-align: center; color: #a8bcbc; font-size: 9px; }
.kkvdi-seo-tree > div:nth-child(3) { display: grid; width: 100%; grid-template-columns: repeat(6,1fr); gap: 7px; margin-top: 12px; }
.kkvdi-seo-tree > div:nth-child(3) i { height: 45px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }

.kkvdi-crm-preview { display: grid; grid-template-columns: 64px minmax(0,1fr); }
.kkvdi-crm-side { display: flex; align-items: center; flex-direction: column; gap: 16px; padding-top: 24px; border-right: 1px solid rgba(255,255,255,.1); }
.kkvdi-crm-side span { width: 23px; height: 23px; border: 1px solid rgba(255,255,255,.14); border-radius: 4px; }
.kkvdi-crm-side span:first-child { border-color: var(--di-teal); background: rgba(69,223,194,.1); }
.kkvdi-crm-main { min-width: 0; padding: 27px; }
.kkvdi-crm-main > div small { color: var(--di-teal); font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.kkvdi-crm-main > div strong { display: block; margin-top: 7px; font-size: 22px; letter-spacing: -.04em; }
.kkvdi-crm-main section { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 28px; }
.kkvdi-crm-main article { min-width: 0; min-height: 220px; padding: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); }
.kkvdi-crm-main article b { display: block; color: #779292; font-size: 7px; letter-spacing: .1em; }
.kkvdi-crm-main article span { display: block; height: 64px; margin-top: 10px; border-left: 3px solid var(--di-teal); background: rgba(255,255,255,.045); }

.kkvdi-auto-preview { display: grid; grid-template-columns: minmax(100px,.7fr) 30px minmax(160px,1.2fr) 30px minmax(100px,.7fr); align-items: center; gap: 10px; padding: 32px; }
.kkvdi-auto-preview > i { color: var(--di-teal); font-size: 24px; font-style: normal; text-align: center; }
.kkvdi-auto-node { padding: 23px 15px; border: 1px solid rgba(69,223,194,.35); text-align: center; background: rgba(69,223,194,.06); }
.kkvdi-auto-node small { display: block; color: #718d8d; font-size: 7px; letter-spacing: .12em; }
.kkvdi-auto-node strong { display: block; margin-top: 7px; font-size: 14px; }
.kkvdi-auto-node.is-last { border-color: rgba(95,221,255,.4); }
.kkvdi-auto-stack { display: grid; gap: 9px; }
.kkvdi-auto-stack span { padding: 15px; border: 1px solid rgba(255,255,255,.12); color: #b4c6c6; font-size: 10px; background: rgba(255,255,255,.025); }

.kkvdi-ai-preview { position: relative; padding: 30px; overflow: hidden; }
.kkvdi-ai-preview::before { content: ""; position: absolute; inset: -40% auto auto -20%; width: 70%; height: 100%; border-radius: 50%; background: rgba(95,221,255,.08); filter: blur(40px); }
.kkvdi-ai-core { position: relative; display: flex; min-height: 95px; align-items: center; gap: 16px; padding: 15px 20px; border: 1px solid rgba(69,223,194,.3); background: rgba(69,223,194,.055); }
.kkvdi-ai-core i { width: 54px; height: 54px; border: 1px solid var(--di-teal); border-radius: 50%; box-shadow: inset 0 0 20px rgba(69,223,194,.12), 0 0 30px rgba(69,223,194,.08); }
.kkvdi-ai-core strong { font-size: 29px; }
.kkvdi-ai-core small { color: #779292; font-size: 7px; letter-spacing: .12em; }
.kkvdi-ai-prompt { position: relative; display: grid; grid-template-columns: 25px 1fr; gap: 10px; margin-top: 18px; padding: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); }
.kkvdi-ai-prompt span { color: var(--di-teal); font-size: 20px; }
.kkvdi-ai-prompt p { color: #b0c2c2; font-size: 11px; line-height: 1.55; }
.kkvdi-ai-result { position: relative; display: grid; gap: 8px; margin-top: 15px; }
.kkvdi-ai-result span { padding: 10px 13px; border-left: 2px solid var(--di-teal); color: #8fa8a8; font-size: 9px; background: rgba(255,255,255,.02); }

.kkvdi-data-preview { padding: 30px; }
.kkvdi-data-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.kkvdi-data-kpis span { padding: 17px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); }
.kkvdi-data-kpis small { display: block; color: #708b8b; font-size: 7px; letter-spacing: .1em; }
.kkvdi-data-kpis strong { display: block; margin-top: 8px; color: var(--di-teal); font-size: 24px; }
.kkvdi-data-chart { position: relative; height: 180px; margin-top: 35px; border-bottom: 1px solid rgba(255,255,255,.1); background: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px); background-size: 100% 35px; }
.kkvdi-data-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kkvdi-data-chart path { fill: none; stroke: var(--di-teal); stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 10px rgba(69,223,194,.3)); }
.kkvdi-data-chart i { position: absolute; top: 14%; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--di-cyan); box-shadow: 0 0 18px rgba(95,221,255,.8); }

/* ==========================================================
   FLOW
   ========================================================== */
.kkvdi-flow {
  padding: 135px 0 145px;
  background:
    radial-gradient(circle at 15% 24%, rgba(69,223,194,.09), transparent 25%),
    linear-gradient(135deg, #031014, #061b20 60%, #041316);
}
.kkvdi-flow-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
  padding-top: 36px;
}
.kkvdi-flow-rail {
  position: absolute;
  z-index: 0;
  top: 13px;
  right: 9.7%;
  left: 9.7%;
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}
.kkvdi-flow-rail span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--di-teal);
  box-shadow: 0 0 15px rgba(69,223,194,.5);
  transition: width .55s var(--di-ease);
}
.kkvdi-flow-step {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: 148px;
  padding: 20px 16px;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--di-line);
  color: #86a0a0;
  text-align: left;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s var(--di-ease);
}
.kkvdi-flow-step::before {
  content: "";
  position: absolute;
  top: -29px;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translateX(-50%);
  border: 2px solid #6e8888;
  border-radius: 50%;
  background: var(--di-night);
}
.kkvdi-flow-step:hover,
.kkvdi-flow-step.is-active,
.kkvdi-flow-step.is-passed {
  color: var(--di-white);
  border-color: rgba(69,223,194,.45);
  background: rgba(69,223,194,.075);
}
.kkvdi-flow-step.is-active { transform: translateY(-5px); }
.kkvdi-flow-step.is-active::before,
.kkvdi-flow-step.is-passed::before { border-color: var(--di-teal); background: var(--di-teal); box-shadow: 0 0 16px rgba(69,223,194,.6); }
.kkvdi-flow-step > span { color: var(--di-teal-bright); font-size: 9px; font-weight: 900; }
.kkvdi-flow-step strong { max-width: 100%; margin-top: 24px; font-size: 16px; overflow-wrap: anywhere; }
.kkvdi-flow-step small { max-width: 100%; margin-top: 8px; color: #6f8989; font-size: 7px; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase; overflow-wrap: anywhere; }
.kkvdi-flow-console {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0,1.2fr) minmax(260px,.45fr);
  gap: 25px 55px;
  margin-top: 18px;
  padding: 34px;
  border: 1px solid rgba(122,244,222,.24);
  background: rgba(2,13,16,.72);
  box-shadow: var(--di-shadow);
}
.kkvdi-flow-console-top { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 20px; color: var(--di-teal-bright); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.kkvdi-flow-console-top small { color: #718c8c; }
.kkvdi-flow-console h3 { font-size: 31px; letter-spacing: -.045em; line-height: 1.04; }
.kkvdi-flow-console > p { color: var(--di-muted); font-size: 14px; line-height: 1.68; }
.kkvdi-flow-event { grid-column: 2; grid-row: 2 / span 2; padding: 24px; border: 1px solid rgba(69,223,194,.2); background: rgba(69,223,194,.055); }
.kkvdi-flow-event small { display: block; color: #718b8b; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.kkvdi-flow-event strong { display: block; margin-top: 12px; color: var(--di-teal-bright); font-family: Consolas, monospace; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }

/* ==========================================================
   AUTOMATION
   ========================================================== */
.kkvdi-automation { padding: 135px 0 145px; }
.kkvdi-automation-layout { display: grid; grid-template-columns: minmax(0,.75fr) minmax(520px,1fr); align-items: center; gap: 80px; }
.kkvdi-automation-copy > p:not(.kkvdi-index) { max-width: 600px; margin-top: 25px; color: var(--di-muted-dark); font-size: 16px; line-height: 1.72; }
.kkvdi-mode-switch { display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 31px; border: 1px solid var(--di-line-dark); }
.kkvdi-mode-switch button { min-width: 150px; min-height: 46px; padding: 0 16px; border: 0; color: #6e8080; background: transparent; cursor: pointer; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.kkvdi-mode-switch button.is-active { color: #031214; background: var(--di-teal); }
.kkvdi-automation-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 29px; background: var(--di-line-dark); border: 1px solid var(--di-line-dark); }
.kkvdi-automation-metrics span { min-width: 0; padding: 17px; background: var(--di-paper); }
.kkvdi-automation-metrics small { display: block; color: #728484; font-size: 7px; font-weight: 900; letter-spacing: .11em; }
.kkvdi-automation-metrics strong { display: block; margin-top: 8px; color: var(--di-teal-deep); font-size: 25px; letter-spacing: -.04em; overflow-wrap: anywhere; }
.kkvdi-automation-console { overflow: hidden; border: 1px solid rgba(6,19,22,.18); background: var(--di-night-2); box-shadow: 0 35px 80px rgba(6,19,22,.18); }
.kkvdi-console-header { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px; border-bottom: 1px solid var(--di-line); color: var(--di-teal-bright); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.kkvdi-console-header span { display: inline-flex; align-items: center; gap: 8px; }
.kkvdi-console-header i { width: 7px; height: 7px; border-radius: 50%; background: var(--di-warning); box-shadow: 0 0 14px rgba(255,206,115,.5); }
.kkvdi[data-active-mode="system"] .kkvdi-console-header i,
.kkvdi-automation[data-active-mode="system"] .kkvdi-console-header i { background: var(--di-teal); box-shadow: 0 0 14px rgba(69,223,194,.6); }
.kkvdi-console-header small { color: #718b8b; }
.kkvdi-task-list { display: grid; padding: 19px; gap: 9px; }
.kkvdi-task-list > div { display: grid; min-width: 0; min-height: 57px; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 0 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); }
.kkvdi-task-list span { color: #728c8c; font-size: 8px; font-weight: 900; }
.kkvdi-task-list strong { min-width: 0; color: #d6e2e1; font-size: 12px; overflow-wrap: anywhere; }
.kkvdi-task-list small { font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.kkvdi-task-list .is-warning small { color: var(--di-warning); }
.kkvdi-task-list .is-done { border-color: rgba(69,223,194,.23); background: rgba(69,223,194,.045); }
.kkvdi-task-list .is-done small { color: var(--di-teal-bright); }
.kkvdi-console-bottom { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 15px; padding: 17px 19px; border-top: 1px solid var(--di-line); color: #6f8989; font-size: 7px; font-weight: 900; letter-spacing: .11em; }
.kkvdi-console-bottom div { height: 5px; overflow: hidden; background: rgba(255,255,255,.09); }
.kkvdi-console-bottom i { display: block; width: 42%; height: 100%; background: linear-gradient(90deg, var(--di-warning), var(--di-teal)); transition: width .6s var(--di-ease); }
.kkvdi-console-bottom strong { color: var(--di-teal-bright); font-size: 11px; }

/* ==========================================================
   PROCESS
   ========================================================== */
.kkvdi-process {
  padding: 135px 0 145px;
  background: linear-gradient(135deg, #031014, #071c21 60%, #041519);
}
.kkvdi-process-board { border: 1px solid var(--di-line); background: rgba(2,13,16,.62); box-shadow: var(--di-shadow); }
.kkvdi-process-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-bottom: 1px solid var(--di-line); }
.kkvdi-process-tabs button { display: flex; min-width: 0; min-height: 86px; padding: 15px 12px; flex-direction: column; align-items: flex-start; justify-content: center; border: 0; border-right: 1px solid var(--di-line); color: #799393; text-align: left; background: transparent; cursor: pointer; }
.kkvdi-process-tabs button:last-child { border-right: 0; }
.kkvdi-process-tabs button:hover,
.kkvdi-process-tabs button.is-active { color: var(--di-white); background: rgba(69,223,194,.075); }
.kkvdi-process-tabs span { color: var(--di-teal); font-size: 8px; font-weight: 900; }
.kkvdi-process-tabs strong { max-width: 100%; margin-top: 8px; font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
.kkvdi-process-panel { position: relative; display: grid; min-height: 390px; grid-template-columns: 170px minmax(0,1.2fr) minmax(280px,.62fr); align-items: center; gap: 35px; padding: 42px; overflow: hidden; }
.kkvdi-process-number { color: rgba(122,244,222,.12); font-size: 150px; font-weight: 950; letter-spacing: -.12em; line-height: .8; }
.kkvdi-process-copy { min-width: 0; }
.kkvdi-process-copy > span { color: var(--di-teal-bright); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.kkvdi-process-copy h3 { margin-top: 15px; font-size: 35px; letter-spacing: -.05em; line-height: 1; }
.kkvdi-process-copy p { margin-top: 18px; color: var(--di-muted); font-size: 14px; line-height: 1.68; }
.kkvdi-process-result { display: grid; gap: 10px; padding: 26px; border: 1px solid rgba(69,223,194,.22); background: rgba(69,223,194,.045); }
.kkvdi-process-result small { color: #718b8b; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.kkvdi-process-result strong { color: #d9e6e5; font-size: 13px; line-height: 1.5; }
.kkvdi-process-result small:nth-of-type(2) { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--di-line); }
.kkvdi-process-result strong:last-child { color: var(--di-teal-bright); }
.kkvdi-process-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: rgba(255,255,255,.06); }
.kkvdi-process-progress i { display: block; width: 16.666%; height: 100%; background: var(--di-teal); box-shadow: 0 0 18px rgba(69,223,194,.45); transition: width .55s var(--di-ease); }

/* ==========================================================
   OPERATIONS
   ========================================================== */
.kkvdi-operations { padding: 135px 0 145px; }
.kkvdi-operations-layout { display: grid; grid-template-columns: minmax(450px,.92fr) minmax(0,1fr); align-items: center; gap: 90px; }
.kkvdi-operations-visual { position: relative; min-height: 610px; }
.kkvdi-shield {
  position: absolute;
  inset: 50% auto auto 50%;
  display: flex;
  width: 370px;
  height: 430px;
  align-items: center;
  justify-content: center;
  transform: translate(-50%,-50%);
  clip-path: polygon(50% 0, 92% 15%, 86% 72%, 50% 100%, 14% 72%, 8% 15%);
  color: var(--di-white);
  text-align: center;
  background: linear-gradient(145deg, #07252b, #031014);
  box-shadow: inset 0 0 70px rgba(69,223,194,.08);
}
.kkvdi-shield::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; border: 1px solid rgba(69,223,194,.5); }
.kkvdi-shield > div { position: relative; z-index: 2; width: 70%; }
.kkvdi-shield small { color: #799494; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.kkvdi-shield strong { display: block; margin-top: 10px; color: var(--di-teal); font-size: 58px; letter-spacing: -.06em; }
.kkvdi-shield p { margin-top: 12px; color: #9bb2b2; font-size: 11px; line-height: 1.6; }
.kkvdi-shield-ring { position: absolute; border: 1px solid rgba(69,223,194,.16); border-radius: 50%; }
.kkvdi-shield-ring-a { width: 240px; height: 240px; }
.kkvdi-shield-ring-b { width: 310px; height: 310px; border-style: dashed; animation: kkvdiSpinSimple 35s linear infinite; }
@keyframes kkvdiSpinSimple { to { transform: rotate(360deg); } }
.kkvdi-status-card { position: absolute; display: flex; min-width: 170px; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid rgba(6,19,22,.14); color: var(--di-ink); background: rgba(255,255,255,.94); box-shadow: 0 18px 40px rgba(6,19,22,.13); }
.kkvdi-status-card i { width: 9px; height: 9px; border-radius: 50%; background: var(--di-teal); box-shadow: 0 0 14px rgba(69,223,194,.5); }
.kkvdi-status-card span { display: flex; flex-direction: column; }
.kkvdi-status-card small { color: #748686; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.kkvdi-status-card strong { margin-top: 3px; font-size: 12px; }
.kkvdi-status-card-a { top: 9%; left: 0; }
.kkvdi-status-card-b { top: 47%; right: 0; }
.kkvdi-status-card-c { bottom: 7%; left: 7%; }
.kkvdi-operations-copy > p:not(.kkvdi-index) { margin-top: 25px; color: var(--di-muted-dark); font-size: 16px; line-height: 1.72; }
.kkvdi-operations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 38px; border: 1px solid var(--di-line-dark); background: var(--di-line-dark); }
.kkvdi-operations-grid article { display: grid; min-width: 0; grid-template-columns: 28px minmax(0,1fr); gap: 14px; padding: 23px; background: var(--di-paper); }
.kkvdi-operations-grid article > span { color: var(--di-teal-deep); font-size: 9px; font-weight: 900; }
.kkvdi-operations-grid h3 { font-size: 17px; letter-spacing: -.025em; }
.kkvdi-operations-grid p { margin-top: 8px; color: var(--di-muted-dark); font-size: 12px; line-height: 1.55; }

/* ==========================================================
   EDITORIAL / SEO CONTENT
   ========================================================== */
.kkvdi-editorial {
  padding: 135px 0 145px;
  color: var(--di-white);
  background:
    radial-gradient(circle at 82% 22%, rgba(95,221,255,.09), transparent 25%),
    linear-gradient(135deg, #031014, #071c21 62%, #041519);
}
.kkvdi-editorial-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(440px,.75fr); gap: 100px; }
.kkvdi-editorial-copy { padding-top: 12px; }
.kkvdi-editorial-copy p { color: #adc1c1; font-size: 16px; line-height: 1.86; }
.kkvdi-editorial-copy p + p { margin-top: 23px; }
.kkvdi-editorial-copy strong { color: var(--di-white); }
.kkvdi-editorial-copy a { border-bottom: 1px solid rgba(69,223,194,.45); font-weight: 800; }

/* ==========================================================
   FAQ
   ========================================================== */
.kkvdi-faq { padding: 135px 0 145px; background: #041418; }
.kkvdi-faq-layout { display: grid; grid-template-columns: minmax(300px,.55fr) minmax(0,1fr); align-items: start; gap: 90px; }
.kkvdi-faq-intro { position: sticky; top: 110px; }
.kkvdi-faq-intro > p:not(.kkvdi-index) { max-width: 390px; margin-top: 24px; color: var(--di-muted); font-size: 15px; line-height: 1.7; }
.kkvdi-text-link { display: inline-flex; gap: 15px; margin-top: 27px; color: var(--di-teal-bright); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.kkvdi-accordions { border-top: 1px solid var(--di-line); }
.kkvdi-accordions details { border-bottom: 1px solid var(--di-line); }
.kkvdi-accordions summary {
  display: grid;
  min-width: 0;
  min-height: 91px;
  grid-template-columns: 38px minmax(0,1fr) 28px;
  align-items: center;
  gap: 17px;
  padding: 0 10px;
  color: #c8d7d6;
  cursor: pointer;
  list-style: none;
}
.kkvdi-accordions summary::-webkit-details-marker { display: none; }
.kkvdi-accordions summary span { color: var(--di-teal); font-size: 9px; font-weight: 900; }
.kkvdi-accordions summary strong { min-width: 0; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.kkvdi-accordions summary b { color: var(--di-teal); font-size: 24px; font-weight: 400; transition: transform .3s var(--di-ease); }
.kkvdi-accordions details[open] summary b { transform: rotate(45deg); }
.kkvdi-accordions details > p { max-width: 720px; padding: 0 55px 29px; color: #8fa8a8; font-size: 14px; line-height: 1.72; }

/* ==========================================================
   CTA
   ========================================================== */
.kkvdi-cta {
  padding: 145px 0 150px;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 50%, rgba(95,221,255,.16), transparent 26%),
    radial-gradient(circle at 15% 20%, rgba(69,223,194,.12), transparent 28%),
    linear-gradient(135deg, #020b0e, #061c20 60%, #051519);
}
.kkvdi-cta-grid { opacity: .28; mask-image: linear-gradient(to right, black, transparent 80%); }
.kkvdi-cta-layout { display: grid; grid-template-columns: minmax(0,.86fr) minmax(470px,.78fr); align-items: center; gap: 90px; }
.kkvdi-cta-copy > p:not(.kkvdi-kicker) { max-width: 680px; margin-top: 25px; color: var(--di-muted); font-size: 16px; line-height: 1.72; }
.kkvdi-cta-terminal { overflow: hidden; border: 1px solid rgba(122,244,222,.25); background: rgba(2,13,16,.78); box-shadow: var(--di-shadow); }
.kkvdi-terminal-top { display: flex; min-height: 45px; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid var(--di-line); }
.kkvdi-terminal-top > span { display: flex; gap: 6px; }
.kkvdi-terminal-top i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
.kkvdi-terminal-top small { color: #708b8b; font-size: 8px; font-family: Consolas, monospace; }
.kkvdi-terminal-body { padding: 27px; }
.kkvdi-terminal-body p { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #91aaaa; font-family: Consolas, monospace; font-size: 11px; }
.kkvdi-terminal-body p span { color: #637f7f; }
.kkvdi-terminal-body p b { grid-column: 2; color: var(--di-teal-bright); font-weight: 400; }
.kkvdi-terminal-body > div { margin-top: 25px; padding: 20px; border: 1px solid rgba(69,223,194,.28); background: rgba(69,223,194,.05); }
.kkvdi-terminal-body > div small { display: block; color: #6f8a8a; font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.kkvdi-terminal-body > div strong { display: block; margin-top: 8px; color: var(--di-teal); font-size: 20px; letter-spacing: -.03em; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1180px) {
  .kkvdi-hero-layout { grid-template-columns: minmax(0,.8fr) minmax(480px,1fr); gap: 38px; }
  .kkvdi-map-stage { min-height: 590px; }
  .kkvdi-node { width: 112px; }
  .kkvdi-layer-panel { grid-template-columns: 1fr; }
  .kkvdi-layer-visual { border-right: 0; border-bottom: 1px solid var(--di-line); }
  .kkvdi-layer-readout { min-height: 390px; }
  .kkvdi-automation-layout { grid-template-columns: minmax(0,.78fr) minmax(460px,1fr); gap: 52px; }
  .kkvdi-operations-layout { grid-template-columns: minmax(400px,.8fr) minmax(0,1fr); gap: 55px; }
  .kkvdi-cta-layout { gap: 55px; }
}

@media (max-width: 980px) {
  .kkvdi-shell { width: min(100% - 40px, 1240px); }
  .kkvdi-hero { padding-top: 155px; }
  .kkvdi-hero-layout { grid-template-columns: 1fr; gap: 58px; }
  .kkvdi-hero-copy { max-width: 850px; }
  .kkvdi-system-map { width: min(720px,100%); margin-inline: auto; }
  .kkvdi-outcome-grid { grid-template-columns: 1fr 1fr; }
  .kkvdi-architecture-layout,
  .kkvdi-services-layout { grid-template-columns: 1fr; }
  .kkvdi-layer-tabs,
  .kkvdi-service-menu { grid-template-columns: 1fr 1fr; border-left: 1px solid var(--di-line); }
  .kkvdi-layer-tabs button,
  .kkvdi-service-menu button { border-left: 0; }
  .kkvdi-flow-board { grid-template-columns: repeat(5,minmax(120px,1fr)); overflow: visible; }
  .kkvdi-flow-step { min-height: 160px; }
  .kkvdi-flow-console { grid-template-columns: 1fr; }
  .kkvdi-flow-event { grid-column: 1; grid-row: auto; }
  .kkvdi-automation-layout,
  .kkvdi-operations-layout,
  .kkvdi-editorial-layout,
  .kkvdi-faq-layout,
  .kkvdi-cta-layout { grid-template-columns: 1fr; }
  .kkvdi-automation-console { width: min(720px,100%); }
  .kkvdi-operations-visual { width: min(650px,100%); margin-inline: auto; }
  .kkvdi-editorial-layout { gap: 50px; }
  .kkvdi-faq-intro { position: static; }
  .kkvdi-process-panel { grid-template-columns: 130px 1fr; }
  .kkvdi-process-result { grid-column: 1 / -1; }
  .kkvdi-cta-terminal { width: min(700px,100%); }
}

@media (max-width: 760px) {
  .kkvdi-shell { width: min(100% - 28px, 1240px); }
  .kkvdi-section-head,
  .kkvdi-architecture-head,
  .kkvdi-flow-head,
  .kkvdi-process-head { grid-template-columns: 1fr; gap: 27px; margin-bottom: 40px; }
  .kkvdi-section-head h2,
  .kkvdi-architecture-head h2,
  .kkvdi-flow-head h2,
  .kkvdi-process-head h2,
  .kkvdi-automation-copy h2,
  .kkvdi-operations-copy h2,
  .kkvdi-editorial-title h2,
  .kkvdi-faq-intro h2,
  .kkvdi-cta-copy h2 { font-size: clamp(42px, 12vw, 61px); line-height: .95; }

  .kkvdi-hero { min-height: auto; padding: 142px 0 130px; }
  .kkvdi-hero h1 { font-size: clamp(52px, 14.7vw, 79px); line-height: .88; overflow-wrap: anywhere; }
  .kkvdi-hero-lead { font-size: 16px; }
  .kkvdi-actions { flex-direction: column; }
  .kkvdi-btn { width: 100%; min-width: 0; gap: 14px; padding: 0 18px; line-height: 1.35; text-align: left; }
  .kkvdi-hero-proof { gap: 9px; }
  .kkvdi-hero-proof i { display: none; }
  .kkvdi-hero-proof span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.1); }

  .kkvdi-map-topline { align-items: flex-start; min-height: 58px; padding: 12px 13px; flex-direction: column; gap: 5px; }
  .kkvdi-map-stage {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    padding: 14px;
  }
  .kkvdi-map-stage::before { inset: 7px; }
  .kkvdi-map-stage::after,
  .kkvdi-map-lines,
  .kkvdi-map-orbit { display: none; }
  .kkvdi-core {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 255px;
    grid-column: 1 / -1;
    padding: 29px 24px 22px;
    transform: none;
    border-radius: 2px;
  }
  .kkvdi-core-pulse { display: none; }
  .kkvdi-core > strong { font-size: 32px; }
  .kkvdi-node {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    min-height: 93px;
    transform: none !important;
  }
  .kkvdi-node strong { font-size: 12px; }
  .kkvdi-map-footer { min-height: 62px; flex-wrap: wrap; gap: 9px 17px; padding: 10px 12px; }
  .kkvdi-marquee-group { padding: 13px 0; }

  .kkvdi-outcomes,
  .kkvdi-architecture,
  .kkvdi-services,
  .kkvdi-flow,
  .kkvdi-automation,
  .kkvdi-process,
  .kkvdi-operations,
  .kkvdi-editorial,
  .kkvdi-faq,
  .kkvdi-cta { padding-top: 92px; padding-bottom: 96px; }
  .kkvdi-outcome-grid { grid-template-columns: 1fr; }
  .kkvdi-outcome-card { min-height: 290px; }

  .kkvdi-layer-tabs,
  .kkvdi-service-menu { grid-template-columns: 1fr; }
  .kkvdi-layer-tabs button { min-height: 92px; }
  .kkvdi-layer-visual { min-height: 0; padding: 13px; }
  .kkvdi-layer-readout { min-height: 0; padding: 28px 22px; }
  .kkvdi-layer-readout h3 { font-size: 27px; }
  .kkvdi-browser,
  .kkvdi-convert-ui,
  .kkvdi-operate-ui,
  .kkvdi-analytics-ui { min-height: 380px; }
  .kkvdi-search-result { padding: 38px 22px; }
  .kkvdi-convert-ui { grid-template-columns: 1fr; }
  .kkvdi-convert-form { border-top: 1px solid var(--di-line); border-left: 0; }
  .kkvdi-pipeline { grid-template-columns: 1fr 1fr; }
  .kkvdi-pipeline article { min-height: 130px; }
  .kkvdi-pipeline i { height: 45px; }
  .kkvdi-chart { height: 210px; gap: 7px; }

  .kkvdi-service-menu button { min-height: 88px; }
  .kkvdi-service-preview { min-height: 0; padding: 13px; }
  .kkvdi-service-copy { padding: 28px 22px 30px; }
  .kkvdi-service-copy > h3 { font-size: 31px; }
  .kkvdi-service-columns { grid-template-columns: 1fr; gap: 21px; }
  .kkvdi-service-cta { width: 100%; min-width: 0; gap: 15px; line-height: 1.35; }
  .kkvdi-preview-window,
  .kkvdi-seo-preview,
  .kkvdi-crm-preview,
  .kkvdi-auto-preview,
  .kkvdi-ai-preview,
  .kkvdi-data-preview { min-height: 315px; }
  .kkvdi-preview-nav { gap: 8px; }
  .kkvdi-preview-nav span { width: 28px; }
  .kkvdi-preview-hero { padding: 33px 21px; }
  .kkvdi-preview-hero::after { opacity: .65; }
  .kkvdi-seo-preview,
  .kkvdi-ai-preview,
  .kkvdi-data-preview { padding: 18px; }
  .kkvdi-crm-preview { grid-template-columns: 46px minmax(0,1fr); }
  .kkvdi-crm-main { padding: 18px 12px; }
  .kkvdi-crm-main section { gap: 5px; }
  .kkvdi-crm-main article { padding: 7px; }
  .kkvdi-auto-preview { grid-template-columns: 1fr; gap: 9px; padding: 20px; }
  .kkvdi-auto-preview > i { transform: rotate(90deg); }
  .kkvdi-data-kpis { gap: 5px; }
  .kkvdi-data-kpis span { padding: 11px 8px; }
  .kkvdi-data-kpis strong { font-size: 18px; }

  .kkvdi-flow-board { display: grid; grid-template-columns: 1fr; gap: 8px; padding-top: 0; }
  .kkvdi-flow-rail { display: none; }
  .kkvdi-flow-step { min-height: 88px; padding: 15px 17px 15px 60px; justify-content: center; }
  .kkvdi-flow-step::before { top: 50%; left: 25px; transform: translate(-50%,-50%); }
  .kkvdi-flow-step > span { position: absolute; top: 17px; left: 17px; }
  .kkvdi-flow-step strong { margin-top: 0; }
  .kkvdi-flow-console { padding: 24px 20px; }
  .kkvdi-flow-console-top { align-items: flex-start; flex-direction: column; gap: 5px; }
  .kkvdi-flow-console h3 { font-size: 27px; }

  .kkvdi-automation-layout { gap: 45px; }
  .kkvdi-mode-switch { display: grid; width: 100%; }
  .kkvdi-mode-switch button { min-width: 0; padding: 0 9px; font-size: 8px; }
  .kkvdi-automation-metrics { grid-template-columns: 1fr; }
  .kkvdi-task-list { padding: 11px; }
  .kkvdi-task-list > div { grid-template-columns: 31px minmax(0,1fr); padding: 9px 11px; }
  .kkvdi-task-list small { grid-column: 2; }
  .kkvdi-console-bottom { grid-template-columns: 1fr auto; }
  .kkvdi-console-bottom div { grid-column: 1 / -1; grid-row: 2; }

  .kkvdi-process-tabs { grid-template-columns: 1fr 1fr; }
  .kkvdi-process-tabs button { min-height: 76px; border-bottom: 1px solid var(--di-line); }
  .kkvdi-process-panel { min-height: 0; grid-template-columns: 1fr; gap: 23px; padding: 27px 21px 34px; }
  .kkvdi-process-number { font-size: 90px; }
  .kkvdi-process-copy h3 { font-size: 29px; }
  .kkvdi-process-result { grid-column: auto; }

  .kkvdi-operations-visual { min-height: 500px; }
  .kkvdi-shield { width: 290px; height: 340px; }
  .kkvdi-shield strong { font-size: 46px; }
  .kkvdi-shield-ring-a { width: 190px; height: 190px; }
  .kkvdi-shield-ring-b { width: 250px; height: 250px; }
  .kkvdi-status-card { min-width: 145px; padding: 11px; }
  .kkvdi-status-card-b { right: 0; }
  .kkvdi-operations-grid { grid-template-columns: 1fr; }

  .kkvdi-editorial-layout { gap: 38px; }
  .kkvdi-editorial-copy p { font-size: 15px; }
  .kkvdi-faq-layout { gap: 45px; }
  .kkvdi-accordions summary { min-height: 82px; grid-template-columns: 29px minmax(0,1fr) 23px; gap: 11px; padding: 0 4px; }
  .kkvdi-accordions summary strong { font-size: 15px; }
  .kkvdi-accordions details > p { padding: 0 4px 27px 40px; }
  .kkvdi-cta-layout { gap: 48px; }
  .kkvdi-terminal-body { padding: 18px; }
}

@media (max-width: 440px) {
  .kkvdi-shell { width: calc(100% - 22px); }
  .kkvdi-hero { padding-top: 130px; }
  .kkvdi-hero h1 { font-size: clamp(47px, 14.2vw, 65px); }
  .kkvdi-hero-lead { font-size: 15px; }
  .kkvdi-map-stage { grid-template-columns: 1fr; }
  .kkvdi-core { grid-column: 1; }
  .kkvdi-map-footer span { font-size: 7px; }
  .kkvdi-section-head h2,
  .kkvdi-architecture-head h2,
  .kkvdi-flow-head h2,
  .kkvdi-process-head h2,
  .kkvdi-automation-copy h2,
  .kkvdi-operations-copy h2,
  .kkvdi-editorial-title h2,
  .kkvdi-faq-intro h2,
  .kkvdi-cta-copy h2 { font-size: clamp(38px, 11.8vw, 50px); }
  .kkvdi-outcome-card { padding: 25px 21px 32px; }
  .kkvdi-layer-tabs button,
  .kkvdi-service-menu button { grid-template-columns: 30px minmax(0,1fr) 18px; gap: 9px; padding-inline: 13px; }
  .kkvdi-service-menu strong { font-size: 14px; }
  .kkvdi-service-panel-top { align-items: flex-start; min-height: 60px; padding: 12px; flex-direction: column; gap: 5px; }
  .kkvdi-preview-nav b { display: none; }
  .kkvdi-preview-hero strong { font-size: 34px; }
  .kkvdi-preview-cards { grid-template-columns: 1fr; }
  .kkvdi-preview-cards span { height: 32px; }
  .kkvdi-seo-tree > div:nth-child(2) { grid-template-columns: 1fr; }
  .kkvdi-seo-tree > div:nth-child(3) { grid-template-columns: repeat(3,1fr); }
  .kkvdi-crm-main section { grid-template-columns: 1fr; }
  .kkvdi-crm-main article { min-height: 80px; }
  .kkvdi-crm-main article span { height: 26px; }
  .kkvdi-ai-core { align-items: flex-start; flex-wrap: wrap; }
  .kkvdi-data-kpis { grid-template-columns: 1fr; }
  .kkvdi-mode-switch { grid-template-columns: 1fr; }
  .kkvdi-automation-metrics strong { font-size: 22px; }
  .kkvdi-process-tabs { grid-template-columns: 1fr; }
  .kkvdi-process-tabs button { border-right: 0; }
  .kkvdi-operations-visual { min-height: 460px; }
  .kkvdi-shield { width: 255px; height: 305px; }
  .kkvdi-shield p { font-size: 9px; }
  .kkvdi-status-card { min-width: 132px; }
  .kkvdi-status-card-a { top: 1%; }
  .kkvdi-status-card-b { top: 44%; }
  .kkvdi-status-card-c { bottom: 2%; left: 0; }
  .kkvdi-terminal-body p { grid-template-columns: 25px minmax(0,1fr); }
}

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

.kkvdi-marquee-track {
  animation-duration: var(--kkvdi-marquee-duration, 28s);
}
@keyframes kkvdiMarquee {
  to { transform: translate3d(var(--kkvdi-marquee-shift, -50%), 0, 0); }
}

/* Az „Automatizáció” egy sorban marad, csak ennél a hosszú állapotnál lesz kisebb. */
.kkvdi-core > strong {
  overflow-wrap: normal;
  word-break: normal;
}
.kkvdi-core > strong.is-long-title {
  font-size: 23px;
  letter-spacing: -.06em;
  line-height: 1;
  white-space: nowrap;
}

/* A szolgáltatáscím és a leíró sor közös, valóban rugalmas oszlopban marad. */
.kkvdi-service-menu button > div {
  min-width: 0;
  max-width: 100%;
}
.kkvdi-service-menu strong,
.kkvdi-service-menu small {
  max-width: 100%;
  overflow: visible;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}
.kkvdi-service-menu small {
  line-height: 1.45;
}

/* A korábbi pajzs helyett rendezett, modern „saját rendszer” központ. */
.kkvdi-operations-visual {
  isolation: isolate;
}
.kkvdi-shield {
  width: 390px;
  height: 360px;
  clip-path: none;
  overflow: hidden;
  border: 1px solid rgba(21,157,145,.34);
  border-radius: 30px;
  background:
    linear-gradient(rgba(122,244,222,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,244,222,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(69,223,194,.16), transparent 38%),
    linear-gradient(145deg, #08292f, #031014 72%);
  background-size: 30px 30px, 30px 30px, auto, auto;
  box-shadow: 0 34px 80px rgba(3,16,20,.22), inset 0 0 70px rgba(69,223,194,.07);
}
.kkvdi-shield::before {
  inset: 14px;
  clip-path: none;
  border: 1px solid rgba(69,223,194,.28);
  border-radius: 22px;
}
.kkvdi-shield::after {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px dashed rgba(122,244,222,.12);
  border-radius: 50%;
  pointer-events: none;
}
.kkvdi-shield > div {
  width: 72%;
}
.kkvdi-shield small {
  color: #94afaf;
}
.kkvdi-shield strong {
  margin-top: 12px;
  font-size: 58px;
  letter-spacing: -.07em;
}
.kkvdi-shield p {
  max-width: 230px;
  margin-inline: auto;
}
.kkvdi-shield-ring-a {
  width: 205px;
  height: 205px;
}
.kkvdi-shield-ring-b {
  width: 285px;
  height: 285px;
}

@media (max-width: 760px) {
  .kkvdi-core > strong.is-long-title {
    font-size: clamp(25px, 8.3vw, 32px);
  }

  .kkvdi-service-menu button {
    min-height: 98px;
    height: auto;
  }
  .kkvdi-service-menu small {
    font-size: 7px;
    letter-spacing: .07em;
  }

  .kkvdi-operations-visual {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .kkvdi-shield {
    position: relative;
    inset: auto;
    width: min(100%, 360px);
    height: 330px;
    grid-column: 1 / -1;
    margin: 0 auto 8px;
    transform: none;
    border-radius: 25px;
  }
  .kkvdi-shield strong {
    font-size: 50px;
  }
  .kkvdi-status-card,
  .kkvdi-status-card-a,
  .kkvdi-status-card-b,
  .kkvdi-status-card-c {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
  }
  .kkvdi-status-card-c {
    grid-column: 1 / -1;
  }
}

@media (max-width: 440px) {
  .kkvdi-service-menu button {
    min-height: 105px;
  }
  .kkvdi-service-menu strong {
    font-size: 13px;
  }
  .kkvdi-service-menu small {
    font-size: 6.5px;
    line-height: 1.5;
  }

  .kkvdi-operations-visual {
    grid-template-columns: 1fr;
  }
  .kkvdi-shield {
    grid-column: 1;
    height: 310px;
  }
  .kkvdi-shield strong {
    font-size: 46px;
  }
  .kkvdi-status-card-c {
    grid-column: 1;
  }
}

/* ==========================================================
   V2 VÉGLEGES ARCULATI FELÜLÍRÁS
   Lila főszín / fekete–fehér alap / kékeszöld kontraszt
   Nagyobb hero, a futószalag saját sötét területen marad
   ========================================================== */
.kkvdi {
  --di-night: #05060d;
  --di-night-2: #090b17;
  --di-night-3: #101426;
  --di-night-4: #171c33;
  --di-paper: #f4f3f7;
  --di-paper-2: #ebe9ef;
  --di-ink: #090a12;
  --di-white: #fbfaff;
  --di-muted: #b9bbc9;
  --di-muted-dark: #615f69;
  --di-purple: #955cff;
  --di-purple-deep: #6226d5;
  --di-purple-soft: #c7b1ff;
  --di-teal: #45dfc2;
  --di-teal-bright: #72ead4;
  --di-teal-deep: #169d84;
  --di-teal-dark: #103a34;
  --di-teal-pale: #effbf8;
  --di-cyan: #5ed8ee;
  --di-cyan-soft: #b8f2ff;
  --di-blue: #6d74e8;
  --di-line-dark: rgba(9,10,18,.14);
  --di-shadow: 0 36px 96px rgba(2,3,12,.27);
}

.kkv-header-inner {
  box-shadow:
    0 18px 52px rgba(2,3,12,.34),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* A lila a vezető arculati szín, a kékeszöld az aktív kontraszt. */
.kkvdi-index {
  color: var(--di-purple-deep);
}

.kkvdi-paper .kkvdi-index,
.kkvdi-outcomes .kkvdi-index,
.kkvdi-services .kkvdi-index,
.kkvdi-automation .kkvdi-index,
.kkvdi-operations .kkvdi-index {
  color: var(--di-purple-deep);
}

.kkvdi h2 em,
.kkvdi-automation-copy h2 em,
.kkvdi-operations-copy h2 em,
.kkvdi-editorial-title h2 em {
  color: var(--di-purple);
}

.kkvdi-hero h1 em,
.kkvdi-architecture h2 em,
.kkvdi-flow h2 em,
.kkvdi-process h2 em,
.kkvdi-faq h2 em,
.kkvdi-cta h2 em {
  color: var(--di-teal-bright);
}

.kkvdi .kkvdi-btn-primary,
.kkvdi .kkvdi-btn-primary:visited,
.kkvdi .kkvdi-btn-primary:hover,
.kkvdi .kkvdi-btn-primary:focus,
.kkvdi .kkvdi-btn-primary:active {
  color: #fff !important;
  background: linear-gradient(110deg, var(--di-purple-deep), var(--di-purple)) !important;
  box-shadow:
    0 18px 46px rgba(149,92,255,.30),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.kkvdi .kkvdi-btn-primary:hover {
  background: linear-gradient(110deg, #7134df, #ad75ff) !important;
  box-shadow:
    0 25px 58px rgba(149,92,255,.40),
    0 0 55px rgba(69,223,194,.11) !important;
}

.kkvdi .kkvdi-btn-quiet,
.kkvdi .kkvdi-btn-quiet:visited,
.kkvdi .kkvdi-btn-quiet:hover,
.kkvdi .kkvdi-btn-quiet:focus,
.kkvdi .kkvdi-btn-quiet:active {
  color: var(--di-white) !important;
}

/* Nagyobb, fekete–lila hero. A plusz alsó térben a ribbon nem lóg át a fehér szekcióra. */
.kkvdi-hero {
  min-height: 1120px;
  padding: 172px 0 300px;
  background:
    radial-gradient(circle at 76% 23%, rgba(149,92,255,.28), transparent 29%),
    radial-gradient(circle at 91% 69%, rgba(69,223,194,.12), transparent 25%),
    radial-gradient(circle at 10% 75%, rgba(239,102,201,.07), transparent 27%),
    linear-gradient(135deg, #05060d 0%, #090b18 55%, #0c0d1d 100%) !important;
}

.kkvdi-grid-bg,
.kkvdi-cta-grid {
  background-image:
    linear-gradient(rgba(199,177,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,177,255,.055) 1px, transparent 1px);
}

.kkvdi-grid-bg::after {
  background: linear-gradient(90deg, rgba(5,6,13,.96), transparent 40%, transparent 70%, rgba(5,6,13,.58));
}

.kkvdi-hero-glow-a {
  background: rgba(149,92,255,.20);
}

.kkvdi-hero-glow-b {
  background: rgba(69,223,194,.10);
}

.kkvdi-map-shell,
.kkvdi-automation-console,
.kkvdi-cta-terminal {
  border-color: rgba(149,92,255,.28);
  background: rgba(7,8,18,.84);
  box-shadow:
    0 44px 120px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.kkvdi-map-stage,
.kkvdi-service-preview {
  background:
    radial-gradient(circle at center, rgba(69,223,194,.07), transparent 34%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(145deg, #090b17, #101426);
  background-size: auto, 30px 30px, 30px 30px, auto;
}

.kkvdi-core {
  border-color: rgba(149,92,255,.58);
  background: rgba(14,15,34,.95);
  box-shadow:
    0 0 82px rgba(149,92,255,.16),
    inset 0 0 45px rgba(69,223,194,.055);
}

.kkvdi-core-pulse {
  border-color: rgba(149,92,255,.24);
}

.kkvdi-node:hover,
.kkvdi-node.is-active {
  border-color: var(--di-purple);
  background: rgba(27,21,54,.96);
  box-shadow:
    0 16px 42px rgba(0,0,0,.30),
    0 0 32px rgba(149,92,255,.11);
}

/* A futószalag kékeszöld marad, de markáns lila arculati éllel. */
.kkvdi-marquee {
  right: -2%;
  bottom: 56px;
  left: -2%;
  min-height: 70px;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 0;
  background: linear-gradient(90deg, #32cdb0 0%, var(--di-teal) 52%, var(--di-teal-bright) 100%);
  box-shadow:
    0 9px 0 var(--di-purple-deep),
    0 25px 48px rgba(0,0,0,.32);
  transform: rotate(-1.1deg) scale(1.035);
}

.kkvdi-marquee-track {
  display: flex;
  width: max-content;
  min-width: max-content;
  will-change: transform;
  animation: kkvdiMarquee 30s linear infinite;
}

.kkvdi-marquee-group {
  display: flex;
  flex: 0 0 auto;
  min-width: max-content;
  align-items: center;
  padding: 20px 0;
  white-space: nowrap;
}

.kkvdi-marquee i {
  color: var(--di-purple-deep);
}

@keyframes kkvdiMarquee {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

/* Sötét szekciók: fekete–lila alap, kékeszöld részletekkel. */
.kkvdi-architecture,
.kkvdi-flow,
.kkvdi-process,
.kkvdi-editorial,
.kkvdi-faq,
.kkvdi-cta {
  background:
    radial-gradient(circle at 84% 18%, rgba(149,92,255,.16), transparent 28%),
    radial-gradient(circle at 12% 82%, rgba(69,223,194,.075), transparent 25%),
    linear-gradient(135deg, #05060d, #090b18 60%, #0c0d1d) !important;
}

.kkvdi-layer-panel,
.kkvdi-flow-console,
.kkvdi-process-board {
  border-color: rgba(149,92,255,.24);
  background: rgba(7,8,18,.72);
}

.kkvdi-layer-tabs button:hover,
.kkvdi-layer-tabs button.is-active,
.kkvdi-process-tabs button:hover,
.kkvdi-process-tabs button.is-active {
  border-color: rgba(149,92,255,.46);
  background: rgba(149,92,255,.09);
}

.kkvdi-service-menu button:hover,
.kkvdi-service-menu button.is-active {
  border-color: rgba(98,38,213,.42);
  background: rgba(149,92,255,.09);
}

.kkvdi-service-menu button > span,
.kkvdi-service-menu b,
.kkvdi-service-panel-top,
.kkvdi-service-columns small,
.kkvdi-operations-grid article > span,
.kkvdi-outcome-card > span {
  color: var(--di-purple-deep);
}

.kkvdi-service-cta,
.kkvdi-service-cta:visited,
.kkvdi-service-cta:hover,
.kkvdi-service-cta:focus,
.kkvdi-service-cta:active {
  color: #071311 !important;
  background: linear-gradient(110deg, var(--di-teal), var(--di-teal-bright)) !important;
}

.kkvdi-mode-switch button.is-active {
  color: #fff;
  background: linear-gradient(110deg, var(--di-purple-deep), var(--di-purple));
}

.kkvdi-automation-metrics strong,
.kkvdi-output-line strong {
  color: var(--di-purple-deep);
}

.kkvdi-shield {
  border-color: rgba(149,92,255,.40);
  background:
    linear-gradient(rgba(199,177,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,177,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(149,92,255,.17), transparent 40%),
    linear-gradient(145deg, #101426, #05060d 72%);
  background-size: 30px 30px, 30px 30px, auto, auto;
  box-shadow:
    0 34px 80px rgba(3,4,12,.25),
    inset 0 0 70px rgba(69,223,194,.055);
}

.kkvdi-shield::before {
  border-color: rgba(149,92,255,.34);
}

.kkvdi-shield strong {
  color: var(--di-purple-soft);
}

.kkvdi-collab-note,
.kkvdi-process-result,
.kkvdi-terminal-body > div {
  border-color: rgba(149,92,255,.25);
  background: rgba(149,92,255,.06);
}

/* Tablet: továbbra is marad elegendő sötét tér a ribbon alatt és felett. */
@media (max-width: 980px) {
  .kkvdi-hero {
    min-height: 1540px;
    padding: 155px 0 285px;
  }

  .kkvdi-marquee {
    bottom: 54px;
  }
}

/* Mobil: a ribbon nem vág bele a következő világos szekcióba. */
@media (max-width: 760px) {
  .kkvdi-hero {
    min-height: 0;
    padding: 142px 0 230px;
  }

  .kkvdi-marquee {
    right: -8%;
    bottom: 52px;
    left: -8%;
    min-height: 58px;
    transform: rotate(-1.1deg) scale(1.02);
  }

  .kkvdi-marquee-group {
    padding: 16px 0;
  }

  .kkvdi-marquee span {
    font-size: 10px;
  }

  .kkvdi-marquee i {
    margin-inline: 20px;
  }
}

@media (max-width: 440px) {
  .kkvdi-hero {
    padding-top: 130px;
    padding-bottom: 215px;
  }

  .kkvdi-marquee {
    bottom: 48px;
  }
}

/* Futószalag lassítása – közvetlen felülírás */
.kkvdi .kkvdi-marquee-track {
  animation: kkvdiMarquee 130s linear infinite !important;
}/* End custom CSS */