/*
Szabó Art Design – WordPress weboldal készítés oldal
V3 – korrigált tipográfia, kontraszt és agency animációs réteg.
Külön oldalszintű fájl. Ne kerüljön a homepage.css fájlba.
Minden szabály a .wpk-page wrapperre van korlátozva.
*/

.wpk-page {
  --wpk-navy-950: var(--sad-navy-950, #061421);
  --wpk-navy-900: var(--sad-navy-900, #081b2c);
  --wpk-navy-800: var(--sad-navy-800, #0d263b);
  --wpk-gold-500: var(--sad-gold-500, #b78943);
  --wpk-gold-400: var(--sad-gold-400, #d2aa68);
  --wpk-gold-300: var(--sad-gold-300, #e0c18c);
  --wpk-ivory: var(--sad-ivory, #f4efe5);
  --wpk-paper: var(--sad-paper, #fbf8f1);
  --wpk-ink: var(--sad-ink, #17202a);
  --wpk-muted: var(--sad-muted, #5c6470);
  --wpk-line: rgba(26, 37, 48, .12);
  --wpk-line-dark: rgba(221, 184, 116, .18);
  --wpk-shadow: 0 24px 70px rgba(10, 24, 37, .10);
  --wpk-radius: 18px;
  --wpk-radius-sm: 12px;
  --wpk-container: min(1280px, calc(100% - 48px));
  --wpk-type-h1: clamp(2.125rem, 3.65vw, 4rem);
  --wpk-type-h2: clamp(1.95rem, 3.25vw, 3.75rem);
  --wpk-type-body: clamp(1rem, .24vw + .95rem, 1.125rem);
  --wpk-type-small: clamp(.875rem, .18vw + .84rem, .975rem);
  --wpk-type-button: clamp(.875rem, .14vw + .84rem, .9375rem);
  --wpk-serif: var(--sad-font-display, "Cormorant Garamond", Georgia, serif);
  --wpk-sans: var(--sad-font-body, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

  overflow: clip;
  color: var(--wpk-ink);
  background: var(--wpk-paper);
  font-family: var(--wpk-sans);
  font-size: 16px;
  line-height: 1.65;
  isolation: isolate;
}

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

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

.wpk-page h1,
.wpk-page h2 {
  font-family: var(--wpk-serif);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: .98;
}

.wpk-page h2 {
  max-width: 850px;
  margin-bottom: 22px;
  font-size: var(--wpk-type-h2);
}

.wpk-page h3 {
  margin-bottom: 10px;
  font-size: clamp(1.0625rem, .34vw + 1rem, 1.25rem);
  line-height: 1.35;
}

.wpk-page p {
  color: var(--wpk-muted);
  font-size: var(--wpk-type-body);
}

.wpk-page svg {
  display: block;
  width: 1.4em;
  height: 1.4em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wpk-sprite {
  position: absolute;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden;
}

.wpk-container {
  position: relative;
  z-index: 2;
  width: var(--wpk-container);
  margin-inline: auto;
}

.wpk-hero__content,
.wpk-hero__visual,
.wpk-section-head > *,
.wpk-tech__grid > *,
.wpk-pricing__grid > *,
.wpk-maintenance > *,
.wpk-final-cta__grid > * {
  min-width: 0;
  max-width: 100%;
}

.wpk-section,
.wpk-tech,
.wpk-final-cta {
  position: relative;
  padding: clamp(78px, 9vw, 138px) 0;
}

.wpk-section--dark {
  color: #fff;
  background:
    radial-gradient(circle at 78% 15%, rgba(183, 137, 67, .10), transparent 27%),
    linear-gradient(145deg, var(--wpk-navy-900), var(--wpk-navy-950));
}

.wpk-section--dark p {
  color: rgba(255,255,255,.76) !important;
}

/* A globális téma címsor-színeit felülírjuk a sötét oldalszekciókban. */
.wpk-page .wpk-section--dark h1,
.wpk-page .wpk-section--dark h2,
.wpk-page .wpk-section--dark h3,
.wpk-page .wpk-section--dark strong,
.wpk-page .wpk-tech h2,
.wpk-page .wpk-tech h3,
.wpk-page .wpk-final-cta h2 {
  color: #f8f4ec !important;
}

.wpk-page .wpk-section--ivory h1,
.wpk-page .wpk-section--ivory h2,
.wpk-page .wpk-section--ivory h3,
.wpk-page .wpk-section--paper h1,
.wpk-page .wpk-section--paper h2,
.wpk-page .wpk-section--paper h3,
.wpk-page .wpk-section--paper summary {
  color: var(--wpk-ink) !important;
}

.wpk-page .wpk-section--dark .wpk-button,
.wpk-page .wpk-section--dark .wpk-button:visited {
  color: #fff !important;
}

.wpk-section--ivory {
  background:
    radial-gradient(circle at 10% 10%, rgba(183, 137, 67, .06), transparent 30%),
    var(--wpk-ivory);
}

.wpk-section--paper {
  background: var(--wpk-paper);
}

.wpk-eyebrow {
  margin-bottom: 18px !important;
  color: var(--wpk-gold-500) !important;
  font-size: var(--wpk-type-small);
  font-weight: 750;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.wpk-text-gold {
  color: var(--wpk-gold-400);
}

.wpk-section-head {
  margin-bottom: clamp(42px, 6vw, 72px);
}

.wpk-section-head--center {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.wpk-section-head--center p {
  max-width: 700px;
  margin-inline: auto;
}

.wpk-section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: end;
}

.wpk-section-head--split > p,
.wpk-section-head--split > .wpk-text-link {
  margin-bottom: 6px;
}

.wpk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.wpk-button {
  position: relative;
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 22px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: var(--wpk-type-button);
  font-weight: 750;
  letter-spacing: .06em;
  line-height: 1.25;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.wpk-button svg,
.wpk-text-link svg {
  width: 17px;
  height: 17px;
  transition: transform .25s ease;
}

.wpk-button:hover,
.wpk-button:focus-visible {
  transform: translateY(-2px);
}

.wpk-button:hover svg,
.wpk-text-link:hover svg {
  transform: translateX(4px);
}

.wpk-button:focus-visible,
.wpk-text-link:focus-visible,
.wpk-page summary:focus-visible {
  outline: 2px solid var(--wpk-gold-400);
  outline-offset: 4px;
}

.wpk-button--gold {
  color: #fff;
  background: linear-gradient(135deg, #9e7335, var(--wpk-gold-500));
  box-shadow: 0 14px 35px rgba(183, 137, 67, .23);
}

.wpk-button--outline {
  color: #fff;
  border-color: rgba(213, 174, 105, .46);
  background: rgba(5, 18, 29, .28);
}

.wpk-button--outline:hover {
  border-color: var(--wpk-gold-400);
  background: rgba(183, 137, 67, .10);
}

.wpk-shine::before {
  position: absolute;
  inset: -40% auto -40% -55%;
  width: 38%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent);
  transform: skewX(-18deg);
  animation: wpk-button-shine 5.8s cubic-bezier(.4,0,.2,1) infinite;
}

.wpk-shine > * {
  position: relative;
  z-index: 1;
}

.wpk-hero {
  position: relative;
  min-height: clamp(660px, 78vh, 800px);
  display: grid;
  align-items: center;
  padding: clamp(96px, 8vw, 132px) 0 clamp(76px, 7vw, 108px);
  overflow: hidden;
}

.wpk-hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .78;
  background:
    linear-gradient(90deg, rgba(226, 185, 111, .055) 1px, transparent 1px),
    linear-gradient(rgba(226, 185, 111, .045) 1px, transparent 1px),
    radial-gradient(circle at 72% 38%, rgba(195, 143, 65, .13), transparent 34%);
  background-size: 72px 72px, 72px 72px, auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 64%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0 64%, transparent 96%);
  animation: wpk-grid-pan 20s linear infinite alternate;
}

.wpk-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(370px, .76fr);
  gap: clamp(42px, 6vw, 88px);
  align-items: center;
}

.wpk-hero__content {
  position: relative;
}

.wpk-hero__content::after {
  position: absolute;
  top: -26px;
  left: 0;
  width: min(330px, 72%);
  height: 1px;
  content: "";
  opacity: .72;
  background: linear-gradient(90deg, var(--wpk-gold-500), rgba(183,137,67,0));
  box-shadow: 0 0 18px rgba(183,137,67,.35);
  transform-origin: left;
  animation: wpk-scanline-breathe 5.5s ease-in-out infinite alternate;
}

.wpk-hero__title {
  max-width: 900px;
  margin-bottom: 24px;
  color: #f8f4ec !important;
  font-size: var(--wpk-type-h1);
  line-height: 1.02;
  text-wrap: balance;
}

.wpk-hero__lead {
  max-width: 690px;
  font-size: clamp(1rem, .38vw + .96rem, 1.18rem);
}

.wpk-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--wpk-line-dark);
}

.wpk-trust__item {
  display: grid;
  gap: 3px;
}

.wpk-trust__item strong {
  color: #fff;
  font-size: 1.05rem;
}

.wpk-trust__item span {
  color: rgba(255,255,255,.55);
  font-size: var(--wpk-type-small);
}

.wpk-hero::after {
  position: absolute;
  z-index: 0;
  top: -22%;
  right: -7%;
  width: min(80vw, 1280px);
  aspect-ratio: 1.35;
  content: "";
  pointer-events: none;
  opacity: .9;
  mix-blend-mode: screen;
  background:
    repeating-radial-gradient(ellipse at center,
      transparent 0 74px,
      rgba(216, 173, 98, .18) 75px 76px,
      transparent 77px 144px),
    conic-gradient(from 180deg at 50% 50%,
      transparent 0 18%,
      rgba(211, 165, 86, .21) 23%,
      transparent 30% 68%,
      rgba(211, 165, 86, .15) 74%,
      transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 48%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, #000 0 48%, transparent 76%);
  transform: rotate(-12deg);
  animation: wpk-hero-orbit 28s linear infinite;
}

.wpk-hero__visual::before {
  position: absolute;
  z-index: 0;
  inset: 1% -10% 7% -14%;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(218, 174, 97, .22);
  border-radius: 50%;
  box-shadow: 0 0 48px rgba(183, 137, 67, .08), inset 0 0 42px rgba(183, 137, 67, .05);
  transform: rotate(-13deg);
  animation: wpk-orbit-breathe 8s ease-in-out infinite alternate;
}

.wpk-hero__visual::after {
  position: absolute;
  z-index: 4;
  top: 12%;
  right: 2%;
  width: 8px;
  height: 8px;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  background: var(--wpk-gold-300);
  box-shadow: 0 0 0 6px rgba(213, 169, 92, .08), 0 0 24px rgba(213, 169, 92, .8);
  animation: wpk-node-pulse 3.8s ease-in-out infinite;
}

.wpk-hero__beam {
  position: absolute;
  width: 60vw;
  height: 1px;
  border-radius: 999px;
  opacity: .78;
  background: linear-gradient(90deg, transparent, rgba(225, 182, 105, .96), transparent);
  filter: drop-shadow(0 0 15px rgba(206, 158, 78, .75));
  transform-origin: center;
  pointer-events: none;
}

.wpk-hero__beam--one {
  right: -12vw;
  bottom: 23%;
  transform: rotate(-13deg);
  animation: wpk-beam-one 11s ease-in-out infinite alternate;
}

.wpk-hero__beam--two {
  right: -22vw;
  bottom: 34%;
  opacity: .35;
  transform: rotate(-22deg);
  animation: wpk-beam-two 14s ease-in-out infinite alternate;
}

.wpk-hero__visual {
  position: relative;
  min-height: 470px;
  perspective: 1400px;
  transform-style: preserve-3d;
  width: 100%;
  max-width: 100%;
  overflow: clip;
  transition: transform .18s ease-out;
  filter: drop-shadow(0 28px 58px rgba(0,0,0,.20));
}

.wpk-device {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(225, 182, 105, .28);
  background: #07111b;
  box-shadow: 0 40px 80px rgba(0,0,0,.46);
}

.wpk-device--laptop {
  top: 10%;
  left: 2%;
  width: 83%;
  aspect-ratio: 1.55;
  border-radius: 16px;
  transform: rotateY(-7deg) rotateX(2deg);
  animation: wpk-laptop-float 8s ease-in-out infinite;
}

.wpk-device--phone {
  right: 1%;
  bottom: 12%;
  width: 25%;
  aspect-ratio: .5;
  border: 5px solid #0c1117;
  border-radius: 28px;
  transform: translateZ(35px) rotateY(-5deg);
  animation: wpk-phone-float 6.5s ease-in-out infinite 1s;
}

.wpk-device__topbar {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 27px;
  padding: 0 12px;
  background: rgba(255,255,255,.06);
}

.wpk-device__topbar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
}

.wpk-device__notch {
  position: absolute;
  z-index: 3;
  top: 5px;
  left: 50%;
  width: 36%;
  height: 9px;
  border-radius: 0 0 8px 8px;
  background: #0c1117;
  transform: translateX(-50%);
}

.wpk-device__screen {
  position: absolute;
  inset: 27px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 9%;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(2,12,20,.95), rgba(2,12,20,.32)),
    radial-gradient(circle at 75% 30%, rgba(187,141,68,.28), transparent 32%),
    linear-gradient(135deg, #142638, #06111b);
}

.wpk-device--phone .wpk-device__screen {
  inset: 0;
  padding: 22% 12% 12%;
}

.wpk-device__screen::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .35;
  background:
    linear-gradient(115deg, transparent 0 57%, rgba(204,157,83,.5) 57.2% 57.5%, transparent 57.7%),
    linear-gradient(105deg, transparent 0 70%, rgba(204,157,83,.25) 70.2% 70.4%, transparent 70.6%);
}

.wpk-device__screen > * {
  position: relative;
  z-index: 1;
}

.wpk-device__brand {
  margin-bottom: 16%;
  color: var(--wpk-gold-300);
  font-size: clamp(.625rem, .3vw + .52rem, .75rem);
  letter-spacing: .18em;
}

.wpk-device__screen p {
  margin-bottom: 6% !important;
  color: #fff !important;
  font-family: var(--wpk-serif);
  font-size: clamp(1rem, 1.4vw, 1.85rem);
  line-height: 1.05;
}

.wpk-device--phone .wpk-device__screen p {
  font-size: clamp(.75rem, .8vw, 1rem);
}

.wpk-device__screen small {
  color: rgba(255,255,255,.62);
}

.wpk-device__cta {
  margin-top: 10%;
  padding: 8px 12px;
  color: #fff;
  background: var(--wpk-gold-500);
  font-size: clamp(.625rem, .2vw + .58rem, .75rem);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wpk-hero__platform {
  position: absolute;
  z-index: 1;
  right: -5%;
  bottom: 7%;
  width: 92%;
  height: 17%;
  border-radius: 8px 8px 20px 20px;
  background:
    linear-gradient(130deg, rgba(255,255,255,.04), transparent 32%),
    radial-gradient(circle at 70% 20%, rgba(180,130,63,.20), transparent 25%),
    #101318;
  box-shadow: 0 30px 70px rgba(0,0,0,.42);
  transform: perspective(700px) rotateX(56deg);
}

.wpk-outcome-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--wpk-line);
}

.wpk-mini-card {
  position: relative;
  min-height: 230px;
  padding: 34px 26px;
  border-right: 1px solid var(--wpk-line);
}

.wpk-mini-card:last-child {
  border-right: 0;
}

.wpk-mini-card svg {
  margin-bottom: 24px;
  color: var(--wpk-gold-500);
  font-size: 1.15rem;
}

.wpk-mini-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--wpk-gold-500), transparent);
  transform: scaleX(0);
  transition: transform .35s ease;
}

.wpk-mini-card:hover::after {
  transform: scaleX(1);
}

.wpk-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.wpk-service-card {
  min-height: 250px;
  padding: 32px;
  background: rgba(255,255,255,.42);
  transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
}

.wpk-service-card:hover {
  z-index: 2;
  background: #fff;
  box-shadow: var(--wpk-shadow);
  transform: translateY(-6px);
}

.wpk-service-card svg {
  margin-bottom: 30px;
  color: var(--wpk-gold-500);
  font-size: 1.45rem;
}

.wpk-border-light {
  border: 1px solid rgba(45, 53, 60, .10);
  border-radius: var(--wpk-radius-sm);
}

.wpk-audience {
  overflow: hidden;
}

.wpk-audience-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.wpk-audience-card {
  position: relative;
  min-height: 265px;
  padding: 30px 24px;
  overflow: hidden;
  border: 1px solid var(--wpk-line-dark);
  border-radius: var(--wpk-radius-sm);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}

.wpk-audience-card:hover {
  border-color: rgba(223,181,105,.52);
  background: rgba(255,255,255,.06);
  transform: translateY(-7px);
}

.wpk-audience-card svg {
  margin-bottom: 46px;
  color: var(--wpk-gold-400);
  font-size: 1.45rem;
}

.wpk-audience-card h3 {
  color: #fff;
}

.wpk-shine-card::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(222,180,103,.10) 48%, transparent 74%);
  transform: translateX(-115%);
  transition: transform .75s ease;
}

.wpk-shine-card:hover::before {
  transform: translateX(115%);
}

.wpk-light-trace {
  position: absolute;
  z-index: 1;
  right: -18%;
  bottom: 5%;
  width: 70%;
  height: 48%;
  opacity: .65;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(202,151,73,.14) 19px 20px, transparent 21px 42px);
  transform: rotate(-11deg) scale(1.4, .55);
  mask-image: linear-gradient(90deg, transparent, #000 35%, transparent 95%);
  animation: wpk-trace-float 13s ease-in-out infinite alternate;
}

.wpk-light-trace--reverse {
  right: auto;
  left: -20%;
  transform: rotate(9deg) scale(1.35, .5);
}

.wpk-tech {
  overflow: hidden;
  border-top: 1px solid rgba(215,174,103,.12);
}

.wpk-tech::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .58;
  background-image:
    radial-gradient(circle at 12% 28%, rgba(224, 190, 127, .75) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 68%, rgba(224, 190, 127, .48) 0 2px, transparent 3px),
    radial-gradient(circle at 52% 22%, rgba(224, 190, 127, .58) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 64%, rgba(224, 190, 127, .54) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 30%, rgba(224, 190, 127, .72) 0 2px, transparent 3px),
    linear-gradient(25deg, transparent 0 21%, rgba(205, 159, 80, .18) 21.1% 21.25%, transparent 21.35%),
    linear-gradient(-18deg, transparent 0 48%, rgba(205, 159, 80, .15) 48.1% 48.25%, transparent 48.35%);
  background-size: 420px 260px, 480px 310px, 540px 300px, 510px 330px, 440px 280px, 520px 320px, 560px 350px;
  animation: wpk-system-drift 20s linear infinite alternate;
}

.wpk-tech::after {
  position: absolute;
  top: 20%;
  right: 18%;
  width: 9px;
  height: 9px;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  background: var(--wpk-gold-300);
  box-shadow: 0 0 0 7px rgba(215, 173, 98, .06), 0 0 32px rgba(215, 173, 98, .72);
  animation: wpk-node-pulse 4.5s ease-in-out infinite 1.1s;
}

.wpk-tech__grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(50px, 8vw, 120px);
  align-items: center;
}

