/*
Theme Name:  Hello Elementor Child
Template:    hello-elementor
Description: ZK Digital child theme
Version:     1.0.0
*/

/* Fonts are self-hosted — see assets/fonts.css (enqueued as zk-fonts) */

:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --black:     #0A0A0A;
  --white:     #FAFAFA;
  --gray-900:  #1A1A1A;
  --gray-700:  #3A3A3A;
  --gray-400:  #9A9A9A;
  --gray-200:  #E5E5E5;
  --gray-100:  #F0F0F0;
  --cream:     #F5F3EF;

  --section-padding: clamp(80px, 10vw, 160px);
  --content-max: 1200px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 300ms var(--ease);
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--black);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

/* keep long words/headlines from forcing horizontal overflow */
h1, h2, h3, p, a, li, span { overflow-wrap: break-word; }

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

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

/* ── LAYOUT ── */
.zk-container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}

/* ── HEADER ── */
.zk-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  padding-top: 10px;
  transition: padding-top var(--transition);
}

.zk-header .zk-container {
  transition: max-width var(--transition);
}

.zk-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 clamp(14px, 2.5vw, 22px);
  border: 1px solid transparent;
  border-radius: 14px;
  transition: height var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), backdrop-filter var(--transition);
}

/* detaches into a floating, narrower pill once scrolled */
.zk-header.is-scrolled { padding-top: 14px; }
.zk-header.is-scrolled .zk-container { max-width: 1000px; }
.zk-header.is-scrolled .zk-header__inner {
  height: 54px;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-color: rgba(250, 250, 250, 0.10);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

.zk-logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

.zk-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}

.zk-nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-400);
  letter-spacing: 0.01em;
  position: relative;
  top: 3px;
  transition: color var(--transition);
}

.zk-nav a:hover { color: var(--white); }

.zk-header__cta {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--black);
  background: var(--white);
  padding: 6px 13px;
  border-radius: 4px;
  transition: opacity var(--transition);
}

.zk-header__cta:hover { opacity: 0.8; }

/* Mobile nav */
.zk-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}

.zk-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  transform-origin: center;
  transition: transform var(--transition), opacity var(--transition);
}

/* animate to an X when the menu is open */
.zk-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zk-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.zk-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* override the parent theme reset's button:hover/:focus (#c36 red box) */
.zk-nav-toggle,
.zk-nav-toggle:hover,
.zk-nav-toggle:focus,
.zk-nav-toggle:active {
  background: none;
  border: none;
  color: var(--white);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.zk-nav-toggle:focus-visible { outline: 2px solid rgba(250, 250, 250, 0.6); outline-offset: 3px; }

.zk-mobile-menu {
  display: flex;
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 99;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
}

.zk-mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }

/* touch screens have no hover — roll the letters in when the menu opens */
.zk-mobile-menu .zk-roll__top .zk-roll__char { transform: translateY(115%); }
.zk-mobile-menu.open .zk-roll__top .zk-roll__char { transform: translateY(0); }

.zk-mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 700;
  color: var(--white);
  transition: color var(--transition);
}

.zk-mobile-menu a:hover { color: var(--gray-400); }

.zk-mobile-menu a.zk-mobile-menu__cta {
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
  background: var(--white);
  padding: 14px 28px;
  border-radius: 6px;
  transition: opacity var(--transition);
}

.zk-mobile-menu a.zk-mobile-menu__cta:hover { color: var(--black); opacity: 0.82; }

/* ── NAV LINK TEXT-ROLL (per-letter hover roll) ── */
.zk-roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1;
  vertical-align: top;
}
.zk-roll__top { display: block; white-space: nowrap; }
.zk-roll__bottom { position: absolute; inset: 0; white-space: nowrap; }
.zk-roll__char {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}
.zk-roll__bottom .zk-roll__char { transform: translateY(100%); }
.zk-roll-link:hover .zk-roll__top .zk-roll__char,
.zk-roll-link:focus-visible .zk-roll__top .zk-roll__char { transform: translateY(-100%); }
.zk-roll-link:hover .zk-roll__bottom .zk-roll__char,
.zk-roll-link:focus-visible .zk-roll__bottom .zk-roll__char { transform: translateY(0); }

/* centered underline grow on hover */
.zk-roll-link { position: relative; }
.zk-roll-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  height: 1px;
  width: 0;
  background: currentColor;
  transform: translateX(-50%);
  transition: width 0.3s var(--ease);
}
.zk-roll-link:hover::after,
.zk-roll-link:focus-visible::after { width: 100%; }

/* ── HERO ── */
.zk-hero {
  position: relative;
  min-height: 100vh;
  background: var(--black);
  display: flex;
  align-items: center;
  padding-top: 64px;
  overflow: hidden;
  isolation: isolate;
}

/* flex child must be allowed to shrink, or hero text overflows on mobile */
.zk-hero .zk-container { width: 100%; min-width: 0; }

.zk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.18) 30%, rgba(10, 10, 10, 0.28) 66%, rgba(10, 10, 10, 0.88) 100%),
    radial-gradient(circle at 48% 40%, rgba(250, 250, 250, 0.05), transparent 48%);
  pointer-events: none;
}

.zk-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  pointer-events: none;
}

.zk-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(80px, 12vw, 140px);
  padding-bottom: clamp(80px, 12vw, 140px);
}

.zk-hero__label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-400);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.6s var(--ease) 0.1s forwards;
}

.zk-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.05;
  letter-spacing: 0;
  max-width: min(100%, 70rem);
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.7s var(--ease) 0.25s forwards;
}

.zk-hero__headline-static {
  display: block;
}

.zk-hero__rotator {
  position: relative;
  display: block;
  width: min(100%, 16ch);
  height: 1.28em;
  padding-right: 0.18em;
  overflow: hidden;
  color: var(--white);
  box-sizing: content-box;
}

.zk-hero__rotator span {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  transform: translateY(115%);
  animation: zk-hero-title-cycle 8s var(--ease) infinite;
  animation-delay: calc(var(--zk-title-index) * 2s);
  white-space: nowrap;
}

.zk-hero__sub {
  margin-top: 32px;
  font-size: 18px;
  color: var(--gray-400);
  max-width: 620px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s var(--ease) 0.45s forwards;
}

