/* ==========================================================================
   Webrakéta Referenciák — frontend CSS  v7
   Lovable design spec alapján, önálló (nincs theme-dependency).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokenek (theme-ből örököl, fallback ha nincs)
   -------------------------------------------------------------------------- */
:root {
  --wr-paper:         var(--paper, #FBFAF7);
  --wr-ink:           var(--ink, #1B3C6F);
  --wr-ink-soft:      var(--ink-soft, #4B5A75);
  --wr-coral:         var(--coral, #F03A47);
  --wr-line:          var(--line, #DDE0E6);
  --wr-secondary:     var(--secondary, #F1F2F5);
  --wr-muted:         var(--muted-foreground, #6B7280);
  --wr-shadow-soft:   0 8px 32px -12px rgba(27,60,111,.15);
  --wr-shadow-launch: 0 12px 32px -10px rgba(240,58,71,.45);
  --wr-font-display:  "Space Grotesk", system-ui, sans-serif;
  --wr-font-sans:     "Inter", system-ui, sans-serif;
  --wr-font-mono:     "JetBrains Mono", ui-monospace, monospace;
}

/* --------------------------------------------------------------------------
   Alapok
   -------------------------------------------------------------------------- */
.wr-ref-main {
  background: var(--wr-paper);
  color: var(--wr-ink);
  font-family: var(--wr-font-sans);
  -webkit-font-smoothing: antialiased;
}
.wr-ref-main * { box-sizing: border-box; }

.wr-ref-wrap {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 1024px) {
  .wr-ref-wrap { padding-left: 40px; padding-right: 40px; }
}

.wr-ref-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--wr-font-mono);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wr-coral);
}
@media (min-width: 1024px) {
  .wr-ref-eyebrow { font-size: .875rem; }
}
.wr-ref-accent { color: var(--wr-coral); }

/* --------------------------------------------------------------------------
   Hero szekció — Lovable spec (trajectory-grid + SVG ív + tartalom)
   -------------------------------------------------------------------------- */
.wr-ref-hero {
  position: relative;
  overflow: hidden;
  background: var(--wr-paper);
  border-bottom: 1px solid var(--wr-line);
}

/* Pontrács háttér */
.wr-ref-hero__grid {
  position: absolute;
  inset: 0;
  opacity: .60;
  pointer-events: none;
  background-image:
    linear-gradient(to right, oklch(0.34 0.09 260 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.34 0.09 260 / 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* SVG ívek */
.wr-ref-hero__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wr-ref-hero__arc-path {
  filter: drop-shadow(0 0 8px oklch(0.63 0.22 25 / 0.4));
}
.wr-ref-hero__arc--desktop { display: none; }
.wr-ref-hero__arc--mobile  { display: block; }
@media (min-width: 768px) {
  .wr-ref-hero__arc--desktop { display: block; }
  .wr-ref-hero__arc--mobile  { display: none; }
}

/* Tartalom konténer (kiegészíti a .wr-ref-wrap-ot) */
.wr-ref-hero__inner {
  position: relative;
  padding-top: 64px;
  padding-bottom: 80px;
}
@media (min-width: 1024px) {
  .wr-ref-hero__inner {
    padding-top: 96px;
    padding-bottom: 112px;
  }
}

/* Eyebrow ::before — 28px korall vonal */
.wr-ref-hero .wr-ref-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--wr-coral);
  flex-shrink: 0;
}

/* H1 */
.wr-ref-hero__title {
  font-family: var(--wr-font-display);
  font-weight: 600;
  /* Aloldal-konzisztencia: hero-service token (62px), mint a többi aloldal H1 (Ernő, 2026-09). */
  letter-spacing: var(--wr-ls-hero, -0.035em);
  font-size: var(--wr-font-hero-service);
  line-height: var(--wr-lh-hero, 1.02);
  max-width: 56rem;
  color: var(--wr-ink);
  margin: 20px 0 0;
}

/* Lead */
.wr-ref-lead {
  font-size: 1.125rem;
  color: var(--wr-muted);
  max-width: 42rem;
  line-height: 1.6;
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   Szűrő sáv
   -------------------------------------------------------------------------- */
.wr-ref-filter {
  border-top: 1px solid var(--wr-line);
  border-bottom: 1px solid var(--wr-line);
  background: var(--wr-paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.wr-ref-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
}
@media (min-width: 1024px) { .wr-ref-filter__row { padding: 16px 40px; } }

.wr-ref-filter__label {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wr-muted);
  margin-right: 12px;
  white-space: nowrap;
}

.wr-ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--wr-line);
  background: #fff;
  color: var(--wr-ink);
  border-radius: 999px;
  font-size: 14px;
  font-family: var(--wr-font-sans);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  text-decoration: none;
  appearance: none;
}
.wr-ref-chip:hover { border-color: var(--wr-ink); }
.wr-ref-chip.is-active {
  border-color: var(--wr-ink);
  background: var(--wr-ink);
  color: var(--wr-paper);
}

.wr-ref-chip__count {
  font-family: var(--wr-font-mono);
  font-size: 10px;
  color: var(--wr-muted);
  transition: color .2s;
}
.wr-ref-chip.is-active .wr-ref-chip__count { color: rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   Lista / Grid wrapper
   -------------------------------------------------------------------------- */
.wr-ref-list { padding: 56px 0 80px; }
@media (min-width: 1024px) { .wr-ref-list { padding: 80px 0 96px; } }

/* --------------------------------------------------------------------------
   Kártya — alap
   -------------------------------------------------------------------------- */
.wr-ref-card {
  background: #fff;
  border: 1px solid var(--wr-line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.wr-ref-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wr-shadow-soft);
}

.wr-ref-card__media {
  display: block;
  padding: 16px 16px 0;
  text-decoration: none;
}

.wr-ref-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.wr-ref-card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: flex-start;
}

.wr-ref-card__meta {
  font-family: var(--wr-font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wr-muted);
  margin: 0;
}

.wr-ref-card__title {
  font-family: var(--wr-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
  margin: 4px 0 0;
  color: var(--wr-ink);
}
.wr-ref-card__title-link {
  text-decoration: none;
  color: inherit;
}
.wr-ref-card:hover .wr-ref-card__title { color: var(--wr-coral); }

.wr-ref-card__tagline {
  font-size: 14px;
  color: var(--wr-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wr-ref-card__lead {
  font-size: 15px;
  color: var(--wr-ink-soft);
  margin: 0;
  line-height: 1.65;
}

.wr-ref-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--wr-line);
}

.wr-ref-card__ext {
  color: rgba(27,60,111,.4);
  transition: color .2s;
  padding: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wr-ref-card__ext:hover { color: var(--wr-coral); }

/* Small chips (card label) */
.wr-ref-chip-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--wr-line);
  border-radius: 999px;
  font-size: 11px;
  color: var(--wr-ink);
  background: var(--wr-secondary);
}
.wr-ref-chip-sm--coral {
  border-color: rgba(240,58,71,.4);
  color: var(--wr-coral);
  background: #fff;
}

/* --------------------------------------------------------------------------
   Kiemelt kártya (featured)
   -------------------------------------------------------------------------- */
.wr-ref-card--featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 24px;
  border-radius: 24px;
  margin-bottom: 48px;
  transition: box-shadow .3s ease;
}
@media (min-width: 1024px) {
  .wr-ref-card--featured {
    grid-template-columns: 7fr 5fr;
    gap: 48px;
    padding: 40px;
  }
}
.wr-ref-card--featured .wr-ref-card__media { padding: 0; }
.wr-ref-card--featured .wr-ref-card__body  { padding: 0 0 0 0; }

/* Eyebrow ::before — 28px korall vonal (megegyezik a hero-val) */
.wr-ref-card--featured .wr-ref-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--wr-coral);
  flex-shrink: 0;
}

/* Cím a featured kártyán */
.wr-ref-card--featured .wr-ref-card__title {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-top: 16px;
  transition: color .3s ease;
}

/* Meta sor — tipus · iparág · kategoriak */
.wr-ref-card__type-row {
  font-family: var(--wr-font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wr-muted);
  margin: 12px 0 0;
}

/* Featured tagline (rövid leírás) */
.wr-ref-card--featured .wr-ref-card__tagline {
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
  color: oklab(0.339995 -0.0156334 -0.0886214 / 0.8);
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  margin-top: 20px;
}

/* Featured lead (hosszabb bevezető) */
.wr-ref-card--featured .wr-ref-card__lead {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: lab(37.25 -1.3974 -10.8985);
  margin-top: 16px;
}

@media (max-width: 767px) {
  .wr-ref-card--featured .wr-ref-card__tagline {
    font-size: 16px;
    line-height: 26px;
  }
  .wr-ref-card--featured .wr-ref-card__lead {
    font-size: 15px;
    line-height: 24px;
  }
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */
.wr-ref-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px)  { .wr-ref-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wr-ref-grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   Stat dobozok (featured kártya)
   -------------------------------------------------------------------------- */
.wr-ref-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.wr-ref-stat {
  padding: 12px;
  border: 1px solid var(--wr-line);
  background: rgba(241,242,245,.5);
  border-radius: 12px;
}
.wr-ref-stat__value {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--wr-coral);
}
.wr-ref-stat__label {
  margin-top: 4px;
  font-family: var(--wr-font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wr-muted);
}

/* --------------------------------------------------------------------------
   Akció sor (featured kártyán)
   -------------------------------------------------------------------------- */
.wr-ref-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.wr-ref-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wr-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}
.wr-ref-link:hover { color: var(--wr-coral); }