.wpk-tech__intro h2 {
  color: #f8f4ec !important;
  font-size: clamp(2.05rem, 3.2vw, 3.65rem);
}

.wpk-tech__metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--wpk-line-dark);
}

.wpk-metric {
  min-height: 205px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 20px;
  border-right: 1px solid var(--wpk-line-dark);
  text-align: center;
}

.wpk-metric:last-child {
  border-right: 0;
}

.wpk-metric strong {
  margin-bottom: 12px;
  color: var(--wpk-gold-400);
  font-family: var(--wpk-serif);
  font-size: 1.6rem;
  font-weight: 500;
}

.wpk-metric span {
  color: rgba(255,255,255,.62);
  font-size: var(--wpk-type-small);
}

.wpk-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 24px;
  padding-top: 36px;
}

.wpk-timeline__track {
  position: absolute;
  top: 16px;
  right: 0;
  left: 0;
  height: 1px;
  overflow: hidden;
  background: rgba(92, 71, 38, .2);
}

.wpk-timeline__track span {
  display: block;
  width: calc(var(--wpk-timeline-progress, 0) * 100%);
  height: 100%;
  background: linear-gradient(90deg, var(--wpk-gold-500), var(--wpk-gold-300));
  box-shadow: 0 0 16px rgba(183,137,67,.6);
  transition: width 1.8s cubic-bezier(.2,.75,.2,1);
}


.wpk-step {
  position: relative;
  padding-top: 28px;
}

.wpk-step > span {
  position: absolute;
  top: -36px;
  left: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wpk-gold-500);
  border-radius: 50%;
  color: var(--wpk-gold-500);
  background: var(--wpk-ivory);
  font-size: .875rem;
  font-weight: 750;
  transition: color .35s ease, background-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.wpk-step.is-active > span {
  color: var(--wpk-navy-950);
  background: var(--wpk-gold-400);
  box-shadow: 0 0 0 6px rgba(183,137,67,.10), 0 0 24px rgba(183,137,67,.34);
  transform: scale(1.06);
}

.wpk-step p {
  font-size: var(--wpk-type-small);
}

.wpk-project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.wpk-project-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wpk-line);
  border-radius: var(--wpk-radius-sm);
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
}

.wpk-project-card:hover {
  box-shadow: var(--wpk-shadow);
  transform: translateY(-7px);
}

.wpk-project-card::after {
  position: absolute;
  z-index: 3;
  inset: -35% auto -35% -60%;
  width: 32%;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(235, 205, 151, .28), transparent);
  transform: skewX(-17deg);
  transition: left .8s cubic-bezier(.22,.75,.2,1), opacity .25s ease;
}