.zk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 56px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s var(--ease) 0.6s forwards;
}

.zk-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: color var(--transition), background var(--transition), border-color var(--transition), opacity var(--transition);
}

.zk-hero__cta--primary {
  background: var(--white);
  color: var(--black);
}

.zk-hero__cta--secondary {
  color: var(--gray-400);
  border-color: var(--gray-700);
}

.zk-hero__cta--primary:hover {
  opacity: 0.82;
}

.zk-hero__cta--secondary:hover {
  color: var(--white);
  border-color: var(--gray-400);
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes zk-hero-title-cycle {
  0% {
    opacity: 0;
    transform: translateY(115%);
  }
  6% {
    opacity: 1;
    transform: translateY(-6%);
  }
  10%,
  22% {
    opacity: 1;
    transform: translateY(0);
  }
  28%,
  100% {
    opacity: 0;
    transform: translateY(-115%);
  }
}

/* ── DIVIDER ── */
.zk-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 0;
}

.zk-divider--dark { background: #1f1f1f; }

/* ── CLIENTS / WHO WE WORK WITH ── */
.zk-section.zk-clients {
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.75rem);
  border-top: 1px solid #1f1f1f;
}

.zk-clients__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(1.25rem, 4vw, 4rem);
}

.zk-client { display: flex; align-items: center; justify-content: center; min-width: 0; }

.zk-client img {
  width: auto;
  max-width: 100%;
  opacity: 0.85;
  transition: transform var(--transition), opacity var(--transition), filter var(--transition);
}

.zk-client:hover img {
  opacity: 1;
  transform: scale(1.06);
  filter: brightness(1.15);
}

.zk-clients__context {
  max-width: 38rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  color: var(--gray-400);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  text-align: center;
}

.zk-clients__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
  color: var(--white);
  text-align: center;
}

.zk-clients__cta p {
  color: var(--gray-400);
  font-size: 1rem;
}

.zk-clients__cta .zk-button {
  min-height: 2.25rem;
  padding: 0.55rem 0.95rem;
  font-size: 0.82rem;
}

/* optically balanced by AREA, not height:
   wide wordmark = shorter, square emblem = taller, so all read the same size */
.zk-client--apilon img   { height: clamp(1.875rem, 3vw, 2.5rem); }
.zk-client--stairway img { height: clamp(3.5rem, 5.6vw, 4.5rem); }
.zk-client--deped img    { height: clamp(6.75rem, 10.8vw, 9rem); }

@media (max-width: 768px) {
  .zk-clients__row { flex-direction: column; flex-wrap: nowrap; gap: 2.25rem; }
  .zk-clients__cta { flex-direction: column; }
  .zk-client--apilon img   { height: 1.875rem; }
  .zk-client--stairway img { height: 3.5rem; }
  .zk-client--deped img    { height: 6.75rem; }
}

/* ── SECTION BASE ── */
.zk-section {
  padding: var(--section-padding) 0;
}

.zk-section--dark {
  background: var(--black);
  color: var(--white);
}

.zk-section--gray { background: var(--gray-100); }

.zk-section--cream { background: var(--cream); }

.zk-section__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 20px;
}

.zk-section__heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 64px;
}

.zk-section__intro {
  max-width: 44rem;
  margin: -2.5rem 0 3.5rem;
  color: var(--gray-400);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.6;
}

.zk-section__intro--dark {
  color: var(--gray-700);
}

.zk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid rgba(250, 250, 250, 0.24);
  border-radius: 0.25rem;
  background: var(--white);
  color: var(--black);
  font-size: 0.9rem;
  font-weight: 700;
  transition: opacity var(--transition), transform var(--transition), border-color var(--transition);
}

.zk-button:hover,
.zk-button:focus-visible {
  opacity: 0.82;
  transform: translateY(-0.125rem);
}

.zk-button--dark {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

/* ── SERVICES ── */
.zk-services__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.zk-service {
  --service-accent: var(--black);
  --service-tint: var(--gray-100);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.38fr);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-200);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.zk-service::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 4;
  width: 0.3rem;
  background: var(--service-accent);
}

.zk-service:hover {
  border-color: var(--gray-400);
  box-shadow: 0 1.25rem 2.5rem rgba(10, 10, 10, 0.08);
  transform: translateY(-0.25rem);
}

.zk-service:focus-visible {
  outline: 1px solid var(--black);
  outline-offset: -1px;
}

.zk-service__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(2rem, 4vw, 3.5rem);
}

.zk-service__eyebrow {
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
  color: var(--service-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zk-service__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.7vw, 3.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
  margin-bottom: 1.2rem;
}

.zk-service__desc {
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 500;
  color: var(--black);
  line-height: 1.5;
}

.zk-service__more {
  margin-top: 0.9rem;
  max-width: 34rem;
  font-size: 0.95rem;
  color: var(--gray-700);
  line-height: 1.55;
}

.zk-service__cta {
  align-self: flex-start;
  margin-top: auto;
  padding-top: clamp(2rem, 4vw, 3rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--service-accent) 45%, transparent);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  transition: border-color var(--transition), color var(--transition);
}

.zk-service__cta::after {
  content: "→";
  font-size: 1.05em;
  transition: transform var(--transition);
}

.zk-service__cta:hover,
.zk-service__cta:focus { border-color: var(--service-accent); color: var(--service-accent); opacity: 1; }
.zk-service__cta:hover::after { transform: translateX(3px); }

/* keep CTA hover colours correct — parent reset forces a:hover -> #336 (navy) */
.zk-button:hover, .zk-button:focus,
.zk-hero__cta--primary:hover, .zk-hero__cta--primary:focus,
.zk-header__cta:hover, .zk-header__cta:focus { color: var(--black); }
.zk-nav.solid .zk-header__cta:hover { color: var(--black); }
/* dark CTA: text gets brighter, never navy */
.zk-button--dark:hover, .zk-button--dark:focus {
  background: var(--gray-900);
  border-color: var(--gray-900);
  color: #fff;
  opacity: 1;
}

.zk-service__solution {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.75fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--gray-100);
  border-left: 1px solid var(--gray-200);
}