.wr-ref-link-ext {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wr-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color .2s;
}
.wr-ref-link-ext span {
  font-family: var(--wr-font-mono);
  font-size: 11px;
}
.wr-ref-link-ext:hover { color: var(--wr-coral); }

/* --------------------------------------------------------------------------
   Mac Browser Mockup  (.wr-mockup)
   Teljesen CSS-alapú, 0 képfájl.
   -------------------------------------------------------------------------- */
.wr-mockup {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(26,55,102,.40);
  background: #1a3766;
  box-shadow: var(--wr-shadow-soft);
}

.wr-mockup__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: #1a3766;
}

.wr-mockup__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
}

.wr-mockup__url {
  margin-left: 8px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 12px;
  border-radius: 999px;
  background: #314b76;
  font-family: var(--wr-font-mono);
  font-size: 10px;
  color: rgba(255,255,255,.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-mockup__url-dot { color: #FF7A73; }

.wr-mockup__canvas {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1a3766;
  container-type: size;
}

.wr-mockup__canvas img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: top center;
  display: block;
  transform: translate3d(0, 0, 0);
  transition: transform 14000ms ease-in-out;
  will-change: transform;
  backface-visibility: hidden;
}

/* GPU-gyorsított görgetés (nem object-position → nincs szaggatás) */
@supports (height: 100cqh) {
  .wr-mockup:hover .wr-mockup__canvas img,
  .wr-mockup:focus-within .wr-mockup__canvas img {
    transform: translate3d(0, min(0px, calc(100cqh - 100%)), 0);
  }
}

/* Fallback régi böngészőkre */
@supports not (height: 100cqh) {
  .wr-mockup__canvas img {
    height: 100%;
    min-height: 0;
    transition: object-position 14000ms ease-in-out;
  }
  .wr-mockup:hover .wr-mockup__canvas img { object-position: bottom center; }
}

@media (prefers-reduced-motion: reduce) {
  .wr-mockup__canvas img { transition: none; }
}

/* Kis méret (grid kártyán) */
.wr-mockup--sm .wr-mockup__chrome {
  padding: 6px 8px;
  gap: 4px;
}
.wr-mockup--sm .wr-mockup__dot { width: 8px; height: 8px; }
.wr-mockup--sm .wr-mockup__url { height: 16px; font-size: 9px; padding: 0 8px; }

/* --------------------------------------------------------------------------
   iPhone Mockup  (.wr-phone) — single oldalon
   -------------------------------------------------------------------------- */
.wr-phone {
  width: 180px;
  aspect-ratio: 9 / 19.5;
  border-radius: 36px;
  padding: 8px;
  background: linear-gradient(180deg, #1c1c1e, #2c2c2e);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08);
  flex-shrink: 0;
  position: relative;
}

.wr-phone::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: #000;
  border-radius: 999px;
  z-index: 2;
}

.wr-phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: #000;
}

.wr-phone__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* --------------------------------------------------------------------------
   CTA blokk (lista alján)
   -------------------------------------------------------------------------- */
.wr-ref-cta {
  margin-top: 80px;
  border: 1px solid var(--wr-line);
  background: rgba(241,242,245,.4);
  border-radius: 24px;
  padding: 40px;
  text-align: center;
}
@media (min-width: 1024px) { .wr-ref-cta { padding: 56px; } }

.wr-ref-cta__title {
  font-family: var(--wr-font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  margin: 16px 0 12px;
  letter-spacing: -0.025em;
  color: var(--wr-ink);
}

.wr-ref-cta p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--wr-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.wr-ref-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.wr-ref-btn-launch {
  display: inline-flex;
  align-items: center;
  gap: 9.6px;
  padding: 15.2px 22.4px;
  background: var(--wr-coral);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--wr-font-sans);
  font-weight: 500;
  font-size: 16px;
  box-shadow: 0 18px 50px -16px rgba(240,58,71,.45);
  transition: transform .25s ease, background .25s ease;
}
.wr-ref-btn-launch:hover {
  transform: translateY(-2px);
  background: #e42b3a;
  color: #fff;
}

.wr-ref-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9.6px;
  padding: 15.2px 22.4px;
  border: 1px solid var(--wr-ink);
  color: var(--wr-ink);
  background: transparent;
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--wr-font-sans);
  font-weight: 500;
  font-size: 16px;
  transition: background .25s ease, color .25s ease;
}
.wr-ref-btn-ghost:hover { background: var(--wr-ink); color: #fff; }

/* --------------------------------------------------------------------------
   Tom szekció (üres állapot)
   -------------------------------------------------------------------------- */
.wr-ref-empty {
  padding: 80px;
  text-align: center;
  color: var(--wr-muted);
}

/* ==========================================================================
   SINGLE — referencia adatlap
   ========================================================================== */
.wr-single {
  background: var(--wr-paper);
  color: var(--wr-ink);
  font-family: var(--wr-font-sans);
  -webkit-font-smoothing: antialiased;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.wr-single * { box-sizing: border-box; }

/* Téma wrapper padding / margin eltávolítása a referencia single oldalon */
body.single-wr_referencia .site-content,
body.single-wr_referencia .site-main,
body.single-wr_referencia #main,
body.single-wr_referencia main,
body.single-wr_referencia #primary,
body.single-wr_referencia #content,
body.single-wr_referencia #page,
body.single-wr_referencia .hfeed {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Footer felső margin/padding nullázása */
body.single-wr_referencia #colophon,
body.single-wr_referencia .site-footer,
body.single-wr_referencia footer,
body.single-wr_referencia #footer,
body.single-wr_referencia .footer-area,
body.single-wr_referencia .ast-footer-overlay {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Breadcrumb */
.wr-single__breadcrumb {
  border-bottom: 1px solid var(--wr-line);
  padding: 16px 0;
}
.wr-single__bc-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1024px) { .wr-single__bc-inner { padding: 0 40px; } }
.wr-single__breadcrumb a {
  font-size: 14px;
  color: var(--wr-muted);
  text-decoration: none;
  font-family: var(--wr-font-mono);
  letter-spacing: .04em;
}
.wr-single__breadcrumb a:hover { color: var(--wr-coral); }

/* Hero */
/* ═══════════════════════════════════════════════════════════════
   HERO — pixel-pontos spec alapján (Lovable design tokens)
   ═══════════════════════════════════════════════════════════════ */
.wr-single__hero {
  position: relative;
  overflow: hidden;
  background: var(--wr-paper);
  border-bottom: 1px solid var(--wr-line);
}

/* Trajectory SVG wrapper */
.wr-single__hero .wr-trajectory {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Szaggatott vonal — statikus, halvány ink */
.wr-single__hero .wr-trajectory-dotted {
  fill: none;
  stroke: rgba(27,60,111,.18);
  stroke-width: 1;
  stroke-dasharray: 3 8;
}

/* Piros animált ív — alapállapot */
.wr-single__hero .wr-arc-path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 8px oklch(0.63 0.22 25 / .4));
}

/* Piros ív — animáció az .is-visible osztály után */
.wr-single__hero.is-visible .wr-arc-path {
  animation: wrRefArcDraw 4s cubic-bezier(.2,.8,.2,1) 1s forwards;
}

@keyframes wrRefArcDraw {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  10%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Desktop/mobil váltás */
.wr-single__hero .wr-trajectory-dotted--mobile,
.wr-single__hero .wr-arc-path--mobile { display: none; }

@media (max-width: 767px) {
  .wr-single__hero .wr-trajectory-dotted--desktop,
  .wr-single__hero .wr-arc-path--desktop { display: none; }
  .wr-single__hero .wr-trajectory-dotted--mobile,
  .wr-single__hero .wr-arc-path--mobile  { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .wr-single__hero .wr-arc-path {
    animation: none !important;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Inner wrapper a trajectory fölé */
.wr-single__hero-inner { z-index: 2; }

/* Pontrácsos háttér — 64×64px rácsháló, opacity 0.6 */
.wr-single__hero-grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background-image:
    linear-gradient(to right,  rgba(27,60,111,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27,60,111,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

/* Inner wrapper — padding + 12-col grid */
.wr-single__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

/* Visszalink — a grid FÖLÖTT */
.wr-single .wr-single__back-link,
.wr-single .wr-single__back-link:link,
.wr-single .wr-single__back-link:visited {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--wr-font-mono) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--wr-muted) !important;
  text-decoration: none !important;
  transition: color .15s ease !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.wr-single .wr-single__back-link:hover,
.wr-single .wr-single__back-link:focus { color: var(--wr-coral) !important; }
.wr-single__back-link svg { flex-shrink: 0; width: 14px; height: 14px; }

/* Grid — mobil 1 oszlop, desktop 12-col */
.wr-single__hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 32px;
  align-items: start;
}

/* Szöveg + kép oszlopok */
.wr-single__hero-text { grid-column: span 12; }
.wr-single__hero-img  { grid-column: span 12; position: relative; }

@media (min-width: 1024px) {
  .wr-single__hero-inner { padding: 80px 40px 96px; }
  .wr-single__hero-grid  { grid-template-columns: repeat(12, 1fr); gap: 56px; }
  .wr-single__hero-text  { grid-column: span 6; }
  .wr-single__hero-img   { grid-column: span 6; }
}

/* ── MOBIL hero elrendezés (<1024px) ─────────────────────────────────────
   Sorrend: eyebrow → h1 → tagline → KÉP → lead → attr-row → ctas
   A hero-text display:contents → gyerekei közvetlen flex-itemek lesznek.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .wr-single__hero-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* hero-text "eltűnik" → gyerekei a flex közvetlen elemei */
  .wr-single__hero-text {
    display: contents;
  }

  /* Sorrend mobilon */
  .wr-single__hero .wr-ref-eyebrow      { order: 1; }
  .wr-single__hero .wr-single__title    { order: 2; }
  .wr-single__hero .wr-single__tagline  { order: 3; }
  .wr-single__hero .wr-single__hero-img { order: 4; }
  .wr-single__hero .wr-single__lead     { order: 5; }
  .wr-single__hero .wr-single__attr-row { order: 6; margin-top: 12px; padding-top: 32px; }
  .wr-single__hero .wr-single__ctas     { order: 7; margin-top: 32px; }

  /* Elsődleges CTA gomb rejtve mobilon (URL a meta gridben elérhető) */
  .wr-ref-btn-launch { display: none !important; }

  /* Meta blokk label: 10px / letter-spacing 0.14em mobilon */
  .wr-single__attr-label {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

/* ── Eyebrow ── */
.wr-single .wr-ref-eyebrow,
.wr-single__hero-text .wr-ref-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--wr-font-mono) !important;
  font-size: 12.48px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--wr-coral) !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.wr-single .wr-ref-eyebrow::before,
.wr-single__hero-text .wr-ref-eyebrow::before {
  content: "" !important;
  display: inline-block !important;
  width: 28px !important;
  height: 1px !important;
  background: var(--wr-coral) !important;
  flex-shrink: 0 !important;
}
@media (min-width: 1024px) {
  .wr-single .wr-ref-eyebrow,
  .wr-single__hero-text .wr-ref-eyebrow { font-size: 14px !important; }
}

/* Szaggatott díszvonal (dekoratív, megtartva) */
.wr-single__dashed-line {
  display: block;
  width: 100%;
  margin: 16px 0 0;
  overflow: hidden;
  line-height: 0;
}
.wr-single__dashed-line span {
  display: block;
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(27,60,111,.2) 0px,
    rgba(27,60,111,.2) 4px,
    transparent 4px,
    transparent 10px
  );
}

/* ── H1 ── */
.wr-single__title {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-size: clamp(2.5rem, 6vw, 5.5rem) !important;
  line-height: 0.98 !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  color: #1B3C6F !important;
  margin: 20px 0 0 !important;
}

/* Animált piros csík a h1 alatt */
.wr-single__title-line {
  display: block !important;
  height: 3px !important;
  width: 0;
  max-width: 80px;
  background: var(--wr-coral) !important;
  border-radius: 2px;
  margin: 14px 0 0;
  animation: wr-red-line .65s .2s ease forwards !important;
}
@keyframes wr-red-line {
  from { width: 0; }
  to   { width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .wr-single__title-line { animation: none !important; width: 80px; }
}

/* ── Tagline (rövid alcím, h1 alatt) ── */
.wr-single__tagline {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: rgba(27,60,111,.8) !important;
  margin: 16px 0 0 !important;
}

/* ── Lead (leíró bekezdés) ── */
.wr-single__lead {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  color: var(--wr-muted) !important;
  max-width: 36rem !important;
  margin: 20px 0 0 !important;
}

/* ── CTA sor ── */
.wr-single__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

/* Gomb ikon */
.wr-btn-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* ── Attribútum sáv (meta blokk): Iparág | Típus | Év | URL ── */
.wr-single__attr-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--wr-line);
}
@media (min-width: 640px) {
  .wr-single__attr-row { grid-template-columns: repeat(4, 1fr); }
}

.wr-single__attr {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wr-single__attr-label {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wr-muted);
}
.wr-single__attr-val {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--wr-ink);
  margin-top: 4px;
}
.wr-single__attr-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--wr-ink);
  text-decoration: none;
  margin-top: 4px;
}
.wr-single__attr-link:hover { color: var(--wr-coral); }