.wpk-project-card:hover::after,
.wpk-project-card:focus-within::after {
  left: 130%;
  opacity: 1;
}

.wpk-project-card__visual {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-family: var(--wpk-serif);
  font-size: 1.35rem;
  letter-spacing: .05em;
  background: linear-gradient(145deg, #0c2639, #06131e);
}

.wpk-project-card__visual::before,
.wpk-project-card__visual::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.wpk-project-card__visual::before {
  inset: -40%;
  opacity: .55;
  background: conic-gradient(from 0deg, transparent, rgba(184,137,67,.28), transparent 35%);
  animation: wpk-project-rotate 12s linear infinite;
}

.wpk-project-card__visual::after {
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 22px 22px;
}

.wpk-project-card__visual span {
  position: relative;
  z-index: 2;
}

.wpk-project-card__visual--idea {
  background: linear-gradient(145deg, #18120f, #3c2818);
}

.wpk-project-card__visual--marketing {
  background: linear-gradient(145deg, #1e2225, #090c0f);
}

.wpk-project-card__visual--elastic {
  background: linear-gradient(145deg, #3a261b, #120d0a);
}

.wpk-project-card__body {
  padding: 26px;
}

.wpk-card-label {
  margin-bottom: 8px !important;
  color: var(--wpk-gold-500) !important;
  font-size: var(--wpk-type-small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wpk-text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--wpk-ink);
  font-size: var(--wpk-type-small);
  font-weight: 750;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}

.wpk-pricing {
  overflow: hidden;
}

.wpk-pricing::before {
  position: absolute;
  z-index: 0;
  top: -45%;
  right: -12%;
  width: min(780px, 65vw);
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
  opacity: .75;
  background: radial-gradient(circle, rgba(189, 139, 65, .20) 0, rgba(189, 139, 65, .07) 28%, transparent 66%);
  filter: blur(18px);
  transform: translate3d(0,0,0);
  animation: wpk-spotlight-sweep 11s ease-in-out infinite alternate;
}

.wpk-pricing__grid {
  display: grid;
  grid-template-columns: .9fr 1fr .72fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.wpk-pricing__factors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.wpk-pricing__factors span {
  position: relative;
  padding-left: 24px;
  color: rgba(255,255,255,.74);
  font-size: var(--wpk-type-small);
}

.wpk-pricing__factors span::before {
  position: absolute;
  top: .5em;
  left: 0;
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: var(--wpk-gold-500);
  box-shadow: 0 0 12px rgba(188,140,68,.7);
}

.wpk-pricing__cta {
  position: relative;
  padding: 34px;
  overflow: hidden;
  border: 1px solid var(--wpk-line-dark);
  border-radius: var(--wpk-radius);
  background: rgba(255,255,255,.035);
}

.wpk-pricing__cta h3 {
  color: #fff;
  font-family: var(--wpk-serif);
  font-size: clamp(1.6rem, 1.8vw, 2rem);
  font-weight: 500;
}

.wpk-maintenance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: var(--wpk-radius);
  background: #fff;
  box-shadow: var(--wpk-shadow);
}

.wpk-maintenance__panel {
  padding: clamp(42px, 6vw, 78px);
}

.wpk-maintenance__panel h2 {
  color: #f8f4ec !important;
  font-size: clamp(2rem, 3.1vw, 3.5rem);
}

.wpk-maintenance__list {
  display: grid;
  align-content: center;
  gap: 0;
  padding: clamp(28px, 5vw, 66px);
}

.wpk-maintenance__list > div {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 21px 0;
  border-bottom: 1px solid var(--wpk-line);
}

.wpk-maintenance__list > div:last-child {
  border-bottom: 0;
}

.wpk-maintenance__list svg {
  flex: 0 0 auto;
  color: var(--wpk-gold-500);
}

.wpk-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.wpk-faq details {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wpk-line);
  border-radius: 8px;
  background: rgba(255,255,255,.55);
  transition: background-color .25s ease, border-color .25s ease;
}

.wpk-faq details[open] {
  border-color: rgba(183,137,67,.38);
  background: #fff;
}

.wpk-faq details::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--wpk-gold-500), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s cubic-bezier(.2,.75,.2,1);
}

.wpk-faq details[open]::after {
  transform: scaleX(1);
}

.wpk-faq summary {
  position: relative;
  padding: 20px 54px 20px 22px;
  cursor: pointer;
  color: var(--wpk-ink);
  font-weight: 700;
  list-style: none;
}

.wpk-faq summary::-webkit-details-marker {
  display: none;
}

.wpk-faq summary::before,
.wpk-faq summary::after {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 14px;
  height: 1px;
  content: "";
  background: var(--wpk-gold-500);
  transition: transform .25s ease;
}

.wpk-faq summary::after {
  transform: rotate(90deg);
}

.wpk-faq details[open] summary::after {
  transform: rotate(0);
}

.wpk-faq details p {
  padding: 0 22px 22px;
  font-size: 1rem;
}

.wpk-final-cta {
  overflow: hidden;
}

.wpk-final-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 60px;
  align-items: center;
}

.wpk-final-cta h2 {
  max-width: 820px;
  color: #f8f4ec !important;
  font-size: clamp(2.1rem, 3.6vw, 4.15rem);
}

.wpk-final-cta__glow {
  position: absolute;
  right: -10%;
  bottom: -75%;
  width: 75%;
  aspect-ratio: 1;
  border: 1px solid rgba(209,164,86,.20);
  border-radius: 50%;
  box-shadow:
    0 0 0 60px rgba(209,164,86,.035),
    0 0 0 120px rgba(209,164,86,.025),
    0 0 120px rgba(209,164,86,.12);
  animation: wpk-glow-pulse 7s ease-in-out infinite alternate;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.72,.2,1);
}

[data-reveal="left"] {
  transform: translateX(-34px);
}

[data-reveal="right"] {
  transform: translateX(34px);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0);
}

@keyframes wpk-hero-orbit {
  to { transform: rotate(348deg); }
}

@keyframes wpk-orbit-breathe {
  from { opacity: .34; transform: rotate(-13deg) scale(.96); }
  to { opacity: .74; transform: rotate(-9deg) scale(1.035); }
}

@keyframes wpk-node-pulse {
  0%, 100% { opacity: .48; transform: scale(.75); }
  48% { opacity: 1; transform: scale(1.15); }
}

@keyframes wpk-system-drift {
  from { background-position: 0 0, 12% 8%, 30% 12%, 55% 16%, 78% 4%, 0 0, 0 0; }
  to { background-position: 7% 4%, 18% 14%, 37% 6%, 62% 22%, 84% 10%, 45px -20px, -30px 18px; }
}

@keyframes wpk-spotlight-sweep {
  from { transform: translate3d(-12%, 5%, 0) scale(.92); opacity: .46; }
  to { transform: translate3d(10%, -8%, 0) scale(1.08); opacity: .82; }
}

@keyframes wpk-button-shine {
  0%, 60% { left: -55%; }
  82%, 100% { left: 130%; }
}

@keyframes wpk-beam-one {
  from { transform: translate3d(-4%, 0, 0) rotate(-13deg) scaleX(.92); }
  to { transform: translate3d(8%, -12px, 0) rotate(-9deg) scaleX(1.08); }
}

@keyframes wpk-beam-two {
  from { transform: translate3d(0, 0, 0) rotate(-22deg) scaleX(1); }
  to { transform: translate3d(-8%, 10px, 0) rotate(-18deg) scaleX(.88); }
}

@keyframes wpk-trace-float {
  from { translate: -2% 0; opacity: .38; }
  to { translate: 5% -2%; opacity: .72; }
}

@keyframes wpk-project-rotate {
  to { transform: rotate(360deg); }
}

@keyframes wpk-glow-pulse {
  from { transform: scale(.94); opacity: .55; }
  to { transform: scale(1.04); opacity: 1; }
}


/* V3: látható, de kontrollált agency rétegek */
.wpk-page .wpk-hero {
  background:
    radial-gradient(circle at 76% 32%, rgba(186, 134, 57, .15), transparent 28%),
    radial-gradient(circle at 14% 78%, rgba(78, 116, 145, .10), transparent 32%),
    linear-gradient(145deg, var(--wpk-navy-900), var(--wpk-navy-950));
}

.wpk-page .wpk-hero__visual {
  isolation: isolate;
}

.wpk-page .wpk-hero__visual::before {
  border-color: rgba(218, 174, 97, .38);
  box-shadow:
    0 0 72px rgba(183, 137, 67, .14),
    inset 0 0 58px rgba(183, 137, 67, .09);
}

.wpk-page .wpk-tech {
  background:
    radial-gradient(circle at 18% 34%, rgba(186, 134, 57, .11), transparent 26%),
    radial-gradient(circle at 84% 68%, rgba(74, 116, 149, .10), transparent 30%),
    linear-gradient(145deg, var(--wpk-navy-900), var(--wpk-navy-950));
}

.wpk-page .wpk-audience-card h3,
.wpk-page .wpk-pricing__cta h3,
.wpk-page .wpk-maintenance__panel h2 {
  color: #f8f4ec !important;
}

.wpk-page .wpk-audience-card p,
.wpk-page .wpk-pricing__cta p,
.wpk-page .wpk-maintenance__panel p {
  color: rgba(255,255,255,.76) !important;
}

@keyframes wpk-grid-pan {
  from { background-position: 0 0, 0 0, center; }
  to { background-position: 72px 36px, 36px 72px, center; }
}

@keyframes wpk-scanline-breathe {
  from { transform: scaleX(.46); opacity: .32; }
  to { transform: scaleX(1); opacity: .88; }
}

@keyframes wpk-laptop-float {
  0%, 100% { transform: rotateY(-7deg) rotateX(2deg) translate3d(0, 0, 0); }
  50% { transform: rotateY(-5deg) rotateX(1deg) translate3d(0, -10px, 0); }
}

@keyframes wpk-phone-float {
  0%, 100% { transform: translateZ(35px) rotateY(-5deg) translate3d(0, 0, 0); }
  50% { transform: translateZ(35px) rotateY(-3deg) translate3d(0, -13px, 0); }
}


/* Csak az ezen oldal HTML-jében megjelenő űrlapokra. A globális footer/header űrlap külön komponensfájlban kezelendő. */
.wpk-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpk-page select,
.wpk-page textarea,
.wpk-page button,
.wpk-page input[type="submit"] {
  font-size: 1rem;
}