.zk-service__includes {
  margin-bottom: 1.25rem;
  color: var(--service-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zk-service__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--service-accent) 22%, var(--gray-200));
}

.zk-service__list li {
  position: relative;
  padding: 0.68rem 0 0.68rem 1.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--service-accent) 14%, var(--gray-200));
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--gray-700);
  opacity: 0;
  transform: translateX(-0.8rem);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.zk-service__list li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0.62rem;
  color: var(--service-accent);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
}

.zk-service.visible .zk-service__list li { opacity: 1; transform: none; }
.zk-service.visible .zk-service__list li:nth-child(1) { transition-delay: 0.15s; }
.zk-service.visible .zk-service__list li:nth-child(2) { transition-delay: 0.22s; }
.zk-service.visible .zk-service__list li:nth-child(3) { transition-delay: 0.29s; }
.zk-service.visible .zk-service__list li:nth-child(4) { transition-delay: 0.36s; }
.zk-service.visible .zk-service__list li:nth-child(5) { transition-delay: 0.43s; }
.zk-service.visible .zk-service__list li:nth-child(6) { transition-delay: 0.50s; }

.zk-service__output {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.1rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--service-accent) 25%, var(--gray-200));
  background: rgba(250, 250, 250, 0.74);
}

.zk-service__output span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--service-accent);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zk-service__output p {
  color: var(--gray-700);
  font-size: 0.9rem;
  line-height: 1.5;
}

.zk-service__visual {
  position: relative;
  min-height: 20rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--service-accent) 25%, var(--gray-200));
  background:
    linear-gradient(rgba(10, 10, 10, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.055) 1px, transparent 1px),
    rgba(250, 250, 250, 0.72);
  background-size: 1.5rem 1.5rem;
}

.zk-service__signal {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.35rem 0.45rem;
  background: var(--service-accent);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.zk-mini-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(10rem, 68%);
  aspect-ratio: 0.58;
  overflow: hidden;
  padding: 0.7rem;
  border: 0.35rem solid var(--black);
  border-radius: 1.5rem;
  background: var(--white);
  box-shadow: 0.8rem 1rem 0 color-mix(in srgb, var(--service-accent) 18%, transparent);
  transform: translate(-50%, -50%) rotate(4deg);
  transition: transform var(--transition);
}

.zk-service:hover .zk-mini-phone {
  transform: translate(-50%, -53%) rotate(1deg);
}

.zk-mini-phone__top,
.zk-mini-phone__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zk-mini-phone__top span {
  width: 2.2rem;
  height: 0.35rem;
  border-radius: 1rem;
  background: var(--black);
}

.zk-mini-phone__top b {
  font-family: var(--font-mono);
  font-size: 0.42rem;
}

.zk-mini-phone__hero {
  display: grid;
  gap: 0.2rem;
  margin-top: 1.35rem;
  padding: 1rem 0.75rem;
  background: var(--service-tint);
}

.zk-mini-phone__hero span {
  color: var(--service-accent);
  font-family: var(--font-mono);
  font-size: 0.4rem;
  text-transform: uppercase;
}

.zk-mini-phone__hero b {
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.05;
}

.zk-mini-phone__rows {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.zk-mini-phone__rows i {
  display: block;
  height: 1.75rem;
  border-left: 0.2rem solid var(--service-accent);
  background: var(--gray-100);
}

.zk-mini-phone__nav {
  position: absolute;
  inset: auto 0.9rem 0.8rem;
}

.zk-mini-phone__nav span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--gray-200);
}

.zk-mini-phone__nav span:first-child { background: var(--service-accent); }

.zk-mini-browser {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 116%;
  overflow: hidden;
  border: 1px solid var(--gray-400);
  background: var(--white);
  box-shadow: 0.8rem 1rem 0 color-mix(in srgb, var(--service-accent) 18%, transparent);
  transform: translate(-48%, -50%) rotate(-3deg);
  transition: transform var(--transition);
}

.zk-service:hover .zk-mini-browser {
  transform: translate(-52%, -53%) rotate(-1deg);
}

.zk-mini-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-100);
}

.zk-mini-browser__bar i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--service-accent);
  opacity: 0.75;
}

.zk-mini-browser__bar span {
  width: 45%;
  height: 0.4rem;
  margin-left: 0.35rem;
  background: var(--gray-200);
}

.zk-mini-browser__page {
  min-height: 13rem;
  padding: 1.2rem;
  background: linear-gradient(135deg, var(--service-tint), var(--white) 66%);
}

.zk-mini-browser__nav {
  width: 42%;
  height: 0.32rem;
  margin-bottom: 2.2rem;
  background: var(--gray-400);
}

.zk-mini-browser__page strong {
  display: block;
  max-width: 9rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
}

.zk-mini-browser__page p {
  width: 65%;
  height: 0.4rem;
  margin-top: 0.7rem;
  background: var(--gray-200);
}

.zk-mini-browser__page button {
  margin-top: 1rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 0;
  background: var(--service-accent);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.45rem;
  text-transform: uppercase;
}

.zk-mini-browser__proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-top: 1.3rem;
}

.zk-mini-browser__proof i {
  height: 2rem;
  background: var(--gray-100);
  border-top: 0.15rem solid var(--service-accent);
}

.zk-flow {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72%;
  transform: translate(-50%, -50%);
}

.zk-flow__node {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--service-accent) 35%, var(--gray-200));
  background: var(--white);
  box-shadow: 0.25rem 0.25rem 0 color-mix(in srgb, var(--service-accent) 12%, transparent);
}

.zk-flow__node span {
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.6rem;
  border: 1px solid var(--black);
  border-radius: 50%;
  background: var(--white);
}

.zk-flow__node b {
  font-size: 0.75rem;
}

.zk-flow > i {
  display: block;
  width: 1px;
  height: 1.15rem;
  background: var(--service-accent);
}

.zk-pipeline {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 0.55rem;
  width: 82%;
  transform: translate(-50%, -50%);
}

.zk-pipeline div {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.75rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--service-accent) 26%, var(--gray-200));
  background: var(--white);
}