/* ── Hero jobb oldal: kép ── */
/* Mögöttes rácsos overlay a képen */
.wr-single__hero-img::before {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 24px;
  opacity: .5;
  background-image:
    linear-gradient(to right,  rgba(27,60,111,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27,60,111,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.wr-single__hero-img img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  border: none;
  border-radius: 0;
  filter: drop-shadow(0 30px 50px rgba(27,60,111,.18));
}

/* Stats sáv */
.wr-single__stats-bar {
  background: var(--wr-ink);
  color: #fff;
  padding: 32px 0;
}
.wr-single__stats-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  text-align: center;
  align-items: center;
  justify-items: center;
}
@media (min-width: 640px) {
  .wr-single__stats-inner {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px;
    justify-items: unset;
  }
}
@media (min-width: 1024px) { .wr-single__stats-inner { padding: 0 40px; } }

.wr-stat__val {
  display: block;
  font-family: var(--wr-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--wr-coral);
  line-height: 1;
}
.wr-stat__lbl {
  display: block;
  font-family: var(--wr-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: 8px;
}

/* Fő tartalom szekcióhoz közös wrap */
.wr-single__body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px 80px;
}
@media (min-width: 1024px) { .wr-single__body { padding: 0 40px 80px; } }

.wr-single__h2 {
  font-family: var(--wr-font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--wr-ink);
}

/* Intro 2 oszlop */
.wr-single__intro {
  padding: 64px 0;
  border-top: 1px solid var(--wr-line);
}
.wr-single__intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) {
  .wr-single__intro-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* Intro oszlop — eyebrow (kis mono felirat) */
.wr-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wr-font-mono);
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wr-coral);
  margin-bottom: 16px;
}
.wr-intro__eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--wr-coral);
  flex-shrink: 0;
}