@media (max-width: 1120px) {
  .wpk-hero__grid {
    grid-template-columns: 1fr .82fr;
  }

  .wpk-trust {
    grid-template-columns: 1fr 1fr;
  }

  .wpk-outcome-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wpk-mini-card:nth-child(3) {
    border-right: 0;
  }

  .wpk-mini-card:nth-child(n+4) {
    border-top: 1px solid var(--wpk-line);
  }

  .wpk-audience-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wpk-tech__grid {
    grid-template-columns: 1fr;
  }

  .wpk-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 52px;
  }

  .wpk-timeline__track {
    display: none;
  }

  .wpk-step > span {
    top: -10px;
  }

  .wpk-project-grid {
    grid-template-columns: 1fr 1fr;
  }

  .wpk-pricing__grid {
    grid-template-columns: 1fr 1fr;
  }

  .wpk-pricing__cta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 840px) {
  .wpk-page {
    --wpk-container: min(calc(100% - 40px), 760px);
  }

  .wpk-hero {
    min-height: auto;
  }

  .wpk-hero__grid,
  .wpk-section-head--split,
  .wpk-maintenance,
  .wpk-final-cta__grid {
    grid-template-columns: 1fr;
  }

  .wpk-hero__visual {
    min-height: 420px;
  }

  .wpk-service-grid {
    grid-template-columns: 1fr 1fr;
  }

  .wpk-tech__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wpk-metric:nth-child(2n) {
    border-right: 0;
  }

  .wpk-metric:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid var(--wpk-line-dark);
  }

  .wpk-final-cta__grid .wpk-button {
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .wpk-section,
  .wpk-tech,
  .wpk-final-cta {
    padding: 70px 0;
  }

  .wpk-page {
    --wpk-container: calc(100% - 40px);
    --wpk-type-h1: clamp(2.125rem, 7.2vw, 2.3rem);
    --wpk-type-h2: clamp(1.9rem, 7.6vw, 2.35rem);
    --wpk-type-body: 1rem;
    --wpk-type-small: .875rem;
    --wpk-type-button: .875rem;
  }

  .wpk-hero {
    padding-top: 94px;
  }

  .wpk-hero__content,
  .wpk-tech__intro,
  .wpk-pricing__grid,
  .wpk-pricing__cta,
  .wpk-maintenance,
  .wpk-final-cta__grid {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(22px);
  }

  .wpk-actions,
  .wpk-actions .wpk-button {
    width: 100%;
  }

  .wpk-trust,
  .wpk-service-grid,
  .wpk-audience-grid,
  .wpk-project-grid,
  .wpk-pricing__grid,
  .wpk-pricing__factors,
  .wpk-faq {
    grid-template-columns: 1fr;
  }

  .wpk-hero__visual {
    min-height: 320px;
    margin-inline: 0;
    overflow: clip;
  }

  .wpk-device--laptop {
    left: 0;
    width: 86%;
  }

  .wpk-device--phone {
    right: 1%;
    width: 27%;
  }

  .wpk-hero__platform {
    right: 0;
    width: 96%;
  }

  .wpk-outcome-grid {
    grid-template-columns: 1fr;
    border: 0;
  }

  .wpk-mini-card {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--wpk-line);
  }

  .wpk-mini-card:nth-child(n+4) {
    border-top: 0;
  }

  .wpk-tech__metrics {
    grid-template-columns: 1fr;
  }

  .wpk-metric,
  .wpk-metric:nth-child(2n),
  .wpk-metric:last-child {
    grid-column: auto;
    border-right: 0;
    border-bottom: 1px solid var(--wpk-line-dark);
  }

  .wpk-timeline {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-left: 48px;
  }

  .wpk-step {
    min-height: 128px;
    padding-top: 0;
  }

  .wpk-step > span {
    top: 0;
    left: -48px;
  }

  .wpk-pricing__cta,
  .wpk-service-card,
  .wpk-audience-card {
    padding: 26px;
  }
}

@media (max-width: 480px) {
  .wpk-page {
    --wpk-container: calc(100% - 40px);
  }

  .wpk-section,
  .wpk-tech,
  .wpk-final-cta {
    padding-block: 64px;
  }

  .wpk-button {
    min-height: 54px;
    padding-inline: 18px;
    letter-spacing: .045em;
  }

  .wpk-trust__item strong {
    font-size: 1.0625rem;
  }

  .wpk-device__screen small,
  .wpk-device__brand,
  .wpk-device__cta {
    line-height: 1.25;
  }

  .wpk-service-card,
  .wpk-audience-card,
  .wpk-pricing__cta,
  .wpk-project-card__body {
    padding: 24px;
  }

  .wpk-faq summary {
    padding: 19px 50px 19px 18px;
    font-size: 1rem;
  }

  .wpk-faq details p {
    padding: 0 18px 20px;
  }
}

@media (max-width: 360px) {
  .wpk-page {
    --wpk-container: calc(100% - 40px);
  }

  .wpk-hero__visual {
    min-height: 286px;
  }

  .wpk-device--laptop {
    top: 12%;
    width: 84%;
  }

  .wpk-device--phone {
    bottom: 13%;
    width: 26%;
  }
}

/*
V6 - Szaboartdesign agency motion system.
Chrome-verified interaction, responsive hero, icon orbits and gold runlight.
*/
.wpk-page {
  isolation: isolate;
}

.wpk-page::before {
  animation: wpk-page-light-drift 18s ease-in-out infinite alternate;
  will-change: background-position, opacity;
}

.wpk-hero::before {
  animation: wpk-agency-grid-drift 11s linear infinite;
  will-change: background-position;
}

.wpk-hero::after {
  animation-duration: 16s;
  filter: drop-shadow(0 0 34px rgba(215, 173, 98, .2));
}

.wpk-hero__visual::before {
  animation-duration: 5.8s;
}

.wpk-hero__beam--one {
  animation-duration: 7.5s;
}

.wpk-hero__beam--two {
  animation-duration: 9.5s;
}

.wpk-ambient-field {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.wpk-ambient-field i {
  position: absolute;
  top: var(--wpk-node-y);
  left: var(--wpk-node-x);
  width: 5px;
  height: 5px;
  border: 1px solid rgba(235, 204, 148, .75);
  border-radius: 50%;
  opacity: .38;
  background: rgba(218, 174, 97, .82);
  box-shadow: 0 0 0 7px rgba(218, 174, 97, .035), 0 0 22px rgba(218, 174, 97, .58);
  transform: scale(var(--wpk-node-scale));
  animation: wpk-ambient-node var(--wpk-node-duration) ease-in-out var(--wpk-node-delay) infinite alternate;
}

.wpk-hero > .wpk-container {
  position: relative;
  z-index: 3;
}

.wpk-mini-card,
.wpk-service-card,
.wpk-audience-card,
.wpk-project-card,
.wpk-pricing__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.wpk-mini-card > :not(.wpk-card-runlight),
.wpk-service-card > :not(.wpk-card-runlight),
.wpk-audience-card > :not(.wpk-card-runlight),
.wpk-project-card > :not(.wpk-card-runlight),
.wpk-pricing__cta > :not(.wpk-card-runlight) {
  position: relative;
  z-index: 2;
}

.wpk-card-runlight {
  position: absolute;
  z-index: 4;
  inset: 0;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 74%, rgba(255, 239, 204, .32) 78%, #e6b75e 83%, rgba(255, 239, 204, .94) 87%, transparent 92% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity .24s ease;
  animation: wpk-gold-runlight 1.8s linear infinite;
}

.wpk-mini-card:hover .wpk-card-runlight,
.wpk-mini-card:focus-within .wpk-card-runlight,
.wpk-service-card:hover .wpk-card-runlight,
.wpk-service-card:focus-within .wpk-card-runlight,
.wpk-audience-card:hover .wpk-card-runlight,
.wpk-audience-card:focus-within .wpk-card-runlight,
.wpk-project-card:hover .wpk-card-runlight,
.wpk-project-card:focus-within .wpk-card-runlight,
.wpk-pricing__cta:hover .wpk-card-runlight,
.wpk-pricing__cta:focus-within .wpk-card-runlight {
  opacity: 1;
}

.wpk-icon-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 0 26px;
  border: 1px solid rgba(191, 143, 70, .24);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207, 158, 79, .13), transparent 68%);
  box-shadow: inset 0 0 20px rgba(199, 149, 72, .06);
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.wpk-icon-orbit svg {
  width: 22px;
  height: 22px;
  margin: 0 !important;
  color: var(--wpk-gold-500);
  filter: drop-shadow(0 0 9px rgba(201, 151, 73, .24));
  animation: wpk-icon-breathe 3.4s ease-in-out infinite;
}

.wpk-section--dark .wpk-icon-orbit svg,
.wpk-tech .wpk-icon-orbit svg,
.wpk-final-cta .wpk-icon-orbit svg {
  color: var(--wpk-gold-300);
}

.wpk-icon-orbit__track {
  position: absolute !important;
  z-index: 3 !important;
  inset: -4px;
  border-radius: 50%;
  animation: wpk-icon-orbit 4.8s linear infinite;
}

.wpk-icon-orbit__track::before,
.wpk-icon-orbit__track::after {
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: #e8bd6c;
  box-shadow: 0 0 0 4px rgba(218, 174, 97, .08), 0 0 12px rgba(218, 174, 97, .8);
  transform: translateX(-50%);
}

.wpk-icon-orbit__track::before {
  top: -2px;
}

.wpk-icon-orbit__track::after {
  right: -2px;
  bottom: 8px;
  left: auto;
  width: 3px;
  height: 3px;
}

.wpk-mini-card:hover .wpk-icon-orbit,
.wpk-service-card:hover .wpk-icon-orbit,
.wpk-audience-card:hover .wpk-icon-orbit {
  border-color: rgba(225, 183, 107, .58);
  box-shadow: inset 0 0 24px rgba(199, 149, 72, .12), 0 0 28px rgba(199, 149, 72, .12);
  transform: translateY(-3px) scale(1.035);
}

.wpk-section--dark,
.wpk-final-cta {
  position: relative;
}

.wpk-section--dark::after,
.wpk-final-cta::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .38;
  background: radial-gradient(circle at 20% 30%, rgba(213, 166, 87, .13), transparent 22%), linear-gradient(118deg, transparent 0 44%, rgba(223, 184, 113, .075) 49%, transparent 54% 100%);
  background-size: 100% 100%, 220% 100%;
  animation: wpk-section-light-sweep 13s ease-in-out infinite;
}

.wpk-section--dark > .wpk-container,
.wpk-final-cta > .wpk-container {
  position: relative;
  z-index: 1;
}

@keyframes wpk-page-light-drift {
  0% { background-position: 0 0, 100% 0; opacity: .46; }
  100% { background-position: 7vw -4vh, 92% 6vh; opacity: .74; }
}

@keyframes wpk-agency-grid-drift {
  0% { background-position: 0 0, 0 0, center; }
  100% { background-position: 72px 36px, 36px 72px, center; }
}

@keyframes wpk-ambient-node {
  0% { opacity: .18; translate: -8px 10px; }
  55% { opacity: .82; }
  100% { opacity: .28; translate: 14px -18px; }
}

@keyframes wpk-gold-runlight {
  to { transform: rotate(1turn); }
}

@keyframes wpk-icon-orbit {
  to { transform: rotate(1turn); }
}