.zk-pipeline span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.zk-pipeline b {
  color: var(--service-accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.zk-pipeline i {
  position: absolute;
  inset: auto 0 0;
  height: 0.18rem;
  background: var(--service-accent);
  transform-origin: left;
}

.zk-pipeline div:nth-child(1) i { transform: scaleX(1); }
.zk-pipeline div:nth-child(2) i { transform: scaleX(0.72); }
.zk-pipeline div:nth-child(3) i { transform: scaleX(0.34); }
.zk-pipeline div:nth-child(4) i { transform: scaleX(0.16); }

.zk-services__closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--gray-200);
  background: var(--white);
}

.zk-services__closing-title {
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
}

.zk-services__closing p:last-child {
  max-width: 42rem;
  color: var(--gray-700);
  font-size: 0.95rem;
}

/* Simplified problem carousel */
.zk-services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.zk-services__head .zk-section__heading {
  margin-bottom: 1.25rem;
}

.zk-services__head .zk-section__intro {
  margin: 0;
}

.zk-services__controls {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
}

.zk-services__controls button {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--gray-200);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.zk-services__controls button:hover,
.zk-services__controls button:focus-visible {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.zk-service-carousel {
  display: flex;
  overflow: hidden;
  padding: 0.5rem 0 1rem;
  cursor: grab;
  touch-action: pan-y;
  /* No native scroll, but hide the bar in any fallback path. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Fade the cards out at the left/right edges instead of a hard cut. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.zk-service-carousel::-webkit-scrollbar { display: none; }

.zk-service-carousel.is-grabbing { cursor: grabbing; }

.zk-service-track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: max-content;
  will-change: transform;
}

.zk-service-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 clamp(18.5rem, 30vw, 23rem);
  min-height: clamp(30rem, 45vw, 34rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--gray-200);
  border-radius: clamp(2rem, 4vw, 3.25rem);
  background: var(--white);
  color: var(--black);
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.zk-service-card:hover,
.zk-service-card:focus-visible {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
  transform: translateY(-0.25rem);
}

.zk-service-card__type {
  margin-bottom: auto;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.zk-service-card h3 {
  max-width: 22rem;
  margin: clamp(3rem, 7vw, 5rem) 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: 0;
}

.zk-service-card > p:not(.zk-service-card__type) {
  max-width: 23rem;
  color: var(--gray-700);
  font-size: 1rem;
  line-height: 1.55;
  transition: color var(--transition);
}

.zk-service-card:hover > p:not(.zk-service-card__type),
.zk-service-card:focus-visible > p:not(.zk-service-card__type) {
  color: var(--gray-200);
}

.zk-service-card__foot {
  display: grid;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
}

.zk-service-card__foot span {
  color: var(--gray-400);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.zk-service-card__foot b {
  font-size: 0.85rem;
}

.zk-services__note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
  color: var(--gray-700);
  font-size: 0.9rem;
}

.zk-services__note a {
  color: var(--black);
  font-weight: 700;
}

/* ── PRODUCTS ── */
.zk-products { background: var(--black); }

.zk-products .zk-section__heading { color: var(--white); }
.zk-products .zk-section__label { color: var(--gray-400); }

.zk-products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  gap: 1px;
  background: #1f1f1f;
}

.zk-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 29rem;
  overflow: hidden;
  background: var(--gray-900);
  isolation: isolate;
  transition: background var(--transition), transform var(--transition);
}

.zk-product-card:hover {
  background: #222;
  transform: translateY(-0.125rem);
}

.zk-product-card--link {
  color: inherit;
}

.zk-product-card__preview {
  position: relative;
  min-height: 15.5rem;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 38%),
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.12), transparent 28%),
    #111;
}

.zk-product-card__preview::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, var(--gray-900));
  pointer-events: none;
  z-index: 3;
}

.zk-product-card__copy {
  position: relative;
  z-index: 4;
  margin-top: -1.75rem;
  padding: 0 2rem 2.25rem;
}

.zk-product-card__status {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 1.25rem;
}

.zk-product-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0;
  margin-bottom: 0.75rem;
}

.zk-product-card__desc {
  font-size: 0.95rem;
  color: var(--gray-400);
  line-height: 1.55;
}

.zk-product-card__desc + .zk-product-card__desc {
  margin-top: 0.7rem;
}

.zk-product-card__cta {
  display: inline-block;
  margin-top: 1.5rem;
  border-bottom: 1px solid var(--gray-700);
  color: var(--gray-400);
  font-size: 0.875rem;
  font-weight: 600;
  transition: color var(--transition), border-color var(--transition);
}

.zk-product-card--link:hover .zk-product-card__cta {
  border-color: var(--white);
  color: var(--white);
}

.zk-preview-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0 42%, rgba(255, 255, 255, 0.18) 45%, transparent 49% 100%);
  opacity: 0.55;
  animation: zk-scan 4.8s linear infinite;
}

.zk-saf-t-window {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 2rem;
  display: grid;
  gap: 0.55rem;
  padding: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 10, 10, 0.62);
  color: rgba(250, 250, 250, 0.78);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.35;
  transform: rotate(-1deg);
}

.zk-saf-t-window span {
  animation: zk-code-pulse 4s ease-in-out infinite;
}

.zk-saf-t-window span:nth-child(2) { animation-delay: 0.3s; }
.zk-saf-t-window span:nth-child(3) { animation-delay: 0.6s; }
.zk-saf-t-window span:nth-child(4) { color: #FAFAFA; animation-delay: 0.9s; }

.zk-saf-t-chip {
  position: absolute;
  right: 1.5rem;
  bottom: 3.4rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.08);
}

/* KøbSmart — bright weekly plan + shopping route */
.zk-product-card--kobsmart .zk-product-card__preview {
  min-height: 17.5rem;
  background:
    linear-gradient(rgba(21, 91, 63, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 91, 63, 0.055) 1px, transparent 1px),
    #e6f2e5;
  background-size: 1.4rem 1.4rem;
}

.zk-product-card--kobsmart .zk-product-card__preview::after {
  background: linear-gradient(180deg, transparent 45%, var(--gray-900));
}

.zk-kob-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.zk-kob-map__road {
  position: absolute;
  display: block;
  width: 140%;
  height: 0.35rem;
  border-top: 1px solid rgba(21, 91, 63, 0.16);
  border-bottom: 1px solid rgba(21, 91, 63, 0.16);
  background: rgba(250, 250, 250, 0.62);
}