/* Intro h2 */
.wr-intro__h2 {
  font-family: var(--wr-font-display);
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--wr-ink);
  margin: 0 0 8px;
  line-height: 1.15;
}

/* Piros vízszintes vonal az intro h2 alatt */
.wr-intro__line {
  width: 48px;
  height: 3px;
  background: var(--wr-coral);
  border-radius: 2px;
  margin: 0 0 20px;
}

/* Intro szöveg */
.wr-intro__text {
  color: var(--wr-ink-soft);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

/* Kulcsszámok — scope sáv */
.wr-scope {
  border-top: 1px solid #dedee6;
  background: #fbfaf6;
  padding: 48px 20px;
}
@media (min-width: 1024px) {
  .wr-scope { padding: 64px 0; }
}
.wr-scope__container {
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .wr-scope__container { padding: 0 40px; }
}
.wr-scope__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #dedee6;
  border: 1px solid #dedee6;
  border-radius: 22px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .wr-scope__grid { grid-template-columns: repeat(4, 1fr); }
}
.wr-scope__card {
  background: #ffffff;
  padding: 24px;
}
@media (min-width: 1024px) {
  .wr-scope__card { padding: 32px; }
}
.wr-scope__value {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  color: #1b3c6f;
}
@media (min-width: 1024px) {
  .wr-scope__value { font-size: 36px; }
}
.wr-scope__label {
  margin-top: 8px;
  font-family: var(--wr-font-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #6b7280;
}

/* ── Folyamat szekció (wr-proc) ── */
.wr-proc {
  border-top: 1px solid #dedee6;
  padding: 64px 20px;
  background: transparent;
}
@media (min-width: 1024px) {
  .wr-proc { padding: 96px 0; }
}
.wr-proc__container {
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .wr-proc__container { padding: 0 40px; }
}
.wr-proc__header { max-width: 100%; }
@media (min-width: 1024px) {
  .wr-proc__header { max-width: 640px; }
}
.wr-proc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wr-font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f03a47;
}
.wr-proc__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: #f03a47;
}
.wr-proc__title {
  margin-top: 12px;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  color: #1b3c6f;
}
@media (min-width: 1024px) {
  .wr-proc__title { font-size: 48px; line-height: 1.05; }
}
.wr-proc__lead {
  margin-top: 16px;
  font-family: var(--wr-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: #6b7280;
}
@media (min-width: 1024px) {
  .wr-proc__lead { font-size: 17px; }
}
.wr-proc__grid {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .wr-proc__grid { grid-template-columns: repeat(2, 1fr); }
}
.wr-proc__item {
  position: relative;
  background: #ffffff;
  border: 1px solid #dedee6;
  border-radius: 22px;
  padding: 24px;
}
@media (min-width: 1024px) {
  .wr-proc__item { padding: 32px; }
}
.wr-proc__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
@media (min-width: 1024px) {
  .wr-proc__head { gap: 16px; }
}
.wr-proc__num {
  font-family: var(--wr-font-mono);
  font-weight: 600;
  font-size: 14px;
  color: #f03a47;
  flex-shrink: 0;
}
.wr-proc__name {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: #1b3c6f;
  margin: 0;
}
@media (min-width: 1024px) {
  .wr-proc__name { font-size: 20px; }
}
.wr-proc__body {
  margin-top: 12px;
  font-family: var(--wr-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(27, 60, 111, 0.75);
}
@media (min-width: 1024px) {
  .wr-proc__body { font-size: 17px; }
}

/* ── Mobile-first sötét szekció (wr-mob) ── */
.wr-mob {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #dedee6;
  background: #1b3c6f;
  padding: 80px 20px;
  color: #faf7f2;
}
@media (min-width: 1024px) { .wr-mob { padding: 112px 0; } }

.wr-mob__bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.2;
  pointer-events: none;
}
.wr-mob__glow-a,
.wr-mob__glow-b {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}
.wr-mob__glow-a {
  left: -128px; top: 50%; transform: translateY(-50%);
  width: 480px; height: 480px;
  background: rgba(240,58,71,0.20);
}
.wr-mob__glow-b {
  right: -96px; top: 40px;
  width: 360px; height: 360px;
  background: rgba(240,58,71,0.10);
}

.wr-mob__container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1024px) {
  .wr-mob__container {
    max-width: 1280px;
    padding: 0 40px;
    grid-template-columns: repeat(2, 1fr);
    gap: 56px;
  }
}