@keyframes wpk-icon-breathe {
  0%, 100% { transform: scale(.94); opacity: .82; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes wpk-section-light-sweep {
  0%, 100% { background-position: 20% 30%, -90% 0; }
  50% { background-position: 28% 38%, 90% 0; }
}

@media (max-width: 620px) {
  .wpk-hero {
    padding-top: 72px;
  }

  .wpk-hero__grid {
    gap: 34px;
  }

  .wpk-hero__title {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: pretty;
  }

  .wpk-hero__visual {
    min-height: 292px;
  }

  .wpk-device--laptop {
    top: 7%;
    left: 0;
    width: 82%;
  }

  .wpk-device--phone {
    right: 0;
    bottom: 8%;
    width: 29%;
    border-width: 4px;
  }

  .wpk-device--phone .wpk-device__screen {
    padding: 20% 9% 10%;
  }

  .wpk-device--phone .wpk-device__screen p {
    font-size: clamp(.5rem, 2.05vw, .72rem);
    line-height: 1.08;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }

  .wpk-device--phone .wpk-device__brand,
  .wpk-device--phone .wpk-device__cta {
    font-size: clamp(.46rem, 1.8vw, .64rem);
    letter-spacing: .04em;
    overflow-wrap: normal;
    word-break: keep-all;
    white-space: nowrap;
  }

  .wpk-device--phone .wpk-device__cta {
    padding: 6px 7px;
  }

  .wpk-icon-orbit {
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
  }
}

@media (max-width: 390px) {
  .wpk-page {
    --wpk-container: calc(100% - 28px);
    --wpk-type-h1: clamp(1.72rem, 8vw, 1.95rem);
  }

  .wpk-hero {
    padding-top: 66px;
  }

  .wpk-hero__title {
    font-size: var(--wpk-type-h1);
    line-height: 1.08;
  }

  .wpk-hero__visual {
    min-height: 270px;
  }

  .wpk-device--phone {
    width: 30%;
  }

  .wpk-device--phone .wpk-device__screen p {
    font-size: .54rem;
  }

  .wpk-device--phone .wpk-device__brand,
  .wpk-device--phone .wpk-device__cta {
    font-size: .47rem;
  }

  .wpk-device--phone .wpk-device__cta {
    padding: 5px 6px;
  }

  .wpk-timeline {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1181px) and (max-width: 1439px) {
  .wpk-timeline .wpk-step h3 {
    font-size: .925rem;
  }
}

@media (hover: none) {
  .wpk-card-runlight {
    opacity: .24;
    animation-duration: 5.8s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wpk-card-runlight {
    opacity: .22;
    transform: none;
  }

  .wpk-icon-orbit__track,
  .wpk-icon-orbit svg,
  .wpk-ambient-field i {
    animation: none !important;
  }
}

/*
V5 - Chrome QA refinements.
Removes decorative visual spill, raises remaining micro text, and gives the
hero copy more room around desktop/tablet transition widths.
*/
.wpk-page {
  width: 100%;
  max-width: 100vw;
}

.wpk-page .wpk-container {
  max-width: calc(100vw - 32px);
}

.wpk-hero,
.wpk-tech,
.wpk-final-cta {
  contain: paint;
}

.wpk-hero__beam,
.wpk-light-trace,
.wpk-final-cta__glow {
  max-width: 100vw;
}

.wpk-device__brand,
.wpk-device__cta,
.wpk-device__screen small,
.wpk-device--phone .wpk-device__screen p {
  font-size: .875rem;
  line-height: 1.25;
}

.wpk-page :where(.wpk-button, button, input[type="submit"]) {
  font-size: max(var(--wpk-type-button), .9375rem);
}

.wpk-page :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  font-size: 1rem !important;
}

@media (min-width: 1181px) and (max-width: 1439px) {
  .wpk-hero__grid {
    grid-template-columns: minmax(0, 1.36fr) minmax(320px, .64fr);
    gap: clamp(34px, 4vw, 58px);
  }

  .wpk-hero__title {
    max-width: 780px;
  }

  .wpk-hero__visual {
    min-height: 430px;
  }
}

@media (min-width: 1440px) {
  .wpk-hero__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(420px, .7fr);
  }

  .wpk-hero__title {
    max-width: 860px;
  }
}

@media (min-width: 1920px) {
  .wpk-page {
    --wpk-type-h1: 4.15rem;
    --wpk-type-h2: 3.15rem;
  }

  .wpk-hero__grid {
    grid-template-columns: minmax(0, 980px) minmax(390px, 1fr);
    gap: 60px;
  }

  .wpk-hero__title {
    max-width: 980px;
  }
}

@media (max-width: 1180px) {
  .wpk-page .wpk-container {
    max-width: calc(100vw - 40px);
  }
}

@media (max-width: 620px) {
  .wpk-device__brand,
  .wpk-device__cta,
  .wpk-device__screen small {
    font-size: .875rem;
  }
}

@media (max-width: 420px) {
  .wpk-device__brand,
  .wpk-device__cta,
  .wpk-device__screen small,
  .wpk-device--phone .wpk-device__screen p {
    font-size: .875rem;
  }
}


@media (min-width: 1920px) {
  .wpk-page {
    --wpk-container: min(1400px, calc(100% - 96px));
    --wpk-type-h1: 4rem;
    --wpk-type-h2: 3.75rem;
  }

  .wpk-hero {
    min-height: 800px;
  }
}

@media (max-width: 620px) {
  .wpk-hero::after {
    top: -2%;
    right: -58%;
    width: 150vw;
    opacity: .48;
  }

  .wpk-hero__beam {
    opacity: .42;
  }

  .wpk-hero__content::after {
    top: -18px;
  }

  .wpk-device--laptop,
  .wpk-device--phone {
    animation-duration: 10s;
  }

  .wpk-tech::before {
    opacity: .34;
  }
}

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

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .wpk-timeline {
    --wpk-timeline-progress: 1;
  }
}

/*
V4 - Szaboartdesign responsive agency hardening.
This final layer keeps the existing visual system, but makes the page stable
from 320px mobile screens up to 4K displays.
*/
.wpk-page {
  --wpk-container: min(1320px, calc(100% - 56px));
  --wpk-type-h1: clamp(2.55rem, 2.45vw + 1.45rem, 4.85rem);
  --wpk-type-h2: clamp(2rem, 1.65vw + 1.35rem, 3.35rem);
  --wpk-type-body: clamp(1rem, .18vw + .96rem, 1.125rem);
  --wpk-type-small: clamp(.9375rem, .12vw + .9rem, 1rem);
  --wpk-type-button: clamp(.9375rem, .08vw + .91rem, 1rem);
  overflow-x: clip;
}

.wpk-page::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .62;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(194, 148, 76, .055) 36.2% 36.55%, transparent 36.8% 100%),
    linear-gradient(72deg, transparent 0 62%, rgba(194, 148, 76, .045) 62.2% 62.45%, transparent 62.75% 100%);
  transform: translate3d(0, calc(var(--wpk-hero-scroll, 0) * -26px), 0);
}

.wpk-page :where(p, li, summary, label, input, select, textarea, button, .wpk-button, .wpk-eyebrow, .wpk-card-label, .wpk-text-link) {
  text-rendering: geometricPrecision;
}

.wpk-page :where(.wpk-eyebrow, .wpk-card-label, .wpk-text-link, .wpk-trust__item span, .wpk-device__brand, .wpk-device__cta, .wpk-device__screen small) {
  font-size: max(var(--wpk-type-small), .9375rem);
}

.wpk-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea, button, input[type="submit"]) {
  min-height: 46px;
  font-size: 1rem;
}

.wpk-page .wpk-button {
  min-height: 54px;
  font-size: var(--wpk-type-button);
}

.wpk-page .wpk-section-head--center,
.wpk-page .wpk-section-head--split,
.wpk-page .wpk-hero__content {
  max-width: 100%;
}

.wpk-page h1,
.wpk-page h2 {
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.wpk-hero {
  min-height: clamp(680px, 76vh, 820px);
  padding-block: clamp(104px, 7vw, 138px) clamp(78px, 6vw, 112px);
}

.wpk-hero__grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  gap: clamp(44px, 5vw, 78px);
}

.wpk-hero__title {
  max-width: 1040px;
  line-height: 1.04;
}

.wpk-hero__lead {
  font-size: clamp(1.0625rem, .22vw + 1rem, 1.2rem);
}

.wpk-hero__visual {
  contain: layout paint;
}

.wpk-section--dark,
.wpk-tech,
.wpk-final-cta {
  overflow: clip;
}

.wpk-shine-card,
.wpk-service-card,
.wpk-audience-card,
.wpk-project-card,
.wpk-pricing__cta,
.wpk-faq details {
  transition:
    transform .3s cubic-bezier(.2, .72, .2, 1),
    border-color .3s ease,
    box-shadow .3s ease,
    background-color .3s ease;
}

.wpk-shine-card:hover,
.wpk-service-card:hover,
.wpk-audience-card:hover,
.wpk-project-card:hover,
.wpk-pricing__cta:hover {
  box-shadow: 0 26px 80px rgba(4, 17, 28, .18);
}

.wpk-page .wpk-section--dark .wpk-shine-card:hover,
.wpk-page .wpk-tech .wpk-shine-card:hover,
.wpk-page .wpk-final-cta .wpk-shine-card:hover {
  border-color: rgba(224, 193, 140, .42);
  box-shadow: 0 28px 86px rgba(0, 0, 0, .32), 0 0 0 1px rgba(224, 193, 140, .08);
}

@media (min-width: 1440px) {
  .wpk-hero__title {
    max-width: 1120px;
  }
}

@media (min-width: 1920px) {
  .wpk-page {
    --wpk-container: min(1480px, calc(100% - 128px));
    --wpk-type-h1: 4.85rem;
    --wpk-type-h2: 3.35rem;
  }

  .wpk-hero {
    min-height: 820px;
  }
}

@media (max-width: 1180px) {
  .wpk-page {
    --wpk-container: min(940px, calc(100% - 48px));
    --wpk-type-h1: clamp(2.55rem, 3.3vw + 1.25rem, 4.1rem);
    --wpk-type-h2: clamp(2rem, 2.2vw + 1.15rem, 3rem);
  }

  .wpk-hero__grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .wpk-hero {
    min-height: auto;
    padding-block: 104px 84px;
  }

  .wpk-hero__visual {
    width: min(680px, 100%);
    min-height: 390px;
    margin-inline: auto;
  }
}