.zk-kob-map__road--one {
  left: -18%;
  top: 34%;
  transform: rotate(21deg);
}

.zk-kob-map__road--two {
  right: -15%;
  bottom: 26%;
  transform: rotate(-17deg);
}

.zk-kob-map__route {
  position: absolute;
  right: 10%;
  top: 12%;
  width: 38%;
  height: 58%;
  border-right: 0.18rem dashed #ef7f45;
  border-bottom: 0.18rem dashed #ef7f45;
  border-radius: 0 0 2rem 0;
  transform: rotate(8deg);
  opacity: 0.8;
}

.zk-kob-map__stop {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 0.18rem solid var(--white);
  border-radius: 50%;
  background: #155b3f;
  box-shadow: 0 0.25rem 0.8rem rgba(21, 91, 63, 0.25);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 600;
}

.zk-kob-map__stop--one {
  right: 8%;
  top: 8%;
}

.zk-kob-map__stop--two {
  right: 44%;
  bottom: 23%;
}

.zk-kob-receipt {
  position: absolute;
  left: 1.2rem;
  top: 1.1rem;
  z-index: 2;
  width: min(13.5rem, 72%);
  padding: 0.95rem;
  border: 1px solid rgba(21, 91, 63, 0.18);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0.75rem 0.85rem 0 rgba(21, 91, 63, 0.12);
  transform: rotate(-2deg);
  transition: transform var(--transition), box-shadow var(--transition);
}

.zk-product-card--kobsmart:hover .zk-kob-receipt {
  box-shadow: 1rem 1.2rem 0 rgba(21, 91, 63, 0.16);
  transform: translateY(-0.25rem) rotate(-1deg);
}

.zk-kob-receipt__head,
.zk-kob-receipt__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.zk-kob-receipt__head {
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #dbe6db;
  color: #155b3f;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.zk-kob-receipt__head b {
  padding: 0.2rem 0.35rem;
  background: #e6f2e5;
  font-size: 0.48rem;
}

.zk-kob-meal {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid #edf1ed;
}

.zk-kob-meal i {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: #f6d36b;
  color: #155b3f;
  font-family: var(--font-mono);
  font-size: 0.46rem;
  font-style: normal;
  font-weight: 700;
}

.zk-kob-meal span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.zk-kob-meal b,
.zk-kob-meal small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zk-kob-meal b {
  color: #17372a;
  font-size: 0.58rem;
}

.zk-kob-meal small {
  color: #668073;
  font-family: var(--font-mono);
  font-size: 0.4rem;
}