/* Szöveg oldal */
.wr-mob__eyebrow {
  font-family: var(--wr-font-mono);
  font-size: 12.48px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #f03a47;
}
@media (min-width: 1024px) { .wr-mob__eyebrow { font-size: 14px; } }
.wr-mob__title {
  margin-top: 16px;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.05;
  color: #faf7f2;
}
@media (min-width: 1024px) { .wr-mob__title { font-size: 48px; } }
.wr-mob__title-accent,
.wr-mob__title strong {
  color: #f03a47;
  font-weight: 600;
}
.wr-mob__lead {
  margin-top: 20px;
  max-width: 448px;
  font-family: var(--wr-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(250,247,242,0.70);
}
.wr-mob__list {
  margin-top: 32px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wr-mob__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wr-font-sans);
  font-weight: 500;
  font-size: 16px;
  color: rgba(250,247,242,0.85);
}
.wr-mob__list li::before {
  content: "";
  display: block;
  width: 24px;
  height: 6px;
  border-radius: 9999px;
  background: #f03a47;
  flex-shrink: 0;
}
.wr-mob__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-family: var(--wr-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #faf7f2;
  text-decoration: none;
  transition: color 0.2s;
}
.wr-mob__link:hover { color: #f03a47; }
.wr-mob__link svg { transition: transform 0.2s; }
.wr-mob__link:hover svg { transform: translate(2px, -2px); }

/* Mobil: desktop link rejtve, mobil link látható kép alatt */
.wr-mob__link--desktop { display: none; }
.wr-mob__link--mobile  { display: inline-flex; margin-top: 0; } /* grid item — a gap adja a térközt */
@media (min-width: 1024px) {
  .wr-mob__link--desktop { display: inline-flex; }
  .wr-mob__link--mobile  { display: none; }
}

/* Telefon oldal */
.wr-mob__phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: start; /* mobilon ne csússzon a grid sor közepére */
}
.wr-mob__halo {
  position: absolute;
  inset: -24px;
  border-radius: 48px;
  background: linear-gradient(135deg,
    rgba(240,58,71,0.40), rgba(240,58,71,0) 50%, rgba(240,58,71,0.30));
  filter: blur(32px);
  pointer-events: none;
}
.wr-mob__phone {
  position: relative;
  border-radius: 41.6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0));
  padding: 8px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.60);
  backdrop-filter: blur(4px);
}
.wr-mob__screen {
  position: relative;
  width: 260px;
  border-radius: 35.2px;
  border: 1px solid rgba(255,255,255,0.10);
  background: #1b3c6f;
  overflow: hidden;
}
@media (min-width: 640px) { .wr-mob__screen { width: 300px; } }
.wr-mob__screen img { display: block; width: 100%; height: auto; }