@media (max-width: 840px) {
  .wpk-page {
    --wpk-container: min(720px, calc(100% - 40px));
    --wpk-type-h1: clamp(2.25rem, 4.2vw + 1rem, 3.25rem);
    --wpk-type-h2: clamp(1.85rem, 2.8vw + 1rem, 2.55rem);
  }

  .wpk-hero {
    padding-block: 92px 72px;
  }

  .wpk-hero__title {
    max-width: 760px;
  }

  .wpk-section-head--split {
    gap: 18px;
  }

  .wpk-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .wpk-page {
    --wpk-container: calc(100% - 36px);
    --wpk-type-h1: clamp(2rem, 5.2vw + .88rem, 2.55rem);
    --wpk-type-h2: clamp(1.72rem, 3.8vw + .85rem, 2.15rem);
    --wpk-type-body: 1rem;
    --wpk-type-small: .9375rem;
    --wpk-type-button: .9375rem;
  }

  .wpk-hero {
    padding-block: 84px 62px;
  }

  .wpk-hero__content::after {
    width: 76%;
  }

  .wpk-hero__title {
    margin-bottom: 20px;
    line-height: 1.08;
  }

  .wpk-hero__lead {
    font-size: 1rem;
  }

  .wpk-eyebrow {
    letter-spacing: .11em;
    line-height: 1.35;
  }

  .wpk-hero__visual {
    min-height: 300px;
  }

  .wpk-device--laptop {
    left: 0;
    width: 84%;
  }

  .wpk-device--phone {
    right: 0;
    width: 25%;
    border-width: 4px;
  }

  .wpk-device__screen {
    padding: 8%;
  }

  .wpk-device__screen p {
    font-size: clamp(.95rem, 4vw, 1.2rem);
  }

  .wpk-device--phone .wpk-device__screen p {
    font-size: .82rem;
  }

  .wpk-trust {
    gap: 14px;
    margin-top: 34px;
    padding-top: 22px;
  }

  .wpk-service-card,
  .wpk-audience-card,
  .wpk-pricing__cta,
  .wpk-project-card__body,
  .wpk-mini-card {
    padding: 24px 22px;
  }
}

@media (max-width: 480px) {
  .wpk-page {
    --wpk-container: calc(100% - 32px);
    --wpk-type-h1: clamp(1.86rem, 5.4vw + .76rem, 2.22rem);
    --wpk-type-h2: clamp(1.58rem, 4.5vw + .72rem, 1.95rem);
  }

  .wpk-section,
  .wpk-tech,
  .wpk-final-cta {
    padding-block: 58px;
  }

  .wpk-hero {
    padding-block: 76px 56px;
  }

  .wpk-hero__visual {
    min-height: 270px;
  }

  .wpk-actions {
    gap: 12px;
  }

  .wpk-button {
    justify-content: center;
    width: 100%;
    padding-inline: 16px;
    white-space: normal;
  }

  .wpk-device__brand,
  .wpk-device__cta,
  .wpk-device__screen small {
    font-size: .8125rem;
  }

  .wpk-device__cta {
    padding: 7px 9px;
  }
}

@media (max-width: 360px) {
  .wpk-page {
    --wpk-container: calc(100% - 28px);
    --wpk-type-h1: clamp(1.72rem, 5.6vw + .72rem, 1.95rem);
    --wpk-type-h2: clamp(1.48rem, 4.8vw + .68rem, 1.78rem);
  }

  .wpk-hero {
    padding-top: 70px;
  }

  .wpk-hero__visual {
    min-height: 246px;
  }

  .wpk-device--phone {
    width: 24%;
  }

  .wpk-service-card,
  .wpk-audience-card,
  .wpk-pricing__cta,
  .wpk-project-card__body,
  .wpk-mini-card {
    padding-inline: 20px;
  }
}

/* V7 - final responsive priority layer after every legacy breakpoint. */
/*
V12 - homepage consistency and editorial alignment.
Keeps every CTA, heading and process label in the Szaboartdesign system.
*/
.wpk-hero__visual,
.wpk-device,
.wpk-hero__platform {
  filter: none;
  box-shadow: none;
}

.wpk-page .wpk-button {
  min-height: 58px;
  padding: 14px 20px 14px 24px;
  border-radius: 8px;
  font-size: clamp(.875rem, .08vw + .84rem, .9375rem);
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.2;
}