.zk-kob-meal strong {
  color: #155b3f;
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.zk-kob-receipt__total {
  padding-top: 0.75rem;
  color: #155b3f;
  font-size: 0.62rem;
  font-weight: 600;
}

.zk-kob-receipt__total strong {
  font-family: var(--font-display);
  font-size: 1rem;
}

.zk-kob-route {
  position: absolute;
  right: 0.9rem;
  bottom: 3.35rem;
  z-index: 4;
  padding: 0.38rem 0.5rem;
  background: #155b3f;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.zk-product-card--strangeloop .zk-product-card__preview {
  background:
    radial-gradient(circle at 50% 45%, rgba(154, 154, 154, 0.22), transparent 30%),
    radial-gradient(circle at 15% 90%, rgba(255, 255, 255, 0.08), transparent 28%),
    #050505;
}

.zk-loop-orbit {
  position: absolute;
  left: 50%;
  top: 48%;
  border: 1px solid rgba(250, 250, 250, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.zk-loop-orbit--outer {
  width: 13rem;
  height: 13rem;
  animation: zk-spin 14s linear infinite;
}

.zk-loop-orbit--inner {
  width: 8.25rem;
  height: 8.25rem;
  border-style: dashed;
  animation: zk-spin 9s linear infinite reverse;
}

.zk-loop-orbit::before {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--white);
  top: -0.25rem;
  left: 50%;
  box-shadow: 0 0 1rem rgba(250, 250, 250, 0.7);
}

.zk-loop-title {
  position: absolute;
  left: 50%;
  top: 43%;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: zk-glitch 4s ease-in-out infinite;
  white-space: nowrap;
}

.zk-loop-title::before,
.zk-loop-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.zk-loop-title::before {
  color: #F5F3EF;
  transform: translate(0.08rem, 0);
}

.zk-loop-title::after {
  color: #9A9A9A;
  transform: translate(-0.08rem, 0);
}

.zk-product-card--strangeloop:hover .zk-loop-title::before,
.zk-product-card--strangeloop:hover .zk-loop-title::after {
  opacity: 0.55;
}

.zk-loop-subtitle,
.zk-loop-choice {
  position: absolute;
  color: rgba(250, 250, 250, 0.62);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.zk-loop-subtitle {
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.zk-loop-choice {
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(250, 250, 250, 0.14);
  background: rgba(250, 250, 250, 0.05);
  animation: zk-float 5s ease-in-out infinite;
}

.zk-loop-choice--one {
  left: 1.25rem;
  bottom: 3.6rem;
}

.zk-loop-choice--two {
  right: 1.25rem;
  top: 2.2rem;
  animation-delay: 1.4s;
}

.zk-product-card--cosmiic .zk-product-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(245, 243, 239, 0.10), transparent 46%),
    linear-gradient(145deg, #111, #1A1A1A);
}

.zk-cosmiic-flower {
  width: clamp(150px, 62%, 230px);
  height: auto;
  color: #C9A45C; /* Cosmiic gold */
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(circle at center, #000 34%, transparent 82%);
          mask-image: radial-gradient(circle at center, #000 34%, transparent 82%);
}

.zk-cosmiic-flower g {
  transform-box: fill-box;
  transform-origin: center;
  animation: zk-cosmiic-breath 5.5s ease-in-out infinite;
}

@keyframes zk-cosmiic-breath {
  0%, 100% { transform: scale(0.86); opacity: 0.45; }
  50%      { transform: scale(1.08); opacity: 1; }
}

.zk-cosmiic-reading {
  position: absolute;
  left: 1.25rem;
  bottom: 3.2rem;
  z-index: 4;
  color: rgba(250, 250, 250, 0.68);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.zk-product-card--ambient .zk-product-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(250, 250, 250, 0.08), transparent),
    #0D0D0D;
}

.zk-ambient-wave {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 8rem;
}

.zk-ambient-wave span {
  width: 0.42rem;
  height: 3rem;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.95), rgba(250, 250, 250, 0.18));
  animation: zk-wave 1.8s ease-in-out infinite;
}

.zk-ambient-wave span:nth-child(2) { animation-delay: 0.14s; }
.zk-ambient-wave span:nth-child(3) { animation-delay: 0.28s; }
.zk-ambient-wave span:nth-child(4) { animation-delay: 0.42s; }
.zk-ambient-wave span:nth-child(5) { animation-delay: 0.56s; }
.zk-ambient-wave span:nth-child(6) { animation-delay: 0.7s; }

.zk-ambient-track {
  position: absolute;
  left: 1.5rem;
  bottom: 3.2rem;
  color: rgba(250, 250, 250, 0.6);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.zk-product-card--wiing .zk-product-card__preview {
  background:
    radial-gradient(circle at 22% 20%, rgba(245, 243, 239, 0.48), transparent 26%),
    linear-gradient(140deg, #FAF8F5, #E5E5E5);
}

.zk-product-card--wiing .zk-product-card__preview::after {
  background: linear-gradient(180deg, transparent, var(--gray-900));
}

.zk-wiing-phone {
  position: absolute;
  left: 50%;
  top: 0.8rem;
  width: 10rem;
  height: 14rem;
  padding: 0.7rem;
  border: 1px solid rgba(10, 10, 10, 0.16);
  border-radius: 1.4rem;
  background: #FAF8F5;
  box-shadow: 0 1.25rem 2.5rem rgba(10, 10, 10, 0.22);
  overflow: hidden;
  transform: translateX(-50%) rotate(3deg);
  animation: zk-phone-sway 5.5s ease-in-out infinite;
}

.zk-wiing-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #3A3A3A;
  font-family: var(--font-mono);
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zk-wiing-status span:last-child {
  color: #9A6A3A;
}

.zk-wiing-screen-head {
  margin-top: 0.75rem;
}

.zk-wiing-screen-head span {
  display: block;
  color: #9A6A3A;
  font-family: var(--font-mono);
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zk-wiing-screen-head strong {
  display: block;
  margin-top: 0.25rem;
  color: #0A0A0A;
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.04;
  letter-spacing: 0;
}

.zk-wiing-profile {
  position: relative;
  margin-top: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 1rem;
  background: #F5F3EF;
  box-shadow: 0 0.6rem 1.4rem rgba(10, 10, 10, 0.08);
}

.zk-wiing-profile > img {
  width: 100%;
  height: 4.6rem;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(0.82) contrast(0.98);
}

.zk-wiing-profile__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem 0.55rem;
}

.zk-wiing-profile__meta strong {
  color: #0A0A0A;
  font-family: var(--font-display);
  font-size: 0.8rem;
  line-height: 1;
}

.zk-wiing-profile__meta span {
  color: #3A3A3A;
  font-size: 0.52rem;
}

.zk-wiing-avatars {
  position: absolute;
  right: 0.45rem;
  top: 3.8rem;
  display: flex;
}

.zk-wiing-avatars img {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: -0.32rem;
  border: 2px solid #FAF8F5;
  border-radius: 50%;
  object-fit: cover;
}

.zk-wiing-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.45rem;
}

.zk-wiing-traits span {
  padding: 0.22rem 0.34rem;
  border-radius: 999px;
  background: #F5F3EF;
  color: #3A3A3A;
  font-size: 0.46rem;
  font-weight: 700;
}

.zk-wiing-reason {
  margin-top: 0.55rem;
  padding: 0.5rem;
  border: 1px solid rgba(154, 106, 58, 0.32);
  border-radius: 0.8rem;
  background: rgba(154, 106, 58, 0.08);
}

.zk-wiing-reason span {
  display: block;
  color: #9A6A3A;
  font-size: 0.46rem;
  font-weight: 800;
}

.zk-wiing-reason p {
  margin: 0.2rem 0 0;
  color: #1A1A1A;
  font-size: 0.5rem;
  line-height: 1.25;
}

.zk-wiing-mutual {
  margin-top: 0.45rem;
  padding: 0.34rem 0.45rem;
  border-radius: 999px;
  background: #F5F3EF;
  color: #3A3A3A;
  font-size: 0.5rem;
  font-weight: 700;
  text-align: center;
}

.zk-wiing-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.zk-wiing-actions span {
  padding: 0.34rem 0;
  border: 1px solid rgba(10, 10, 10, 0.18);
  border-radius: 999px;
  color: #0A0A0A;
  font-size: 0.48rem;
  font-weight: 800;
  text-align: center;
}

.zk-wiing-actions span:last-child {
  background: #0A0A0A;
  color: #FAF8F5;
}

.zk-wiing-bubble {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #0A0A0A;
  color: #FAF8F5;
  font-size: 0.62rem;
  font-weight: 800;
  box-shadow: 0 0.75rem 1.5rem rgba(10, 10, 10, 0.18);
  animation: zk-float 4.4s ease-in-out infinite;
}

.zk-wiing-bubble--one { left: 20%; bottom: 4.2rem; }
.zk-wiing-bubble--two { right: 18%; top: 3rem; animation-delay: 1.1s; }

@keyframes zk-glitch {
  0%, 100% { transform: translate(-50%, -50%); text-shadow: none; }
  2% { transform: translate(calc(-50% - 0.125rem), calc(-50% + 0.0625rem)); text-shadow: 0.125rem 0 var(--gray-400), -0.125rem 0 var(--white); }
  4% { transform: translate(calc(-50% + 0.125rem), calc(-50% - 0.0625rem)); text-shadow: -0.125rem 0 var(--gray-400), 0.125rem 0 var(--white); }
  6% { transform: translate(-50%, -50%); text-shadow: none; }
}

@keyframes zk-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes zk-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.55rem); }
}