/* Badge-ek — csak >=640px */
.wr-mob__badge {
  display: none;
  position: absolute;
  z-index: 20;
  border-radius: 16px;
  padding: 12px 16px;
  backdrop-filter: blur(12px);
}
@media (min-width: 640px) { .wr-mob__badge { display: block; } }
.wr-mob__badge--tap {
  left: 8px; top: 48px;
  transform: rotate(-6deg);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.10);
}
.wr-mob__badge--lcp {
  right: -8px; bottom: 64px;
  transform: rotate(5deg);
  border: 1px solid rgba(240,58,71,0.40);
  background: rgba(240,58,71,0.15);
}
.wr-mob__badge-label {
  font-family: var(--wr-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(250,247,242,0.60);
}
.wr-mob__badge--lcp .wr-mob__badge-label { color: #ffb0b6; }
.wr-mob__badge-value {
  margin-top: 4px;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 18px;
  color: #faf7f2;
}

/* ── Szolgáltatások / Tech stack szekció (Lovable spec) ── */
.wr-services {
  background: #f2efe9;
  border-top: 1px solid #dedee6;
  padding: 64px 0;
  color: var(--wr-ink);
}
@media (min-width: 1024px) {
  .wr-services { padding: 80px 0; }
}

.wr-services__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 1024px) {
  .wr-services__wrap { padding: 0 40px; grid-template-columns: 1fr 1fr; }
}

.wr-services__col {
  display: flex;
  flex-direction: column;
}

/* Eyebrow — megegyezik a .wr-ref-eyebrow stílussal */
.wr-services__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wr-font-mono);
  font-weight: 400;
  font-size: 12.48px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wr-coral);
  margin-bottom: 0;
}
.wr-services__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--wr-coral);
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .wr-services__eyebrow { font-size: 14px; }
}