.wpk-page .wpk-button--gold {
  color: #07101b;
  border: 1px solid #f2d58a;
  background: linear-gradient(180deg, #f2d58a 0%, #d4af55 62%, #c89d45 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 16px 38px rgba(212, 175, 85, .20),
    0 0 0 1px rgba(212, 175, 85, .08);
}

.wpk-page .wpk-button--outline {
  color: #f7f3ec;
  border: 1px solid #f2d58a;
  background: linear-gradient(180deg, #0a1d2e 0%, #061421 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 0 0 1px rgba(212, 175, 85, .08),
    0 0 25px rgba(212, 175, 85, .15),
    0 14px 34px rgba(0, 0, 0, .28);
}

.wpk-page .wpk-section--dark .wpk-button--gold,
.wpk-page .wpk-section--dark .wpk-button--gold:visited {
  color: #07101b !important;
}

.wpk-page .wpk-button--gold:hover,
.wpk-page .wpk-button--gold:focus-visible {
  color: #07101b;
  border-color: #f7dfa5;
  background: linear-gradient(180deg, #f7dfa5 0%, #ddb75d 62%, #cfa44c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 18px 42px rgba(212, 175, 85, .26),
    0 0 0 1px rgba(212, 175, 85, .1);
}

.wpk-page .wpk-button--outline:hover,
.wpk-page .wpk-button--outline:focus-visible {
  color: #fff;
  border-color: #f7dfa5;
  background: linear-gradient(180deg, #102b43 0%, #081a2a 100%);
}

.wpk-section-head--center {
  text-align: center;
}

.wpk-section-head--center h2,
.wpk-section-head--center > p:last-child {
  margin-inline: auto;
}

.wpk-timeline .wpk-step h3 {
  font-size: clamp(.95rem, .45vw + .55rem, 1.05rem);
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.wpk-page > section {
  position: relative;
  overflow: clip;
}

.wpk-page > section > .wpk-container {
  position: relative;
  z-index: 2;
}

.wpk-page > .wpk-section--dark:not(.wpk-hero)::after,
.wpk-page > .wpk-final-cta::after {
  opacity: 0;
  animation: none;
}

.wpk-section-divider {
  position: absolute;
  z-index: 7;
  right: auto;
  bottom: 20px;
  left: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  width: min(1440px, calc(100% - 48px));
  height: 34px;
  pointer-events: none;
  transform: translateX(-50%);
}

.wpk-section-divider__line {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 85, .44), transparent);
}

.wpk-section-divider__emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(212, 175, 85, .44);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(212, 175, 85, .10);
}

.wpk-section-divider__emblem::before {
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: #fff0c7;
  box-shadow: 0 0 8px rgba(255, 240, 199, .86), 0 0 16px rgba(212, 175, 85, .48);
}

.wpk-section-divider__emblem::after {
  position: absolute;
  inset: -5px;
  content: "";
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 228deg,
    rgba(212, 175, 85, .18) 248deg,
    #f2d58a 286deg,
    #fff0c7 304deg,
    transparent 340deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 60% 66%, transparent 68%);
  mask: radial-gradient(circle, transparent 0 58%, #000 60% 66%, transparent 68%);
  animation: wpk-section-divider-orbit 9s linear infinite;
}

.wpk-section-motion {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

section[data-wpk-motion="grid-drift"] .wpk-section-motion {
  opacity: .42;
  background:
    radial-gradient(circle at 14% 24%, rgba(232, 189, 108, .48) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 68%, rgba(232, 189, 108, .32) 0 2px, transparent 3px),
    linear-gradient(90deg, rgba(212, 175, 85, .045) 1px, transparent 1px),
    linear-gradient(rgba(212, 175, 85, .04) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
  animation: wpk-motion-grid 14s linear infinite;
}

section[data-wpk-motion="contour"] .wpk-section-motion::before {
  position: absolute;
  top: -38%;
  right: -10%;
  width: 72%;
  aspect-ratio: 1.25;
  content: "";
  opacity: .34;
  background: repeating-radial-gradient(ellipse at center, transparent 0 58px, rgba(183, 137, 67, .16) 59px 60px, transparent 61px 116px);
  transform: rotate(-12deg) scale(1.1, .72);
  animation: wpk-motion-contour 12s ease-in-out infinite alternate;
}

section[data-wpk-motion="light-scan"] .wpk-section-motion {
  opacity: .72;
  background: linear-gradient(112deg, transparent 0 39%, rgba(229, 192, 125, .11) 47%, rgba(183, 137, 67, .035) 51%, transparent 59% 100%);
  background-size: 240% 100%;
  animation: wpk-motion-scan 10s cubic-bezier(.4, 0, .2, 1) infinite;
}

section[data-wpk-motion="orbit"] .wpk-section-motion::before,
section[data-wpk-motion="orbit"] .wpk-section-motion::after {
  position: absolute;
  top: 50%;
  left: 78%;
  content: "";
  border: 1px solid rgba(224, 193, 140, .14);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

section[data-wpk-motion="orbit"] .wpk-section-motion::before {
  width: min(62vw, 900px);
  aspect-ratio: 1;
  animation: wpk-motion-orbit 18s linear infinite;
}

section[data-wpk-motion="orbit"] .wpk-section-motion::after {
  width: min(38vw, 540px);
  aspect-ratio: 1;
  box-shadow: 0 0 70px rgba(183, 137, 67, .07);
  animation: wpk-motion-orbit-reverse 13s linear infinite;
}

section[data-wpk-motion="network"] .wpk-section-motion {
  opacity: .5;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(232, 189, 108, .78) 0 2px, transparent 3px),
    radial-gradient(circle at 46% 72%, rgba(232, 189, 108, .5) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 22%, rgba(232, 189, 108, .65) 0 2px, transparent 3px),
    linear-gradient(22deg, transparent 0 34%, rgba(212, 175, 85, .12) 34.1% 34.25%, transparent 34.35%),
    linear-gradient(-18deg, transparent 0 62%, rgba(212, 175, 85, .1) 62.1% 62.25%, transparent 62.35%);
  background-size: 420px 280px, 500px 320px, 470px 300px, 620px 360px, 680px 390px;
  animation: wpk-motion-network 17s linear infinite alternate;
}

section[data-wpk-motion="timeline-wave"] .wpk-section-motion::before {
  position: absolute;
  right: -12%;
  bottom: -44%;
  width: 76%;
  aspect-ratio: 1.8;
  content: "";
  opacity: .32;
  background: repeating-radial-gradient(ellipse at center, transparent 0 34px, rgba(183, 137, 67, .15) 35px 36px, transparent 37px 72px);
  transform: rotate(-8deg) scale(1.2, .55);
  animation: wpk-motion-wave 9s ease-in-out infinite alternate;
}

section[data-wpk-motion="halo"] .wpk-section-motion::before {
  position: absolute;
  top: 50%;
  left: 18%;
  width: min(70vw, 940px);
  aspect-ratio: 1;
  content: "";
  opacity: .18;
  background: conic-gradient(from 40deg, transparent 0 16%, rgba(183, 137, 67, .28) 22%, transparent 31% 68%, rgba(224, 193, 140, .2) 76%, transparent 84% 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 54%, transparent 72%);
  mask: radial-gradient(circle, transparent 0 38%, #000 54%, transparent 72%);
  transform: translate(-50%, -50%);
  animation: wpk-motion-halo 20s linear infinite;
}

section[data-wpk-motion="curtains"] .wpk-section-motion {
  opacity: .3;
  background: repeating-linear-gradient(90deg, transparent 0 84px, rgba(224, 193, 140, .055) 85px, transparent 86px 168px);
  animation: wpk-motion-curtains 11s ease-in-out infinite alternate;
}

section[data-wpk-motion="dotfield"] .wpk-section-motion {
  opacity: .36;
  background-image: radial-gradient(circle, rgba(183, 137, 67, .34) 0 1.5px, transparent 2px);
  background-size: 118px 118px;
  -webkit-mask-image: linear-gradient(115deg, transparent 5%, #000 38%, transparent 90%);
  mask-image: linear-gradient(115deg, transparent 5%, #000 38%, transparent 90%);
  animation: wpk-motion-dots 15s linear infinite;
}

section[data-wpk-motion="ripple"] .wpk-section-motion::before {
  position: absolute;
  top: -55%;
  right: -8%;
  width: 74%;
  aspect-ratio: 1;
  content: "";
  opacity: .28;
  background: repeating-radial-gradient(circle at center, transparent 0 52px, rgba(183, 137, 67, .16) 53px 54px, transparent 55px 104px);
  animation: wpk-motion-ripple 8s ease-in-out infinite alternate;
}

section[data-wpk-motion="spotlight"] .wpk-section-motion {
  opacity: .7;
  background:
    radial-gradient(circle at 22% 32%, rgba(224, 193, 140, .14), transparent 28%),
    radial-gradient(circle at 78% 68%, rgba(183, 137, 67, .11), transparent 30%);
  animation: wpk-motion-spotlight 8s ease-in-out infinite alternate;
}

@keyframes wpk-section-divider-orbit {
  to { transform: rotate(1turn); }
}

@keyframes wpk-motion-grid {
  to { background-position: 90px -42px, -64px 74px, 72px 36px, 36px 72px; }
}

@keyframes wpk-motion-contour {
  from { translate: 0 0; rotate: 0deg; }
  to { translate: -5% 7%; rotate: 8deg; }
}

@keyframes wpk-motion-scan {
  0%, 18% { background-position: 120% 0; }
  68%, 100% { background-position: -120% 0; }
}

@keyframes wpk-motion-orbit {
  to { rotate: 1turn; scale: 1.06; }
}

@keyframes wpk-motion-orbit-reverse {
  to { rotate: -1turn; scale: .94; }
}

@keyframes wpk-motion-network {
  to { background-position: 46px -32px, -58px 42px, 28px 54px, 70px -30px, -48px 62px; }
}

@keyframes wpk-motion-wave {
  to { translate: -9% -4%; scale: 1.06 .96; }
}

@keyframes wpk-motion-halo {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

@keyframes wpk-motion-curtains {
  from { background-position: 0 0; opacity: .18; }
  to { background-position: 92px 0; opacity: .42; }
}

@keyframes wpk-motion-dots {
  to { background-position: 118px -118px; }
}

@keyframes wpk-motion-ripple {
  from { transform: scale(.92); opacity: .16; }
  to { transform: scale(1.08); opacity: .34; }
}

@keyframes wpk-motion-spotlight {
  to { background-position: 8% 12%, 92% 82%; opacity: .92; }
}

@media (max-width: 620px) {
  .wpk-section-divider {
    bottom: 12px;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    gap: 10px;
    width: calc(100% - 28px);
    height: 30px;
  }

  .wpk-section-divider__emblem {
    width: 30px;
    height: 30px;
  }

  .wpk-section-motion {
    opacity: .72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wpk-section-divider__emblem::after,
  .wpk-section-motion,
  .wpk-section-motion::before,
  .wpk-section-motion::after {
    animation: none !important;
  }
}

.wpk-device--phone .wpk-device__brand {
  font-size: clamp(.5rem, .42vw, .68rem);
  letter-spacing: .06em;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

.wpk-device--phone .wpk-device__screen p {
  font-size: clamp(.56rem, .64vw, .82rem);
  line-height: 1.08;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

.wpk-device--phone .wpk-device__cta {
  padding: 6px 7px;
  font-size: clamp(.48rem, .4vw, .64rem);
  letter-spacing: .04em;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

@media (min-width: 1181px) and (max-width: 1439px) {
  .wpk-hero__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(350px, .7fr);
    gap: clamp(34px, 3.5vw, 54px);
  }

  .wpk-hero__title {
    font-size: clamp(3.15rem, 4.05vw, 4.15rem);
  }
}

@media (min-width: 1440px) {
  .wpk-hero__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(410px, .75fr);
  }
}

@media (min-width: 1800px) {
  .wpk-page {
    --wpk-type-h1: 4.15rem;
    --wpk-type-h2: 3.15rem;
  }

  .wpk-hero__grid {
    grid-template-columns: minmax(0, 980px) minmax(390px, 1fr);
    gap: 60px;
  }

  .wpk-hero__title {
    max-width: 980px;
  }
}

@media (max-width: 620px) {
  .wpk-page {
    --wpk-container: calc(100% - 32px);
  }

  .wpk-hero {
    padding-block: 72px 58px;
  }

  .wpk-hero__grid {
    gap: 34px;
  }

  .wpk-hero__title {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: pretty;
  }

  .wpk-hero__visual {
    min-height: 292px;
  }

  .wpk-device--laptop {
    top: 7%;
    left: 0;
    width: 82%;
  }

  .wpk-device--phone {
    right: 0;
    bottom: 8%;
    width: 29%;
    border-width: 4px;
  }

  .wpk-device--phone .wpk-device__screen {
    padding: 20% 9% 10%;
  }

  .wpk-device--phone .wpk-device__screen p {
    font-size: clamp(.5rem, 2.05vw, .72rem);
    line-height: 1.08;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }

  .wpk-device--phone .wpk-device__brand,
  .wpk-device--phone .wpk-device__cta {
    font-size: clamp(.46rem, 1.8vw, .64rem);
    letter-spacing: .04em;
    overflow-wrap: normal;
    word-break: keep-all;
    white-space: nowrap;
  }

  .wpk-device--phone .wpk-device__cta {
    padding: 6px 7px;
  }
}

@media (max-width: 390px) {
  .wpk-page {
    --wpk-container: calc(100% - 28px);
    --wpk-type-h1: clamp(1.72rem, 8vw, 1.95rem);
  }

  .wpk-hero {
    padding-top: 66px;
  }

  .wpk-hero__title {
    font-size: var(--wpk-type-h1);
    line-height: 1.08;
  }

  .wpk-hero__visual {
    min-height: 270px;
  }

  .wpk-device--phone {
    width: 30%;
  }

  .wpk-device--phone .wpk-device__screen p {
    font-size: .54rem;
  }

  .wpk-device--phone .wpk-device__brand,
  .wpk-device--phone .wpk-device__cta {
    font-size: .47rem;
  }

  .wpk-device--phone .wpk-device__cta {
    padding: 5px 6px;
  }
}

/* V13 - final process-label fit across the tested responsive range. */
@media (max-width: 390px) {
  .wpk-timeline {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1181px) and (max-width: 1439px) {
  .wpk-timeline .wpk-step h3 {
    font-size: .925rem;
  }
}

/* V14 - keep the phone mockup headline inside its fixed-width screen. */
@media (min-width: 1181px) {
  .wpk-page .wpk-device--phone .wpk-device__screen p {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(.5rem, .52vw, .68rem);
  }
}

/* V15 - use the same typography system as the Szaboartdesign homepage. */
.wpk-page {
  --wpk-serif: "Space Grotesk", sans-serif;
  --wpk-sans: Manrope, sans-serif;
  font-family: var(--wpk-sans);
}

.wpk-page h1,
.wpk-page h2,
.wpk-page h3 {
  font-family: var(--wpk-serif);
  letter-spacing: 0;
}

.wpk-page h1,
.wpk-page h2 {
  font-weight: 760;
  line-height: 1.04;
}

.wpk-page h3 {
  font-weight: 720;
  line-height: 1.28;
}

.wpk-page p,
.wpk-page li,
.wpk-page summary,
.wpk-page .wpk-button,
.wpk-page .wpk-eyebrow,
.wpk-page .wpk-text-link,
.wpk-page .wpk-trust__item {
  font-family: var(--wpk-sans);
}

.wpk-page .wpk-button {
  font-size: clamp(.875rem, .08vw + .84rem, .92rem);
}

.wpk-page .wpk-eyebrow {
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.4;
}

/* V16 - homepage-equivalent border runlight for every call-to-action button. */
.wpk-page .wpk-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.wpk-page .wpk-button.wpk-shine::before {
  content: none;
  animation: none;
}

.wpk-page .wpk-button::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(242, 213, 138, .22) 16%, #f2d58a 38%, #fff0c7 52%, #f2d58a 66%, rgba(242, 213, 138, .22) 84%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(242, 213, 138, .22) 16%, #f2d58a 38%, #fff0c7 52%, #f2d58a 66%, rgba(242, 213, 138, .22) 84%, transparent 100%),
    linear-gradient(270deg, transparent 0%, rgba(242, 213, 138, .22) 16%, #f2d58a 38%, #fff0c7 52%, #f2d58a 66%, rgba(242, 213, 138, .22) 84%, transparent 100%),
    linear-gradient(0deg, transparent 0%, rgba(242, 213, 138, .22) 16%, #f2d58a 38%, #fff0c7 52%, #f2d58a 66%, rgba(242, 213, 138, .22) 84%, transparent 100%);
  background-repeat: no-repeat;
  background-position: -46% 0, 100% -58%, 146% 100%, 0 158%;
  background-size: 38% 2px, 2px 50%, 38% 2px, 2px 50%;
}

.wpk-page .wpk-button:hover::after,
.wpk-page .wpk-button:focus-visible::after {
  animation: szaboartdesign-button-border-runlight 1.55s linear 2 both;
}

@keyframes szaboartdesign-button-border-runlight {
  0% {
    opacity: 0;
    background-position: -46% 0, 100% -58%, 146% 100%, 0 158%;
  }

  3% {
    opacity: 1;
  }

  24%,
  25% {
    opacity: 1;
    background-position: 146% 0, 100% -58%, 146% 100%, 0 158%;
  }

  49%,
  50% {
    opacity: 1;
    background-position: 146% 0, 100% 158%, 146% 100%, 0 158%;
  }

  74%,
  75% {
    opacity: 1;
    background-position: 146% 0, 100% 158%, -46% 100%, 0 158%;
  }

  96% {
    opacity: 1;
    background-position: 146% 0, 100% 158%, -46% 100%, 0 -58%;
  }

  100% {
    opacity: 0;
    background-position: 146% 0, 100% 158%, -46% 100%, 0 -58%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wpk-page .wpk-button:hover::after,
  .wpk-page .wpk-button:focus-visible::after {
    animation: none;
  }
}

/* V17 - exact homepage gold and a clean responsive device composition. */
.wpk-page .wpk-text-gold {
  color: #f2d58a;
}

.wpk-page .wpk-device--laptop,
.wpk-page .wpk-device--phone,
.wpk-page .wpk-hero__platform {
  transform: none;
}

.wpk-page .wpk-hero__platform {
  right: auto;
  bottom: 33%;
  left: 2%;
  width: 85%;
  height: 18px;
  border: 1px solid rgba(242, 213, 138, .16);
  border-top-color: rgba(242, 213, 138, .34);
  border-radius: 2px 2px 14px 14px;
  background: linear-gradient(180deg, #101923 0%, #09121b 100%);
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
}

@media (min-width: 1181px) {
  .wpk-page .wpk-device--laptop {
    top: 10%;
    right: auto;
    bottom: auto;
    left: 0;
    width: 88%;
    height: auto;
    aspect-ratio: 1.55;
    border-radius: 14px;
  }

  .wpk-page .wpk-device--phone {
    top: auto;
    right: 0;
    bottom: 7%;
    left: auto;
    width: 30%;
    height: auto;
    aspect-ratio: .5;
    border-width: 5px;
    border-radius: 26px;
  }
}

@media (max-width: 1180px) {
  .wpk-page .wpk-hero__platform {
    bottom: 25%;
    left: 4%;
    width: 78%;
    height: 16px;
  }

  .wpk-page .wpk-device--laptop,
  .wpk-page .wpk-device--phone {
    transform: none;
  }
}

@media (max-width: 620px) {
  .wpk-page .wpk-hero__platform {
    bottom: 24%;
    left: 2%;
    width: 79%;
    height: 12px;
  }
}

/* V18 - stable, readable content inside both hero device mockups. */
.wpk-page .wpk-device--laptop,
.wpk-page .wpk-device--phone,
.wpk-page .wpk-hero__platform {
  transform: none !important;
}

.wpk-page .wpk-device--laptop .wpk-device__screen {
  justify-content: center;
  padding: 20px 24px;
}

.wpk-page .wpk-device--laptop .wpk-device__brand {
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.wpk-page .wpk-device--laptop .wpk-device__screen p {
  margin-bottom: 10px !important;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.02;
}

.wpk-page .wpk-device--laptop .wpk-device__screen small {
  font-size: 11px;
  line-height: 1.35;
}

.wpk-page .wpk-device--laptop .wpk-device__cta {
  margin-top: 12px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.wpk-page .wpk-device--phone .wpk-device__screen {
  justify-content: center;
  padding: 22% 10% 12%;
}

.wpk-page .wpk-device--phone .wpk-device__brand {
  margin-bottom: 18%;
  font-size: 8px;
  line-height: 1.2;
}

.wpk-page .wpk-device--phone .wpk-device__screen p {
  margin-bottom: 12% !important;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.08;
}

.wpk-page .wpk-device--phone .wpk-device__cta {
  margin-top: 8%;
  padding: 6px 7px;
  font-size: 8px;
  line-height: 1.2;
}

@media (max-width: 620px) {
  .wpk-page .wpk-device--laptop .wpk-device__screen {
    padding: 16px 18px;
  }

  .wpk-page .wpk-device--laptop .wpk-device__screen p {
    font-size: clamp(16px, 5.2vw, 21px);
  }

  .wpk-page .wpk-device--phone .wpk-device__screen p {
    font-size: 8px;
  }
}

/* V19 - compact laptop content for the 320 px edge case. */
@media (max-width: 340px) {
  .wpk-page .wpk-device--laptop .wpk-device__screen {
    padding: 12px 14px;
  }

  .wpk-page .wpk-device--laptop .wpk-device__brand {
    margin-bottom: 8px;
    font-size: 9px;
  }

  .wpk-page .wpk-device--laptop .wpk-device__screen p {
    margin-bottom: 6px !important;
    font-size: 15px;
  }

  .wpk-page .wpk-device--laptop .wpk-device__screen small {
    display: none;
  }

  .wpk-page .wpk-device--laptop .wpk-device__cta {
    margin-top: 6px;
    padding: 5px 8px;
    font-size: 9px;
  }
}

/* V20 - dark section dividers on light backgrounds for clear contrast. */
.wpk-page > section:not(.wpk-section--dark):not(.wpk-tech):not(.wpk-final-cta) .wpk-section-divider__line {
  background: linear-gradient(90deg, transparent, rgba(8, 23, 37, .48), transparent);
}

.wpk-page > section:not(.wpk-section--dark):not(.wpk-tech):not(.wpk-final-cta) .wpk-section-divider__emblem {
  border-color: rgba(8, 23, 37, .48);
  box-shadow: 0 0 18px rgba(8, 23, 37, .1);
}

.wpk-page > section:not(.wpk-section--dark):not(.wpk-tech):not(.wpk-final-cta) .wpk-section-divider__emblem::before {
  background: #081725;
  box-shadow: 0 0 8px rgba(8, 23, 37, .48), 0 0 16px rgba(8, 23, 37, .24);
}

.wpk-page > section:not(.wpk-section--dark):not(.wpk-tech):not(.wpk-final-cta) .wpk-section-divider__emblem::after {
  background: conic-gradient(
    from 0deg,
    transparent 0 228deg,
    rgba(8, 23, 37, .18) 248deg,
    #18364d 286deg,
    #081725 304deg,
    transparent 340deg 360deg
  );
}

/* V21 - final responsive corrections for technical, audience, process and pricing sections. */
@media (min-width: 841px) {
  .wpk-tech__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .wpk-tech__intro {
    max-width: 760px;
  }

  .wpk-tech__metrics {
    width: 100%;
  }

  .wpk-metric {
    min-width: 0;
    padding-inline: 18px;
  }

  .wpk-metric strong {
    font-size: clamp(1.25rem, 1.65vw, 1.55rem);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
  }
}

@media (max-width: 840px) {
  .wpk-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wpk-audience-card {
    min-height: 0;
  }

  .wpk-audience-card h3,
  .wpk-audience-card p {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
  }
}

@media (max-width: 620px) {
  .wpk-audience-grid {
    grid-template-columns: 1fr;
  }

  .wpk-timeline {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-top: 0;
    padding-left: 64px;
  }

  .wpk-timeline::before {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 24px;
    width: 1px;
    content: "";
    background: linear-gradient(180deg, rgba(183, 137, 67, .15), rgba(183, 137, 67, .7), rgba(183, 137, 67, .15));
  }

  .wpk-timeline__track {
    display: none;
  }

  .wpk-step {
    min-height: 0;
    padding: 0 0 20px;
  }

  .wpk-step > span {
    top: -3px;
    left: -56px;
  }

  .wpk-timeline .wpk-step h3 {
    font-size: 1rem;
    line-height: 1.35;
  }

  .wpk-pricing > .wpk-container {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    margin-inline: auto;
  }

  .wpk-pricing__grid,
  .wpk-pricing__grid > *,
  .wpk-pricing__cta {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
  }

  .wpk-pricing__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .wpk-pricing__factors {
    grid-template-columns: minmax(0, 1fr);
  }

  .wpk-pricing [data-reveal="left"],
  .wpk-pricing [data-reveal="right"] {
    transform: translateY(22px);
  }

  .wpk-pricing [data-reveal].is-visible {
    transform: none;
  }
}

@media (max-width: 390px) {
  .wpk-pricing > .wpk-container {
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
  }

  .wpk-pricing__cta {
    padding-inline: 20px;
  }
}

/* V22 - branded web-development mockup CTA with a mobile-safe composition. */
.wpk-page .wpk-device__cta {
  position: relative;
  overflow: hidden;
  color: #071726;
  border: 1px solid rgba(255, 240, 199, .68);
  background: linear-gradient(135deg, #b78943 0%, #f2d58a 48%, #c89545 100%);
  box-shadow: 0 8px 22px rgba(183, 137, 67, .2), inset 0 1px 0 rgba(255, 255, 255, .4);
  isolation: isolate;
}

.wpk-page .wpk-device__cta::after {
  position: absolute;
  z-index: 1;
  top: -80%;
  bottom: -80%;
  left: -90%;
  width: 62%;
  content: "";
  pointer-events: none;
  background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, .18) 38%, rgba(255, 248, 225, .9) 50%, rgba(255, 255, 255, .18) 62%, transparent 82%);
  transform: skewX(-18deg);
  animation: szaboartdesign-device-cta-shimmer 4.2s cubic-bezier(.2, .65, .25, 1) infinite;
}

@keyframes szaboartdesign-device-cta-shimmer {
  0%, 55% {
    left: -90%;
    opacity: 0;
  }

  62% {
    opacity: 1;
  }

  82%, 100% {
    left: 132%;
    opacity: 0;
  }
}

@media (max-width: 620px) {
  .wpk-page .wpk-device--laptop .wpk-device__screen {
    justify-content: center;
    padding: 12px 16px 14px;
  }

  .wpk-page .wpk-device--laptop .wpk-device__brand {
    margin-bottom: 7px;
    font-size: 8px;
    line-height: 1.1;
  }

  .wpk-page .wpk-device--laptop .wpk-device__screen p {
    margin-bottom: 6px !important;
    font-size: clamp(12px, 3.65vw, 16px);
    line-height: 1.02;
  }

  .wpk-page .wpk-device--laptop .wpk-device__screen small {
    font-size: 8px;
    line-height: 1.2;
  }

  .wpk-page .wpk-device--laptop .wpk-device__cta {
    margin-top: 7px;
    padding: 5px 8px;
    font-size: 8px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .wpk-page .wpk-device--phone .wpk-device__brand {
    font-size: 7px;
  }

  .wpk-page .wpk-device--phone .wpk-device__screen p {
    font-size: 8px;
    line-height: 1.06;
  }

  .wpk-page .wpk-device--phone .wpk-device__cta {
    padding: 5px 6px;
    font-size: 7px;
    line-height: 1.1;
  }
}

@media (max-width: 390px) {
  .wpk-page .wpk-device--laptop .wpk-device__screen {
    padding: 10px 13px 12px;
  }

  .wpk-page .wpk-device--laptop .wpk-device__screen p {
    margin-bottom: 4px !important;
    font-size: 12px;
  }

  .wpk-page .wpk-device--laptop .wpk-device__screen small {
    display: none;
  }

  .wpk-page .wpk-device--laptop .wpk-device__cta {
    margin-top: 5px;
    padding: 4px 7px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wpk-page .wpk-device__cta::after {
    animation: none;
  }
}

/* V23 - keep the desktop maintenance split fixed on the divider center during reveal. */
@media (min-width: 841px) {
  .wpk-maintenance > [data-reveal="left"],
  .wpk-maintenance > [data-reveal="right"] {
    transform: translateY(22px);
  }

  .wpk-maintenance > [data-reveal].is-visible {
    transform: none;
  }
}

/* V25 - keep the stacked maintenance card centered on mobile screens. */
@media (max-width: 620px) {
  .wpk-page .wpk-maintenance {
    width: var(--wpk-container);
    max-width: var(--wpk-container);
    margin-inline: auto;
  }
}

/* V26 - accessible interactive links inside the responsive agency mockup. */
.wpk-page a.wpk-device__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #071726;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.wpk-page a.wpk-device__cta:hover {
  color: #071726;
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 11px 28px rgba(183, 137, 67, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.wpk-page a.wpk-device__cta:focus-visible {
  color: #071726;
  outline: 2px solid #fff0c7;
  outline-offset: 3px;
}