@keyframes zk-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes zk-code-pulse {
  0%, 100% { opacity: 0.48; }
  35%, 65% { opacity: 1; }
}

@keyframes zk-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes zk-wave {
  0%, 100% { transform: scaleY(0.45); opacity: 0.42; }
  50% { transform: scaleY(1.25); opacity: 1; }
}

@keyframes zk-phone-sway {
  0%, 100% { transform: translateX(-50%) rotate(3deg); }
  50% { transform: translateX(-50%) rotate(-2deg) translateY(-0.35rem); }
}

@keyframes zk-work-phone-float {
  0% {
    box-shadow: 0 0.35rem 0.95rem rgba(10, 10, 10, 0.42);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 1.55rem 0.95rem rgba(10, 10, 10, 0.16);
    transform: translateY(-1.25rem);
  }
  100% {
    box-shadow: 0 0.35rem 0.95rem rgba(10, 10, 10, 0.42);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zk-hero__particles {
    display: none;
  }

  .zk-hero__rotator {
    height: auto;
  }

  .zk-hero__rotator span {
    position: static;
    display: inline;
    opacity: 1;
    transform: none;
    animation: none !important;
    white-space: normal;
  }

  .zk-hero__rotator span + span::before {
    content: ", ";
  }

  .zk-product-card__preview *,
  .zk-preview-scan,
  .zk-work-phone {
    animation: none !important;
  }

  .zk-service__list li {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.zk-inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid #1f1f1f;
  background: var(--gray-900);
}

.zk-inline-cta--light {
  border-color: var(--gray-200);
  background: var(--white);
}

.zk-inline-cta__label {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: 0;
}

.zk-inline-cta--light .zk-inline-cta__label {
  color: var(--black);
}

.zk-inline-cta__copy {
  max-width: 34rem;
  margin-top: 0.55rem;
  color: var(--gray-400);
  font-size: 1rem;
  line-height: 1.55;
}

.zk-inline-cta__copy + .zk-inline-cta__copy {
  margin-top: 0.35rem;
}

.zk-inline-cta--light .zk-inline-cta__copy {
  color: var(--gray-700);
}

/* ── WORK ── */
.zk-work__list {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.zk-work-item {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--gray-200);
  background: var(--white);
  box-shadow: 0 1.5rem 3rem rgba(10, 10, 10, 0.04);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.zk-work-item:hover {
  border-color: rgba(10, 10, 10, 0.24);
  box-shadow: 0 1.75rem 3.5rem rgba(10, 10, 10, 0.08);
  transform: translateY(-0.125rem);
}

.zk-work-item__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  background: transparent;
  border: none;
  overflow: visible;
}

.zk-work-item__media.zk-work-item__media--banner {
  aspect-ratio: auto;
}

.zk-work-phone {
  position: relative;
  z-index: 1;
  width: min(17rem, 78%);
  aspect-ratio: 9 / 20;
  padding: 0.55rem;
  overflow: hidden;
  border: 1px solid rgba(250, 250, 250, 0.16);
  border-radius: 2rem;
  background:
    linear-gradient(145deg, rgba(250, 250, 250, 0.18), transparent 28%),
    var(--black);
  box-shadow: 0 0.35rem 0.95rem rgba(10, 10, 10, 0.42);
  transform: translateY(0);
  will-change: transform;
  animation: zk-work-phone-float 6s ease-in-out infinite;
}

.zk-work-phone::after {
  content: "";
  position: absolute;
  inset: 0.55rem;
  z-index: 2;
  border-radius: 1.48rem;
  background: linear-gradient(120deg, rgba(250, 250, 250, 0.28), transparent 28%, transparent 68%, rgba(250, 250, 250, 0.08));
  mix-blend-mode: screen;
  opacity: 0.32;
  pointer-events: none;
}

.zk-work-phone__notch {
  position: absolute;
  top: 0.72rem;
  left: 50%;
  z-index: 3;
  width: 4.25rem;
  height: 0.62rem;
  border-radius: 999px;
  background: var(--black);
  transform: translateX(-50%);
}

.zk-work-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.48rem;
  background: var(--black);
}

.zk-work-item__content {
  max-width: 42rem;
  padding: clamp(0.5rem, 2vw, 1.25rem) clamp(0.25rem, 1vw, 0.5rem);
}

.zk-work-item__status {
  display: inline-flex;
  margin-bottom: 1rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.zk-work-item__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  margin-bottom: 1rem;
}

.zk-work-item__summary {
  margin-bottom: 1.25rem;
  color: var(--black);
  font-size: clamp(1.1rem, 1.7vw, 1.25rem);
  font-weight: 600;
  line-height: 1.45;
}

.zk-work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.zk-work-meta span {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.zk-work-item__desc {
  font-size: 1rem;
  color: var(--gray-700);
  line-height: 1.6;
}

.zk-work-item__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1.25rem;
  margin-top: 1.5rem;
  padding-left: 1.1rem;
  color: var(--gray-700);
  font-size: 0.96rem;
  line-height: 1.45;
}

.zk-work-item__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  margin-top: 1.5rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--black);
  color: var(--black);
  font-size: 0.85rem;
  font-weight: 700;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.zk-work-item__link:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* ── ABOUT / TEAM ── */
.zk-about .zk-section__heading,
.zk-about .zk-team-member__name {
  color: var(--white);
}

.zk-about .zk-section__label,
.zk-about .zk-team-member__role {
  color: var(--gray-400);
}

.zk-team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  gap: 64px;
}

.zk-team-member {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  grid-template-areas: "portrait copy";
  align-items: start;
  align-content: start;
  gap: clamp(24px, 3vw, 36px);
}

.zk-team-member__portrait {
  grid-area: portrait;
  align-self: start;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #1A1A1A 0%, #0A0A0A 100%);
  border: 1px solid #1f1f1f;
  overflow: hidden;
}

.zk-team-member__copy {
  grid-area: copy;
  align-self: start;
}

.zk-team-member__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.zk-team-member--zachery .zk-team-member__portrait img {
  object-position: center 24%;
}

.zk-team-member--johan .zk-team-member__portrait img {
  object-position: center 8%;
}

.zk-team-member__role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 12px;
}

