/* ═══════════════════════════════════════════════════════════════
   wdktheme.css — WEBDOCK / OpenCart 4.0.2.3
   Elfogadott preview design alapján.
   Prefix: .wdk-  (nem ír felül agresszívan OC/Bootstrap core stílusokat)
═══════════════════════════════════════════════════════════════ */

/* ── VÁLTOZÓK ─────────────────────────────────────────────────── */
:root {
  --wdk-primary:      #0c1e40;
  --wdk-primary-dark: #070f1e;
  --wdk-secondary:    #1549a0;
  --wdk-accent:       #2563eb;
  --wdk-accent-soft:  color-mix(in srgb, var(--wdk-accent, #2563eb) 10%, white);
  --wdk-bg:           #ffffff;
  --wdk-bg-soft:      #f7f9fc;
  --wdk-text:         #1a2535;
  --wdk-muted:        #607080;
  --wdk-border:       #dde4ef;
  --wdk-radius:       8px;
  --wdk-container:    1080px;
}

/* ── ALAP ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.wdk-body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--wdk-text);
  background: var(--wdk-bg);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}
a { text-decoration: none; color: inherit; }
.wdk-wrap {
  width: min(100% - 2rem, var(--wdk-container));
  margin-inline: auto;
}

/* ── GOMBOK ───────────────────────────────────────────────────── */
.wdk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .48rem 1.15rem; font-size: .82rem; font-weight: 600;
  font-family: inherit; border-radius: var(--wdk-radius);
  border: 1.5px solid transparent; cursor: pointer;
  transition: all .17s ease; line-height: 1.4; white-space: nowrap;
}
.wdk-btn-primary { background: var(--wdk-accent); color: #fff; border-color: var(--wdk-accent); }
.wdk-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; transform: translateY(-1px); }
.wdk-btn-outline { background: transparent; color: var(--wdk-accent); border-color: var(--wdk-accent); }
.wdk-btn-outline:hover { background: var(--wdk-accent-soft); transform: translateY(-1px); }
.wdk-btn-ghost-w { background: transparent; color: rgba(255,255,255,.80); border-color: rgba(255,255,255,.30); }
.wdk-btn-ghost-w:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); }

/* ── NAVIGÁCIÓ ────────────────────────────────────────────────── */
.wdk-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 60px; background: var(--wdk-primary);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: box-shadow .25s ease;
}
.wdk-nav.wdk-nav-scrolled {
  box-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.wdk-nav-inner { height: 60px; display: flex; align-items: center; gap: 1rem; }
.wdk-logo {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  color: #fff; font-size: .92rem; font-weight: 700; letter-spacing: -.02em;
  text-decoration: none;
}
.wdk-logo-icon { width: 28px; height: 28px; flex-shrink: 0; }
/* Szöveg: WEB normál, DOCK hangsúlyos accent színnel */
.wdk-logo-text {
  display: inline-flex; align-items: baseline; gap: 0;
  font-size: .90rem; font-weight: 600; letter-spacing: .01em;
}
.wdk-logo em {
  font-style: normal; font-weight: 800; letter-spacing: -.01em;
  color: var(--wdk-featured-accent, #60a5fa);
}
.wdk-nav-links {
  display: flex; align-items: center; list-style: none;
  margin: 0 0 0 auto; padding: 0; gap: .05rem;
}
.wdk-nav-link {
  display: block; padding: .4rem .75rem;
  font-size: .79rem; font-weight: 500; color: rgba(255,255,255,.65);
  border-radius: 6px; transition: color .15s, background .15s;
}
.wdk-nav-link:hover, .wdk-nav-link.active { color: #fff; background: rgba(255,255,255,.07); }
/* CTA gomb — most a ul listán belüli li-ben van (inline a nav listában) */
.wdk-nav-cta {
  display: inline-block; padding: .38rem .95rem;
  font-size: .79rem; font-weight: 600; color: var(--wdk-primary);
  background: var(--wdk-featured-accent, #60a5fa); border-radius: var(--wdk-radius);
  transition: background .15s, transform .15s; white-space: nowrap;
  text-decoration: none;
}
.wdk-nav-cta:hover { background: var(--wdk-accent, #2563eb); transform: translateY(-1px); color: #fff; }
/* Desktop: az utolsó li (CTA) egy kis bal margint kap elválasztásnak */
.wdk-nav-links li:last-child { margin-left: .4rem; }
.wdk-nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid rgba(255,255,255,.22);
  color: #fff; padding: .3rem .55rem; border-radius: 6px;
  cursor: pointer; font-size: 1.15rem; line-height: 1;
}
@media (max-width: 767px) {
  .wdk-nav-toggle { display: flex; align-items: center; }
  .wdk-nav-links {
    display: none; position: fixed; top: 60px; left: 0; right: 0;
    background: var(--wdk-primary); flex-direction: column;
    align-items: stretch; padding: .75rem 1rem; gap: 0;
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .wdk-nav-links.wdk-nav-open { display: flex; }
  .wdk-nav-link { padding: .55rem .9rem; }
  /* Mobil: CTA teljes szélességű, kicsit kiemelve */
  .wdk-nav-links li:last-child { margin-left: 0; margin-top: .4rem; }
  .wdk-nav-cta {
    display: block; padding: .6rem .9rem; text-align: center;
    border-radius: var(--wdk-radius);
  }
}

/* ── HERO ─────────────────────────────────────────────────────── */
.wdk-hero {
  min-height: 560px; padding: 80px 0 70px;
  background:
    radial-gradient(ellipse at 72% 28%, rgba(96,165,250,.32) 0%, transparent 52%),
    radial-gradient(ellipse at 8%  82%, rgba(30,58,138,.30) 0%, transparent 44%),
    radial-gradient(ellipse at 48% 105%, rgba(7,15,30,.60) 0%, transparent 58%),
    linear-gradient(145deg, var(--wdk-hero-from, #0c1e40) 0%, var(--wdk-hero-to, #1a3f7a) 100%);
  color: #fff; overflow: hidden; position: relative;
}
/* Grain/texture overlay */
.wdk-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.04;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
}
/* Abstract geo-grid textúra — rács + csomópontok a gradiens fölé */
.wdk-hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.042) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.10) 1.5px, transparent 1.5px);
  background-size: 48px 48px, 48px 48px, 48px 48px;
  background-position: -1px -1px, -1px -1px, 23px 23px;
  /* Halványabb a szélek felé, erősebb középen-jobbra */
  -webkit-mask-image: radial-gradient(ellipse at 65% 50%, rgba(0,0,0,.75) 0%, rgba(0,0,0,.25) 55%, transparent 80%);
  mask-image:         radial-gradient(ellipse at 65% 50%, rgba(0,0,0,.75) 0%, rgba(0,0,0,.25) 55%, transparent 80%);
}
/* Video background */
.wdk-hero-video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.wdk-hero-video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--wdk-hero-from, #0c1e40) 0%, var(--wdk-hero-to, #0f2d5e) 100%);
  opacity: 0.78;
  z-index: 1;
}
/* Image darkening overlay — felül sötét, alul átlátszó; opacity inline a Twig-ből */
.wdk-hero-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0)    100%
  );
  z-index: 1;
  pointer-events: none;
}
/* Wrap and content sit above texture/video */
.wdk-hero .wdk-wrap { position: relative; z-index: 3; }
.wdk-hero-grid { display: grid; grid-template-columns: 50% 50%; gap: 2rem; align-items: center; }
/* Illustrátor nélkül: szöveg teljes szélességű */
.wdk-hero-grid--full { grid-template-columns: 1fr; }
.wdk-hero-grid--full .wdk-hero-text { max-width: 680px; }
.wdk-eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .11em; color: #93c5fd; margin-bottom: .8rem;
}