/* H2 — Space Grotesk 600, 32px mobil / 44px asztali */
.wr-services__title {
  margin: 16px 0 0;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--wr-ink);
}
@media (min-width: 1024px) {
  .wr-services__title { font-size: 44px; }
}

/* Lista — fehér kártyák, coral pötty */
.wr-services__list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wr-services__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid #dedee6;
  border-radius: 12px;
  padding: 16px;
  font-family: var(--wr-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: #0f1b3d;
}
.wr-services__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 9999px;
  background: #ff5a4a;
}

/* Chipek — pill, JetBrains Mono 12px */
.wr-services__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.wr-services__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid rgba(15, 27, 61, 0.15);
  font-family: var(--wr-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .02em;
  color: #0f1b3d;
}

/* Élő weboldal kártya */
.wr-services__live {
  margin-top: 32px;
  padding: 24px;
  background: #fff;
  border: 1px solid #dedee6;
  border-radius: 16px;
}
.wr-services__live-label {
  display: block;
  font-family: var(--wr-font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b7280;
}
.wr-services__live-link {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--wr-font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #0f1b3d;
  text-decoration: none;
  transition: color .2s ease;
}
.wr-services__live-link:hover,
.wr-services__live-link:hover svg {
  color: #ff5a4a;
}
.wr-services__live-link svg {
  flex: none;
  width: 20px;
  height: 20px;
  transition: color .2s ease;
}

/* ── Testimonial / Ügyfélidézet szekció (Lovable spec) ── */
.wr-testimonial {
  padding: 64px 0;
}
.wr-testimonial__wrap {
  max-width: 896px;
  margin: 0 auto;
  padding: 0 20px;
}
.wr-testimonial__icon {
  width: 40px;
  height: 40px;
  color: #ff5a4a;
  display: block;
}
.wr-testimonial__quote {
  margin: 24px 0 0;
  font-family: var(--wr-font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 33px;
  color: var(--wr-ink);
}
.wr-testimonial__author {
  margin-top: 24px;
  font-family: var(--wr-font-mono);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
}
@media (min-width: 1024px) {
  .wr-testimonial { padding: 96px 0; }
  .wr-testimonial__wrap { padding: 0 40px; }
  .wr-testimonial__quote { font-size: 30px; line-height: 41px; }
}


/* ── FAQ szekció — azonos háttér mint Szolgáltatások (#f4f6f9 téma szín) ── */
.wr-faq {
  background: #f4f6f9;
  padding: 64px 20px;
}
@media (min-width: 1024px) {
  .wr-faq { padding: 80px 40px; }
}

.wr-faq__wrap {
  max-width: 896px;
  margin: 0 auto;
}

.wr-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wr-font-mono);
  font-weight: 400;
  font-size: 12.48px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wr-coral);
}
.wr-faq__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--wr-coral);
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .wr-faq__eyebrow { font-size: 14px; }
}

.wr-faq__title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 33px;
  letter-spacing: -0.03em;
  color: #0f1b3d;
  color: lab(22.7152 3.05282 -31.6161);
  margin: 12px 0 0;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .wr-faq__title {
    font-size: 56px;
    line-height: 57px;
  }
}

.wr-faq__list {
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
}

.wr-faq__item {
  background: #ffffff;
  border: 1px solid #dedee6;
  border-radius: 16px;
  padding: 24px;
}
@media (min-width: 1024px) {
  .wr-faq__item { padding: 32px; }
}

.wr-faq__q {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #0f1b3d;
  color: lab(22.7152 3.05282 -31.6161);
  margin: 0;
}

.wr-faq__a {
  font-family: Inter, system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: rgba(15, 27, 61, 0.75);
  color: oklab(0.339995 -0.0156334 -0.0886214 / 0.75);
  margin: 12px 0 0;
}
@media (min-width: 1024px) {
  .wr-faq__a {
    font-size: 17px;
    line-height: 27px;
  }
}