.zk-team-member__name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.zk-team-member__bio {
  max-width: 31rem;
  font-size: 1.05rem;
  color: var(--gray-400);
  line-height: 1.65;
}

/* ── CONTACT ── */
.zk-contact__inner {
  max-width: 640px;
}

.zk-contact__prompt {
  max-width: 42rem;
  margin-top: 1.5rem;
  color: var(--gray-700);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.5;
}

.zk-contact__email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
  border-bottom: 2px solid var(--black);
  padding-bottom: 4px;
  margin-top: 24px;
  transition: opacity var(--transition);
}

.zk-contact__email:hover { opacity: 0.6; }

.zk-contact__social {
  display: flex;
  gap: 24px;
  margin-top: 48px;
}

.zk-contact__social a {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-400);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}

.zk-contact__social a:hover { color: var(--black); border-color: var(--black); }

/* ── FOOTER ── */
.zk-footer {
  background: var(--black);
  padding: 40px 0;
}

.zk-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.zk-footer__left {
  font-size: 14px;
  color: var(--gray-400);
}

.zk-footer__left span {
  margin-left: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.zk-footer__nav {
  display: flex;
  gap: 32px;
  list-style: none;
}

.zk-footer__nav a {
  font-size: 13px;
  color: var(--gray-400);
  transition: color var(--transition);
}

.zk-footer__nav a:hover { color: var(--white); }

/* ── LEGAL / PRIVACY ── */
.zk-legal-section { padding-top: clamp(120px, 16vw, 200px); }
.zk-legal { max-width: 760px; }
.zk-legal__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0.75rem 0 0.5rem;
}
.zk-legal__updated { font-family: var(--font-mono); font-size: 0.8rem; color: var(--gray-400); margin-bottom: 2.5rem; }
.zk-legal h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2.4rem 0 0.8rem;
}
.zk-legal p { color: var(--gray-700); line-height: 1.7; font-size: 1.02rem; margin-bottom: 1rem; }
.zk-legal ul { margin: 0.6rem 0 1.2rem 1.2rem; display: grid; gap: 0.45rem; }
.zk-legal li { color: var(--gray-700); line-height: 1.6; font-size: 1.02rem; }
.zk-legal a { color: var(--black); text-decoration: underline; text-underline-offset: 2px; }
.zk-legal strong { color: var(--black); }
.zk-legal__back { margin-top: 2.5rem; }
.zk-legal__back a { font-weight: 600; }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

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

.reveal-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal-children.visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(7) { transition-delay: 600ms; opacity: 1; transform: none; }

.zk-services__grid > .zk-service.reveal {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color var(--transition), box-shadow var(--transition);
}

.zk-products__grid.reveal-children > .zk-product-card {
  transition: opacity 0.6s var(--ease), background var(--transition), transform var(--transition);
}

.zk-products__grid.reveal-children.visible > .zk-product-card:hover,
.zk-products__grid.reveal-children.visible > .zk-product-card:focus {
  transform: translateY(-0.125rem);
}

.zk-work__list > .zk-work-item.reveal {
  transition: opacity 0.6s var(--ease), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.zk-work__list > .zk-work-item.reveal.visible:hover,
.zk-work__list > .zk-work-item.reveal.visible:focus-within {
  transform: translateY(-0.125rem);
}

@media (max-width: 900px) {
  .zk-service { grid-template-columns: 1fr; }
  .zk-service__solution {
    border-top: 1px solid var(--gray-200);
    border-left: none;
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .zk-nav, .zk-header__cta { display: none; }
  .zk-nav-toggle { display: flex; }

  .zk-hero__rotator { font-size: 0.74em; margin-left: auto; margin-right: auto; }

  /* ── center-orient the whole site on mobile ── */
  .zk-hero__inner { text-align: center; }
  .zk-hero__sub { margin-left: auto; margin-right: auto; }
  .zk-hero__actions { justify-content: center; }
  .zk-hero__rotator span { left: 0; right: 0; text-align: center; }

  .zk-section__label,
  .zk-section__heading,
  .zk-section__intro { text-align: center; }
  .zk-section__intro { margin-left: auto; margin-right: auto; }

  .zk-team-member { text-align: center; justify-items: center; }
  .zk-team-member__portrait,
  .zk-team-member__bio { margin-left: auto; margin-right: auto; }

  .zk-contact__inner { text-align: center; }
  .zk-contact__social { justify-content: center; }

  .zk-services__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .zk-services__controls { justify-content: center; }
  .zk-service-card {
    flex-basis: min(82vw, 21rem);
    min-height: 30rem;
    padding: 1.5rem;
    border-radius: 2.5rem;
  }
  .zk-service-card h3 {
    margin-top: 3rem;
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  .zk-services__note {
    flex-direction: column;
    text-align: center;
  }

  .zk-service:hover { box-shadow: none; transform: none; }
  .zk-service__intro { padding: 2rem 1.5rem; }
  .zk-service__eyebrow { margin-bottom: 1.5rem; }
  .zk-service__title { font-size: clamp(2rem, 10vw, 2.8rem); }
  .zk-service__solution {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
  .zk-service__visual { min-height: 17rem; }
  .zk-service__cta { margin-top: 0; }
  .zk-services__closing {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .zk-products__grid { grid-template-columns: 1fr; }

  .zk-inline-cta {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .zk-work-item {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1rem;
  }
  .zk-work-item__media {
    min-height: 0;
  }
  .zk-work-phone {
    width: min(15.5rem, 78vw);
  }
  .zk-work-item__details {
    grid-template-columns: 1fr;
  }

  .zk-team__grid { grid-template-columns: 1fr; gap: 48px; }
  .zk-team-member {
    grid-template-columns: 1fr;
    grid-template-areas:
      "portrait"
      "copy";
  }
  .zk-team-member__portrait { width: min(240px, 70vw); }

  .zk-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .zk-container { padding: 0 20px; }
  .zk-hero__rotator { font-size: clamp(1.75rem, 9vw, 2.35rem); }
  .zk-section__heading { margin-bottom: 40px; }
  .zk-contact__social { flex-wrap: wrap; }
}

@media (max-width: 360px) {
  .zk-container { padding: 0 16px; }
}