/* Rotating headline — fix magasságú doboz, nincs layout shift */
.wdk-headline-box { height: 82px; position: relative; margin-bottom: .75rem; overflow: hidden; }
.wdk-headline {
  position: absolute; top: 0; left: 0; right: 0;
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  font-weight: 600; line-height: 1.22; letter-spacing: -.03em;
  color: #fff; margin: 0;
  opacity: 0; transition: opacity .75s ease, filter .75s ease; filter: blur(4px);
}
.wdk-headline.active { opacity: 1; filter: blur(0); }
.wdk-headline em { font-style: normal; color: #93c5fd; }
/* Rotating subtitle box — szinkron a headline-nal, fix magasság = nincs layout-shift */
.wdk-subtitle-box {
  position: relative; height: 72px; overflow: hidden;
  margin-bottom: 1.3rem;
}
.wdk-subtitle-box .wdk-hero-sub {
  position: absolute; top: 0; left: 0; right: 0;
  font-size: .87rem; color: rgba(255,255,255,.62); line-height: 1.68;
  max-width: 460px; margin: 0;
  /* Truncate hosszú alcímeket — max 3 sor */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  opacity: 0; filter: blur(2px);
  transition: opacity .75s ease, filter .75s ease;
}
.wdk-subtitle-box .wdk-hero-sub.active { opacity: 1; filter: blur(0); }
/* Statikus (fallback) subtitle — ha nincs subtitle-box körülötte */
.wdk-hero-sub {
  font-size: .87rem; color: rgba(255,255,255,.62); line-height: 1.68;
  max-width: 460px; margin: 0 0 1.3rem;
}
.wdk-hero-btns { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }
/* Trust / tag sor — rotating per-item set */
.wdk-hero-trust { position: relative; min-height: 26px; margin-bottom: .5rem; }
.wdk-trust-set {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; flex-wrap: wrap; gap: .35rem .75rem;
  opacity: 0; transition: opacity .75s ease;
  pointer-events: none;            /* inactive sets nem fognak el kattintást */
}
.wdk-trust-set.active { opacity: 1; pointer-events: auto; }
/* Statikus fallback span-ok (ha nincs hero_items) */
.wdk-hero-trust > span { display: flex; align-items: center; gap: 5px; font-size: .71rem; font-weight: 500; color: rgba(255,255,255,.45); }
/* Kattintható tag link — badge stílus */
.wdk-trust-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .03em;
  padding: .18rem .6rem; border-radius: 3px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.85); text-decoration: none;
  transition: background .18s, border-color .18s, color .18s;
}
.wdk-trust-link:hover {
  background: color-mix(in srgb, var(--wdk-accent, #2563eb) 25%, transparent);
  border-color: color-mix(in srgb, var(--wdk-accent, #2563eb) 55%, transparent);
  color: #fff; text-decoration: none;
}
.wdk-trust-bullet { color: var(--wdk-featured-accent, var(--wdk-accent, #60a5fa)); font-size: .85rem; line-height: 1; }
.wdk-hero-down {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: rgba(255,255,255,.26); font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  background: none; border: none; cursor: pointer; z-index: 10;
  transition: color .2s; padding: 0;
}
.wdk-hero-down:hover { color: rgba(255,255,255,.55); }
.wdk-hero-down i { font-size: 1.1rem; animation: wdkBounce 2.4s ease infinite; }
@keyframes wdkBounce { 0%, 100% { transform: translateY(0); } 55% { transform: translateY(5px); } }

/* ── HERO DASHBOARD ───────────────────────────────────────────── */
.wdk-dash-outer { position: relative; padding: 24px 0 24px 24px; }
.wdk-dash {
  background: #fff; border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,.07), 0 20px 50px rgba(0,0,0,.50), 0 40px 90px rgba(0,0,0,.30);
  transform: perspective(1100px) rotateY(-10deg) rotateX(5deg);
  overflow: hidden; transition: transform .35s ease, box-shadow .35s ease;
}
.wdk-dash:hover {
  transform: perspective(1100px) rotateY(-5deg) rotateX(2deg) translateY(-4px);
  box-shadow: 0 8px 12px rgba(0,0,0,.10), 0 28px 64px rgba(0,0,0,.55), 0 50px 100px rgba(0,0,0,.32);
}
.wdk-dash-hd { background: var(--wdk-primary); padding: 9px 14px; display: flex; align-items: center; gap: 8px; }
.wdk-dash-dots { display: flex; gap: 5px; }
.wdk-dash-dots span { width: 9px; height: 9px; border-radius: 50%; }
.wdk-dash-dots span:nth-child(1) { background: #ff5f57; }
.wdk-dash-dots span:nth-child(2) { background: #febc2e; }
.wdk-dash-dots span:nth-child(3) { background: #28c840; }
.wdk-dash-title-text { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.65); }
.wdk-dash-date { margin-left: auto; font-size: .68rem; color: rgba(255,255,255,.32); }
.wdk-kpi-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 10px 12px; background: #f7f9fc; border-bottom: 1px solid #e8edf5; }
.wdk-kpi-box { background: #fff; border: 1px solid #e8edf5; border-radius: 7px; padding: 8px 10px; }
.wdk-kpi-lbl { font-size: .55rem; font-weight: 700; text-transform: uppercase; color: #8899aa; letter-spacing: .06em; margin-bottom: 2px; }
.wdk-kpi-val { font-size: 1.05rem; font-weight: 700; color: var(--wdk-primary); line-height: 1.1; }
.wdk-kpi-delta { font-size: .6rem; font-weight: 600; margin-top: 2px; }
.delta-up { color: #059669; } .delta-blue { color: var(--wdk-accent); }
.wdk-chart-area { padding: 10px 12px; background: #fff; border-bottom: 1px solid #eef2f8; }
.wdk-chart-lbl { font-size: .58rem; font-weight: 700; text-transform: uppercase; color: #aab; letter-spacing: .06em; margin-bottom: 7px; }
.wdk-bars { display: flex; align-items: flex-end; gap: 5px; height: 60px; }
.wdk-bar { flex: 1; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--wdk-featured-accent, #60a5fa) 20%, white); }
.wdk-bar.hi { background: var(--wdk-accent); }
.wdk-mini-list { background: #fff; padding: 6px 12px 10px; }
.wdk-mini-hd { font-size: .58rem; font-weight: 700; text-transform: uppercase; color: #aab; letter-spacing: .06em; padding: 4px 0; border-bottom: 1px solid #eef2f8; margin-bottom: 4px; }
.wdk-mini-row { display: flex; justify-content: space-between; align-items: center; padding: 3.5px 0; border-bottom: 1px solid #f5f7fb; }
.wdk-mini-row:last-child { border-bottom: none; }
.wdk-mini-name { font-size: .68rem; font-weight: 500; color: var(--wdk-text); }
.wdk-mini-val { font-size: .65rem; font-weight: 700; }
.val-green { color: #059669; } .val-blue { color: var(--wdk-accent); } .val-amber { color: #d97706; }
.wdk-float-badge {
  position: absolute; bottom: 8px; left: -4px;
  background: #fff; border: 1px solid #e8edf5; border-radius: 10px; padding: 8px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16); display: flex; align-items: center; gap: 8px; z-index: 10;
}
.wdk-float-badge i { font-size: 1rem; color: var(--wdk-accent); }
.wdk-float-badge-label { font-size: .65rem; font-weight: 500; color: var(--wdk-muted); line-height: 1.3; }
.wdk-float-badge-val { font-size: .88rem; font-weight: 700; color: #059669; }
@media (max-width: 991px) { .wdk-hero-grid { grid-template-columns: 1fr; } .wdk-dash-outer { display: none; } .wdk-illust-3d-outer { display: none; } .wdk-illust-image-outer { display: none; } .wdk-svg-slider-outer { display: none; } .wdk-headline-box { height: 74px; } .wdk-subtitle-box { height: 88px; } }
@media (max-width: 767px) { .wdk-hero { padding: 80px 0 64px; } .wdk-hero-down { display: none; } }

/* ── KÉP / SVG ILLUSZTRÁTOR ───────────────────────────────────── */
.wdk-illust-image-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 16px;
  /* Lelógás a hero aljából — negatív margin-bottom engedi */
  margin-bottom: -48px;
  align-self: flex-end;
}
/* Raszterkép */
.wdk-illust-image {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  border-radius: var(--wdk-radius, 8px);
  filter: drop-shadow(0 16px 48px rgba(0,0,0,.28));
  object-fit: contain;
}
/* SVG inline wrapper */
.wdk-illust-svg-wrap {
  width: 100%;
  max-width: 540px;
  display: block;
}
.wdk-illust-svg-wrap svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 48px rgba(0,0,0,.22));
  overflow: visible;
}

/* ── SVG SLIDER ILLUSZTRÁTOR ──────────────────────────────────── */
.wdk-svg-slider-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 0 0 0 16px;
  overflow: visible;
}
.wdk-svg-slider {
  position: relative;
  width: 100%;
  /* 1:1 arány — a jobb oszlop szélessége adja a magasságot */
  aspect-ratio: 1 / 1;
  max-width: 460px;
  overflow: visible;
}
.wdk-svg-slide {
  position: absolute;
  inset: -6%; /* belső whitespace levágása */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* duration és delay inline style-ból jön (Twig számolja az N × speed alapján) */
  animation-name: wdkSlide;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
}
.wdk-svg-slide--first {
  animation-name: wdkSlideFirst;
}
/* Statikus mód: csak az első dia látszik, nincs animáció */
.wdk-svg-slider--none .wdk-svg-slide {
  animation-name: none;
  opacity: 0;
}
.wdk-svg-slider--none .wdk-svg-slide--first {
  opacity: 1;
}
.wdk-svg-slide svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 16px 48px rgba(0,0,0,.22));
  /* CSS variable bridge: SVG belső default-ját felülírja a téma változókkal */
  --hero-accent:       var(--wdk-accent, #2563eb);
  --hero-accent-soft:  color-mix(in srgb, var(--wdk-accent, #2563eb) 15%, transparent);
  --hero-accent-faded: color-mix(in srgb, var(--wdk-accent, #2563eb) 60%, transparent);
  --hero-card-bg:      #ffffff;
  --hero-card-border:  var(--wdk-border, #d3d1c7);
  --hero-neutral:      #5f5e5a;
  --hero-neutral-soft: rgba(95,94,90,.15);
  --hero-muted:        #b4b2a9;
  --hero-line:         #d3d1c7;
}
/* Keyframe-eket a Twig generálja a tényleges N és speed alapján.
   Alap (fallback) 5 dia × 6s esetére (a szerver-side style tag után érkező
   oldal-szintű felülírás mindig érvényesül). */
@keyframes wdkSlideFirst {
  0%,16.7% { opacity:1; transform:none; }
  20%,100% { opacity:0; transform:translateY(-10px) scale(.98); }
}
@keyframes wdkSlide {
  0%,100%  { opacity:0; transform:translateY(10px) scale(.97); }
  3.3%,16.7% { opacity:1; transform:none; }
  20%      { opacity:0; transform:translateY(-10px) scale(.98); }
}
/* Szolgáltatás tab csík */
.wdk-svg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  padding: 0 0 10px;
}
.wdk-svg-tabs .wdk-tag {
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  animation-name: wdkTabFade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.wdk-svg-tabs .wdk-svg-tab--first {
  animation-name: wdkTabFadeFirst;
}
@keyframes wdkTabFadeFirst {
  0%,16.7% { opacity:1; color:#fff; background:rgba(37,99,235,.20); border-color:rgba(37,99,235,.50); }
  20%,100% { opacity:.45; color:rgba(255,255,255,.62); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
}
@keyframes wdkTabFade {
  0%,100% { opacity:.45; color:rgba(255,255,255,.62); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
  3.3%,16.7% { opacity:1; color:#fff; background:rgba(37,99,235,.20); border-color:rgba(37,99,235,.50); }
  20%     { opacity:.45; color:rgba(255,255,255,.62); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
}
/* Reduced motion — csak az első slide látható */
@media (prefers-reduced-motion: reduce) {
  .wdk-svg-slide { animation-name: none; opacity: 0; }
  .wdk-svg-slide--first { opacity: 1; }
  .wdk-svg-tabs .wdk-tag { animation-name: none; opacity: .45; }
  .wdk-svg-tabs .wdk-svg-tab--first { opacity: 1; color: #fff; background: rgba(37,99,235,.20); border-color: rgba(37,99,235,.50); }
}

/* ── 3D ILLUSTRÁTOR ───────────────────────────────────────────── */
.wdk-illust-3d-outer {
  position: relative;
  padding: 24px 0 24px 16px;
  perspective: 900px;
  perspective-origin: 50% 45%;
}
.wdk-illust-3d-scene {
  transform: rotateY(-14deg) rotateX(4deg);
  transform-style: preserve-3d;
  transition: transform .45s ease;
}
.wdk-illust-3d-scene:hover {
  transform: rotateY(-7deg) rotateX(2deg) translateY(-6px);
}
/* Fő kártya */
.wdk-illust-3d-card {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 1.15rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 24px 64px rgba(0,0,0,.48),
    0 4px 12px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.14);
  position: relative;
  overflow: hidden;
}
/* Felső fényes csík (glassmorphism top highlight) */
.wdk-illust-3d-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
/* Ragyogás blob háttérben */
.wdk-illust-3d-glow {
  position: absolute; top: -40px; right: -20px;
  width: 130px; height: 130px;
  background: radial-gradient(circle, rgba(99,102,241,.40) 0%, transparent 70%);
  pointer-events: none; border-radius: 50%;
}
/* 3D kártya fejléc */
.wdk-illust-3d-hd {
  display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem;
}
.wdk-illust-3d-title { color: rgba(255,255,255,.45); font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 2px; }
.wdk-illust-3d-subtitle { color: #fff; font-size: .84rem; font-weight: 700; }
.wdk-illust-3d-badge {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--wdk-accent, #6366f1), #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: #fff;
  box-shadow: 0 4px 12px rgba(99,102,241,.45);
}
/* Donut ring (CSS + conic-gradient) */
.wdk-illust-3d-ring-wrap { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.wdk-illust-3d-ring {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(
    var(--wdk-accent, #6366f1) 0deg 260deg,
    rgba(99,102,241,.28) 260deg 335deg,
    rgba(255,255,255,.08) 335deg 360deg
  );
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(99,102,241,.35);
  position: relative;
}
.wdk-illust-3d-ring::after {
  content: ''; position: absolute;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(12,30,64,.92);
}
.wdk-illust-3d-ring-val {
  position: relative; z-index: 1; color: #fff; font-size: .8rem; font-weight: 700; text-align: center; line-height: 1;
}
.wdk-illust-3d-kpis { flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.wdk-illust-3d-kpi { display: flex; justify-content: space-between; align-items: center; }
.wdk-illust-3d-kpi-lbl { color: rgba(255,255,255,.45); font-size: .65rem; }
.wdk-illust-3d-kpi-val { font-size: .72rem; font-weight: 700; }
/* Progress bars */
.wdk-illust-3d-bars { display: flex; flex-direction: column; gap: .45rem; }
.wdk-illust-3d-bar-row { display: flex; flex-direction: column; gap: 3px; }
.wdk-illust-3d-bar-label { display: flex; justify-content: space-between; color: rgba(255,255,255,.45); font-size: .62rem; }
.wdk-illust-3d-bar-track { background: rgba(255,255,255,.08); border-radius: 4px; height: 5px; overflow: hidden; }
.wdk-illust-3d-bar-fill { height: 100%; border-radius: 4px; }
/* Lebegő mini-kártya alul */
.wdk-illust-3d-float {
  margin-top: .65rem; margin-left: 1.5rem;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(99,102,241,.20);
  border: 1px solid rgba(99,102,241,.38);
  border-radius: 10px; padding: .42rem .7rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wdk-illust-3d-float-icon { color: #a78bfa; font-size: 1rem; }
.wdk-illust-3d-float-label { color: rgba(255,255,255,.45); font-size: .6rem; }
.wdk-illust-3d-float-val { color: #fff; font-size: .72rem; font-weight: 700; }

/* ── SZEKCIÓ ALAP ─────────────────────────────────────────────── */
.wdk-section { padding: 60px 0; }
.wdk-section-soft { background: var(--wdk-bg-soft); }
.wdk-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .11em; color: var(--wdk-accent); margin-bottom: .5rem;
}
.wdk-hd { margin-bottom: 2rem; }
.wdk-hd.center { text-align: center; }
.wdk-hd h2 { font-size: clamp(1.35rem,2.6vw,1.85rem); font-weight: 600; letter-spacing: -.03em; color: var(--wdk-primary); margin: 0 0 .45rem; line-height: 1.22; }
.wdk-hd p { font-size: .85rem; color: var(--wdk-muted); max-width: 560px; margin: 0; }
.wdk-hd.center p { margin-inline: auto; }
.wdk-oc-modules { padding: 0; }

/* ── SZOLGÁLTATÁS KÁRTYÁK ─────────────────────────────────────── */
.wdk-svc-card {
  background: var(--wdk-bg); border: 1px solid var(--wdk-border);
  border-radius: var(--wdk-radius); padding: 1.2rem;
  height: 100%; min-height: 200px; display: flex; flex-direction: column; gap: .5rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wdk-svc-card:hover { border-color: var(--wdk-accent, #2563eb); box-shadow: var(--wdk-shadow-sm, 0 4px 18px rgba(12,30,64,.08)); transform: translateY(-2px); }
/* Ikon + cím egy sorban */
.wdk-svc-head { display: flex; align-items: center; gap: .55rem; }
.wdk-svc-icon {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--wdk-accent-soft); display: flex; align-items: center;
  justify-content: center; font-size: .88rem; color: var(--wdk-accent); flex-shrink: 0;
}
.wdk-svc-card h3 { font-size: .88rem; font-weight: 600; color: var(--wdk-primary); margin: 0; line-height: 1.3; }
.wdk-svc-card p {
  font-size: .79rem; color: var(--wdk-muted); margin: 0; line-height: 1.55; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.wdk-svc-link { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; color: var(--wdk-accent); margin-top: auto; transition: gap .15s; }
.wdk-svc-link:hover { gap: 7px; }

/* ── DÍJCSOMAG KÁRTYÁK ────────────────────────────────────────── */
.wdk-price-card {
  background: var(--wdk-bg); border: 1.5px solid var(--wdk-border);
  border-radius: var(--wdk-radius); padding: 1.2rem 1.15rem 1.1rem;
  height: 100%; min-height: 440px; display: flex; flex-direction: column;
  position: relative; transition: border-color .2s, box-shadow .2s;
}
.wdk-price-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--wdk-border);
  border-radius: var(--wdk-radius) var(--wdk-radius) 0 0;
}
.wdk-price-card.featured {
  background: linear-gradient(160deg, var(--wdk-featured-from, #0c1e40), var(--wdk-featured-to, #1e3a6e));
  border-color: var(--wdk-featured-border, #2563eb);
  color: var(--wdk-featured-text, #ffffff);
  box-shadow: 0 4px 22px rgba(0,0,0,.18);
}
.wdk-price-card.featured::before { background: var(--wdk-featured-accent, #60a5fa); }
.wdk-price-card:hover { border-color: var(--wdk-accent, #2563eb); box-shadow: 0 5px 22px rgba(37,99,235,.10); }
.wdk-price-card.featured:hover { box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.wdk-price-hd { flex-shrink: 0; margin-bottom: .75rem; }
.wdk-price-tier-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .22rem; }
.wdk-price-tier { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .10em; color: var(--wdk-accent); }
.wdk-price-badge-inline {
  font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  background: var(--wdk-accent); color: #fff;
  padding: .14rem .65rem; border-radius: 20px; white-space: nowrap;
}
.wdk-price-name { font-size: .92rem; font-weight: 600; color: var(--wdk-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.wdk-price-strip {
  background: var(--wdk-bg-soft); border: 1px solid var(--wdk-border);
  border-radius: 7px; padding: .7rem .9rem; flex-shrink: 0; margin-bottom: .75rem;
}
/* ── Featured card inner elem overrides ── */
.wdk-price-card.featured .wdk-price-tier { color: var(--wdk-featured-accent, #60a5fa); }
.wdk-price-card.featured .wdk-price-badge-inline { background: var(--wdk-featured-accent, #60a5fa); color: var(--wdk-primary, #0c1e40); }
.wdk-price-card.featured .wdk-price-name { color: var(--wdk-featured-text, #ffffff); }
.wdk-price-card.featured .wdk-price-strip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }
.wdk-price-card.featured .wdk-price-item-lbl,
.wdk-price-card.featured .wdk-price-item-val { color: rgba(255,255,255,.85); }
.wdk-price-card.featured .wdk-inc-lbl { color: rgba(255,255,255,.55); }
.wdk-price-card.featured .wdk-inc-item { color: var(--wdk-featured-text, #ffffff); border-bottom-color: rgba(255,255,255,.08); }
.wdk-price-card.featured .wdk-inc-item i { color: var(--wdk-featured-accent, #60a5fa); }
.wdk-price-item-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; padding: .2rem 0;
  border-bottom: 1px solid var(--wdk-border);
}
.wdk-price-item-row:last-child { border-bottom: none; }
.wdk-price-item-lbl { font-size: .68rem; font-weight: 600; color: var(--wdk-muted); white-space: nowrap; }
.wdk-price-item-val { font-size: .72rem; color: var(--wdk-text); text-align: right; }
.wdk-inc-lbl { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--wdk-muted); margin-bottom: .35rem; flex-shrink: 0; }
.wdk-inc-list { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.wdk-inc-item {
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; color: var(--wdk-text); font-weight: 400;
  padding: .25rem 0; border-bottom: 1px solid var(--wdk-bg-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wdk-inc-item:last-child { border-bottom: none; }
.wdk-inc-item i { color: var(--wdk-accent); font-size: .78rem; flex-shrink: 0; }
.wdk-price-cta { margin-top: auto; padding-top: .65rem; flex-shrink: 0; }
.wdk-price-cta a { display: flex; align-items: center; justify-content: center; }
.wdk-price-note { text-align: center; font-size: .72rem; color: var(--wdk-muted); margin-top: 1.1rem; line-height: 1.6; }

/* ── COUNTER ──────────────────────────────────────────────────── */
.wdk-counter { background: var(--wdk-primary); padding: 42px 0; }
.wdk-counter-grid { display: grid; grid-template-columns: repeat(4,1fr); }
@media (max-width: 767px) { .wdk-counter-grid { grid-template-columns: repeat(2,1fr); } }
.wdk-cnt-item { text-align: center; padding: .75rem .5rem; border-right: 1px solid rgba(255,255,255,.06); }
.wdk-cnt-item:last-child { border-right: none; }
.wdk-cnt-num { font-size: 1.9rem; font-weight: 700; color: #fff; letter-spacing: -.05em; line-height: 1; margin-bottom: .3rem; }
.wdk-cnt-num .unit { font-size: 1.05rem; font-weight: 600; }
.wdk-cnt-lbl { font-size: .62rem; font-weight: 500; color: rgba(255,255,255,.40); text-transform: uppercase; letter-spacing: .07em; line-height: 1.4; }
.wdk-counter-note { text-align: center; font-size: .68rem; color: rgba(255,255,255,.22); font-style: italic; margin-top: .75rem; margin-bottom: 0; }

/* ── TILE KÁRTYÁK (Szakmai fókusz + Építőipari) ───────────────── */
.wdk-tile {
  background: var(--wdk-bg); border: 1px solid var(--wdk-border);
  border-radius: var(--wdk-radius); padding: 1.2rem;
  height: 100%; min-height: 180px; display: flex; flex-direction: column; gap: .45rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wdk-tile:hover { border-color: var(--wdk-accent, #2563eb); box-shadow: var(--wdk-shadow-sm, 0 4px 16px rgba(12,30,64,.08)); transform: translateY(-2px); }
/* Ikon + cím egy sorban (tile-ok) */
.wdk-tile-head { display: flex; align-items: center; gap: .55rem; }
.wdk-tile-icon {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--wdk-accent-soft); display: flex; align-items: center;
  justify-content: center; font-size: .88rem; color: var(--wdk-accent); flex-shrink: 0;
}
.wdk-tile h3 { font-size: .88rem; font-weight: 600; color: var(--wdk-primary); margin: 0; line-height: 1.3; }
.wdk-tile p { font-size: .78rem; color: var(--wdk-muted); margin: 0; line-height: 1.55; flex: 1; }
.wdk-tile:not(.wdk-tile-dark) p {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.wdk-tile-note { font-size: .67rem; color: var(--wdk-muted); font-style: italic; border-top: 1px solid var(--wdk-border); padding-top: .45rem; margin-top: .15rem; }
.wdk-tile-cta { width: fit-content; font-size: .75rem; padding: .38rem .85rem; margin-top: .8rem; }
.wdk-tile-dark { background: var(--wdk-primary); border-color: var(--wdk-primary); color: #fff; }
.wdk-tile-dark:hover { border-color: var(--wdk-secondary); box-shadow: 0 4px 20px rgba(0,0,0,.22); transform: translateY(-2px); }
.wdk-tile-dark .wdk-tile-head .wdk-tile-icon { background: rgba(255,255,255,.10); color: #60a5fa; }
.wdk-tile-dark h3 { color: #fff; }
.wdk-tile-dark p { color: rgba(255,255,255,.62); }
.wdk-tile-dark .wdk-tile-note { color: rgba(255,255,255,.32); border-color: rgba(255,255,255,.10); }
.wdk-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .1rem; }
.wdk-tag {
  display: inline-block;
  font-size: .60rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: .18rem .55rem; border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--wdk-accent, #2563eb) 35%, transparent);
  color: var(--wdk-accent, #2563eb);
  background: color-mix(in srgb, var(--wdk-accent, #2563eb) 7%, white);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  cursor: pointer;
}
a.wdk-tag:hover, a.wdk-tag:focus {
  background: color-mix(in srgb, var(--wdk-accent, #2563eb) 15%, white);
  border-color: color-mix(in srgb, var(--wdk-accent, #2563eb) 55%, transparent);
  color: var(--wdk-accent, #2563eb);
}
/* sötét hátterű csempéken fehér tag marad */
.wdk-tile-dark .wdk-tag { color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.30); }

/* ── SZAKMAI FÓKUSZ GRID ──────────────────────────────────────── */
.wdk-focus-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.wdk-focus-feat { grid-column: 1; grid-row: 1 / span 2; }
@media (max-width: 991px) { .wdk-focus-grid { grid-template-columns: 1fr 1fr; } .wdk-focus-feat { grid-column: 1 / span 2; grid-row: auto; } }
@media (max-width: 575px) { .wdk-focus-grid { grid-template-columns: 1fr; } .wdk-focus-feat { grid-column: auto; } }

/* ── ÉPÍTŐIPARI GRID ──────────────────────────────────────────── */
.wdk-construct-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.wdk-construct-feat { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 991px) { .wdk-construct-grid { grid-template-columns: 1fr 1fr; } .wdk-construct-feat { grid-column: 1 / span 2; grid-row: auto; } }
@media (max-width: 575px) { .wdk-construct-grid { grid-template-columns: 1fr; } .wdk-construct-feat { grid-column: auto; } }

/* ── KAPCSOLAT ŰRLAP ──────────────────────────────────────────── */
.wdk-contact-card {
  background: var(--wdk-bg); border: 1px solid var(--wdk-border);
  border-radius: var(--wdk-radius); padding: 2rem 2.2rem;
  box-shadow: 0 2px 20px rgba(0,0,0,.05);
}
.wdk-form-label { display: block; font-size: .78rem; font-weight: 600; color: var(--wdk-text); margin-bottom: .35rem; }
.wdk-req { color: var(--wdk-accent); }
.wdk-form-ctrl {
  width: 100%; padding: .52rem .88rem;
  font-size: .83rem; font-family: inherit; color: var(--wdk-text);
  background: var(--wdk-bg); border: 1.5px solid var(--wdk-border);
  border-radius: var(--wdk-radius); outline: none;
  transition: border-color .15s, box-shadow .15s; appearance: none; line-height: 1.5;
}
.wdk-form-ctrl:focus { border-color: var(--wdk-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
.wdk-form-ctrl::placeholder { color: #b0bac8; }
textarea.wdk-form-ctrl { resize: vertical; min-height: 130px; }
.wdk-form-feedback { display: none; padding: .65rem 1rem; border-radius: var(--wdk-radius); font-size: .82rem; font-weight: 500; }
.wdk-form-feedback.wdk-feedback-success { display: flex; align-items: center; gap: 7px; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.wdk-form-feedback.wdk-feedback-error   { display: flex; align-items: center; gap: 7px; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.wdk-privacy-note { font-size: .72rem; color: var(--wdk-muted); display: flex; align-items: center; gap: 4px; }
.wdk-privacy-note i { color: var(--wdk-accent); }
@keyframes wdkSpin { to { transform: rotate(360deg); } }
.wdk-spin { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: wdkSpin .65s linear infinite; flex-shrink: 0; }

/* ── FOOTER ───────────────────────────────────────────────────── */
.wdk-footer { background: var(--wdk-primary-dark); color: rgba(255,255,255,.50); padding: 50px 0 22px; }
.wdk-footer-logo { display: flex; align-items: center; gap: 7px; color: #fff; font-size: .86rem; font-weight: 600; margin-bottom: .55rem; letter-spacing: .01em; }
.wdk-footer-logo em { font-style: normal; font-weight: 800; color: var(--wdk-featured-accent, #60a5fa); letter-spacing: -.01em; }
.wdk-footer-desc { font-size: .77rem; line-height: 1.6; max-width: 210px; margin-bottom: .9rem; }
.wdk-footer-placeholder { font-size: .7rem; color: rgba(255,255,255,.22); font-style: italic; margin: 0; }
.wdk-footer-group-title { color: rgba(255,255,255,.70); font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin-bottom: .6rem; }
.wdk-footer-list { list-style: none; padding: 0; margin: 0; }
.wdk-footer-list li { margin-bottom: .3rem; }
.wdk-footer-list a { font-size: .75rem; color: rgba(255,255,255,.38); transition: color .15s; }
.wdk-footer-list a:hover { color: rgba(255,255,255,.80); }
.wdk-footer-bottom { margin-top: 2.25rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.06); display: flex; flex-wrap: wrap; gap: .4rem; justify-content: space-between; align-items: center; font-size: .68rem; }
.wdk-footer-legal a { color: rgba(255,255,255,.28); margin-left: .9rem; transition: color .15s; }
.wdk-footer-legal a:hover { color: rgba(255,255,255,.65); }

/* ── SCROLL-TO-TOP ────────────────────────────────────────────── */
#wdkScrollTop {
  position: fixed; bottom: 22px; right: 22px; width: 38px; height: 38px;
  background: var(--wdk-accent); color: #fff; border: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: .95rem; z-index: 999; opacity: 0; transform: translateY(10px);
  transition: opacity .22s, transform .22s, background .15s;
  box-shadow: 0 4px 14px rgba(37,99,235,.28);
}
#wdkScrollTop.show { opacity: 1; transform: translateY(0); }
#wdkScrollTop:hover { background: #1d4ed8; transform: translateY(-2px); }

/* ── GOMB VARIÁNS: ghost (világos háttéren) ────────────────────── */
.wdk-btn-ghost { background: transparent; color: var(--wdk-primary,#0c1e40); border-color: var(--wdk-border,#dde4ef); }
.wdk-btn-ghost:hover { background: var(--wdk-bg-soft,#f7f9fc); border-color: var(--wdk-muted,#607080); }

/* ── SZEKCIÓ LÁBLÉC — "összes" link sáv ───────────────────────── */
.wdk-section-footer {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
  margin-top: 1rem;
  border-top: 1px solid var(--wdk-border,#dde4ef);
}