/* Single CTA blokk (régi kártya — már nem használt, megőrzés kompatibilitásért) */
.wr-single__cta {
  padding: 64px 0;
  border-top: 1px solid var(--wr-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wr-single__cta .wr-ref-cta { margin-top: 0; width: 100%; }

/* ── Teljes szélességű CTA szekció ── */
.wr-cta-full {
  background: #f6f7f7;
  border-top: 1px solid var(--wr-line, #dedee6);
  padding: 80px 20px;
  text-align: center;
}
@media (min-width: 1024px) {
  .wr-cta-full { padding: 100px 40px; }
}
.wr-cta-full__wrap {
  max-width: 720px;
  margin: 0 auto;
}
.wr-cta-full__title {
  font-family: var(--wr-font-display, "Space Grotesk", system-ui, sans-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--wr-ink, #1b3c6f);
  margin: 16px 0 20px;
}
.wr-cta-full__accent {
  color: var(--wr-coral, #f03a47);
}
.wr-cta-full__lead {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--wr-muted, #6d7280);
  max-width: 560px;
  margin: 0 auto 32px;
}
.wr-cta-full .wr-ref-cta__actions {
  justify-content: center;
  margin-top: 0;
}

/* ── Előző / Következő projekt navigáció — spec v2 ── */
.wr-refnav {
  background: var(--paper, #f7f5ef);
  border-top: 1px solid var(--wr-line, #dedee6);
  padding: 48px 20px;
}
.wr-refnav__wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .wr-refnav { padding-inline: 40px; }
  .wr-refnav__wrap { grid-template-columns: 1fr 1fr; }
  .wr-refnav__card--next { grid-column: 2; }
}
.wr-refnav__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--wr-line, #dedee6);
  border-radius: 16px;
  text-decoration: none;
  transition: border-color 200ms ease;
}
.wr-refnav__card--next { justify-content: flex-end; }
.wr-refnav__card:hover { border-color: var(--wr-ink, #1b3c6f); }
.wr-refnav__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #6d7280;
  transition: color 200ms ease;
}
.wr-refnav__card:hover .wr-refnav__icon { color: var(--wr-coral, #f03a47); }
.wr-refnav__text { min-width: 0; }
.wr-refnav__text--right { text-align: right; }
.wr-refnav__eyebrow {
  font-family: var(--wr-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6d7280;
}
.wr-refnav__name {
  margin-top: 4px;
  font-family: var(--wr-font-display, "Space Grotesk", system-ui, sans-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--wr-ink, #1b3c6f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .wr-refnav__name { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════
   KIHÍVÁS / MEGOLDÁS szekció (.wr-cs)
   ══════════════════════════════════════════════════════════════ */
.wr-cs {
  padding: 64px 0;
  background: transparent;
}
.wr-cs__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.wr-cs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.wr-cs__card {
  border-radius: 22px;
  border: 1px solid #dedee6;
  padding: 32px;
  background: #ffffff;
}
.wr-cs__card--solution {
  background: rgba(240, 58, 71, 0.04);
  border-color: rgba(240, 58, 71, 0.30);
}
.wr-cs__eyebrow {
  font-family: var(--wr-font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wr-coral);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wr-cs__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--wr-coral);
  display: inline-block;
  flex-shrink: 0;
}
.wr-cs__title {
  font-family: var(--wr-font-display);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--wr-ink);
  margin: 16px 0 0;
}
.wr-cs__body {
  font-family: var(--wr-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(27, 60, 111, 0.80);
  margin: 16px 0 0;
}
@media (min-width: 1024px) {
  .wr-cs { padding: 96px 0; }
  .wr-cs__container { padding: 0 40px; }
  .wr-cs__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .wr-cs__card { padding: 40px; }
  .wr-cs__eyebrow { font-size: 0.875rem; }
  .wr-cs__body { font-size: 17px; }
}

/* (legacy nav hook — már nincs, csak biztonsági fallback) */
.wr-single__nav a {
  font-size: 14px;
  color: var(--wr-muted);
  text-decoration: none;
  font-family: var(--wr-font-mono);
}
.wr-single__nav a:hover { color: var(--wr-coral); }

/* ==========================================================================
   MOCKUP-KERETEK KÉPBŐL (Ernő, 2026-09-09)

   Ernő két átlátszó PNG keretet küldött (MacBook és telefon), és azt kérte,
   hogy a keret az OLDAL eleme legyen, a képernyőkép pedig BELE kerüljön.
   A szerkezet eddig is ilyen volt (CSS-ből rajzolt böngésző-ablak), most csak
   a keret grafikája cserélődik. A keret EGY fájl, mind a 32 referencia ezt
   használja: ha később más keret kell, itt kell cserélni, nem 32 helyen.

   A képernyő-nyílás helyét NEM szemre állítottam be, hanem a PNG átlátszó
   területéből MÉRTEM ki:
     MacBook (1800x1200): bal 8.944%, felül 9.583%, 82.167% x 71.750%
     Telefon  (900x1800): bal 13.556%, felül 7.667%, 73.000% x 86.444%
   ========================================================================== */

/* --- Lista nézet: MacBook keret --- */
.wr-mockup {
  position: relative;
  aspect-ratio: 1800 / 1200;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* A böngésző-ablak sávja (pöttyök + cím) a laptop-keretben már nem kell. */
.wr-mockup .wr-mockup__chrome { display: none; }

.wr-mockup .wr-mockup__canvas {
  position: absolute;
  left: 8.944%;
  top: 9.583%;
  width: 82.167%;
  height: 71.750%;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: hidden;
  background: #1a3766;
}
/* A keret a kép FÖLÖTT ül, hogy a káva takarja a képernyőkép szélét. */
.wr-mockup::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/macbook-keret.png") center / contain no-repeat;
  pointer-events: none;
}

/* --- Részletes adatlap: telefon keret --- */
.wr-mob__phone {
  position: relative;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  width: 300px;
  aspect-ratio: 900 / 1800;
}
@media (max-width: 639px) { .wr-mob__phone { width: 260px; } }

.wr-mob__phone .wr-mob__screen {
  position: absolute;
  left: 13.556%;
  top: 7.667%;
  width: 73.000%;
  height: 86.444%;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.wr-mob__phone .wr-mob__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.wr-mob__phone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/mobil-keret.png") center / contain no-repeat;
  pointer-events: none;
}

/* A Lovable-specifikus háttérrács eltávolítása a referencia-oldalakról is
   (Ernő, 2026-09-09). A témában ugyanez megtörtént; itt a plugin saját négy
   rácsa van. background-image:none, NEM display:none: a .wr-mob__bg-grid és a
   ::before rétegek pozicionált elemek, a display:none elrendezést törhetne. */
.wr-ref-hero__grid,
.wr-single__hero-grid-bg,
.wr-single__hero-img::before,
.wr-mob__bg-grid { background-image: none !important; }