/* ===========================================================
   A sections.css SZETBONTASABOL szarmazo darab: core
   2026-09-09, Optimus. Ok: a fooldal a 209 KB-os egyesitett fajlnak
   MERVE 11%-at hasznalta, es az elso festes arra a fajlra vart.
   A darabok oldaltipus szerint toltodnek (lasd functions.php).
   Uj szekcio: a nevterenek megfelelo darabba, ha nincs ilyen, a core-ba.
   =========================================================== */

/* ==========================================================================
   WEBRAKÉTA — SZEKCIÓ CSS (LETISZTÍTOTT, ELEMENTOR-MENTES)
   --------------------------------------------------------------------------
   Betöltési sorrend WP-ben:
     1. webraketa-design-system.css   (globális tokenek + komponensek)
     2. webraketa-sections.css        (EZ a fájl — csak szekció-layout)

   Eltávolítva:
     - Lokális :root és szekció-szintű token-újradefiniálások
       (most a globális --wr-ink, --wr-coral, --wr-paper, --wr-line stb.
        tokeneket használja)
     - Minden !important
     - .elementor-* szelektorok és :has(.elementor-*) trükkök
     - Duplikált fontcsalád-deklarációk (globálisból jönnek)
     - Google Fonts @import (fontok WP-ben telepítve)

   Megtartva:
     - Szekció-specifikus layout, grid, padding
     - SVG ívek és háttér-dekorációk
     - @keyframes animációk (egyszer, deduplikálva)
     - Reszponzív breakpointok
     - prefers-reduced-motion fallback
     - Full-width hack ott, ahol kell (margin-inline: calc(50% - 50vw))

   FONTOS: A globális design system fájlnak ezeket a tokeneket KELL biztosítania:
     --wr-ink, --wr-ink-soft, --wr-paper, --wr-paper-2,
     --wr-coral, --wr-line, --wr-muted, --wr-card,
     --wr-shadow-soft, --wr-shadow-launch,
     --wr-font-display, --wr-font-body, --wr-font-mono
   ========================================================================== */


/* ==========================================================================
   GLOBÁLIS EYEBROW EGYSÉGESÍTÉS
   13px desktop / 12px mobil — JetBrains Mono 400, line-height: 1
   ========================================================================== */
:root {
  --wr-font-eyebrow: 13px;
  --wr-lh-eyebrow:   1;
}
@media (max-width: 640px) {
  :root { --wr-font-eyebrow: 12px; }
}

/* ==========================================================================
   1. KEYFRAME ANIMÁCIÓK
   ========================================================================== */

@keyframes wrArcDraw          { to { stroke-dashoffset: 0; } }
@keyframes wrTrajectoryDraw {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  10%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes wrp-arc-draw       { to { stroke-dashoffset: 0; } }
@keyframes wrArcDrawOnce      { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes wr-arc-draw {
  0%   { stroke-dashoffset: 1400; }
  55%  { stroke-dashoffset: 0;    }
  100% { stroke-dashoffset: -1400;}
}
@keyframes wr-ping            { 75%,100% { transform: scale(2); opacity: 0; } }
@keyframes wr-marquee         { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wr-float-slow      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }


/* ==========================================================================
   2. HERO HÁTTÉR  (.wr-hero-section)
   --------------------------------------------------------------------------
   Csak a hero háttérrétegeit kezeli:
   - full width szekció
   - rácsos háttér
   - szaggatott trajectory
   - piros animált trajectory

   Fontos:
   - Nincs SVG-re általános szabály.
   - Nem érinti a többi szekció ikonjait.
   - Az animációt a sections.js indítja az .is-visible class hozzáadásával.
   ========================================================================== */

.wr-hero-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: var(--wr-paper);
  border-bottom: 1px solid var(--wr-line);

  --wr-traj-stroke: oklch(0.34 0.09 260 / .18);
}

@supports (width: 100dvw) {
  .wr-hero-section {
    width: 100dvw;
    max-width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

.wr-hero-section--ink {
  background: var(--wr-ink);
  --wr-traj-stroke: oklch(1 0 0 / .18);
}

.wr-hero-section--alt {
  background: var(--wr-peach, #FFE9DD);
  --wr-traj-stroke: oklch(0.34 0.09 260 / .18);
}

.wr-hero-section .trajectory-grid,
.wr-hero-section .ink-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}

.wr-hero-section .trajectory-grid {
  background-image:
    linear-gradient(to right, oklch(0.34 0.09 260 / .05) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.34 0.09 260 / .05) 1px, transparent 1px);
  background-size: 64px 64px;
}

.wr-hero-section .ink-grid {
  background-image:
    linear-gradient(to right, oklch(1 0 0 / .05) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / .05) 1px, transparent 1px);
  background-size: 64px 64px;
}

.wr-trajectory {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Szaggatott trajectory — csak a hero SVG pathokra */
.wr-hero-section .wr-trajectory-dotted {
  fill: none;
  stroke: var(--wr-traj-stroke);
  stroke-width: 1;
  stroke-dasharray: 3 8;
}

/* Piros animált trajectory — CSS animáció, nem SMIL */
.wr-hero-section .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));
}

.wr-hero-section.is-visible .wr-arc-path {
  animation: wrTrajectoryDraw 4s cubic-bezier(.2,.8,.2,1) 1s forwards;
}

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

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

  .wr-hero-section .wr-trajectory-dotted--mobile,
  .wr-hero-section .wr-arc-path--mobile {
    display: block;
  }
}

.wr-hero-section .wr-hero {
  position: relative;
  z-index: 2;
}

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


/* ==========================================================================
   3. HERO TARTALOM  (.wr-hero)
   ========================================================================== */

.wr-hero {
  position: relative; z-index: 2;
  width: 100%;
  color: var(--wr-ink);
  font-family: var(--wr-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wr-hero * { box-sizing: border-box; }

.wr-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 20px 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 768px)  { .wr-hero__inner { padding: 80px 32px 96px; } }
@media (min-width: 1024px) { .wr-hero__inner { padding: 104px 40px 128px; } }

.wr-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 24px;
  font-family: var(--wr-font-mono);
  font-size: var(--wr-font-eyebrow); font-weight: 400;
  letter-spacing: var(--wr-ls-eyebrow); text-transform: uppercase;
  color: var(--wr-coral);
  line-height: 1;
}
.wr-hero__eyebrow-dash {
  display: inline-block; width: var(--wr-eyebrow-dash); height: 1px;
  background: var(--wr-coral);
}

.wr-hero__title {
  margin: 0;
  font-family: var(--wr-font-display);
  font-weight: 600;
  color: var(--wr-ink);
  letter-spacing: var(--wr-ls-hero);
  line-height: var(--wr-lh-hero);
  font-size: var(--wr-font-hero);
  max-width: 980px;
}
.wr-hero__title-accent {
  display: block;
  font-family: inherit; font-weight: inherit; font-size: inherit;
  line-height: inherit; letter-spacing: inherit;
  color: var(--wr-coral);
}
@media (max-width: 1024px) {
  .wr-hero__title { max-width: 100%; }
}

/* Service aloldali hero kisebb betűmérettel */
.wr-hero-section--service .wr-hero__title {
  font-size: var(--wr-font-hero-service);
}

/* Honlapkészítés landing (page 594): a hero-accent inline folyjon, hogy a cím a
   Lovable-lel egyezően 2 sorra törjön (1280) es 3 sorra (390) — a betűméret NEM
   változik, csak a tördelés. Oldal-scoped: a többi service-oldal (külön felmérés
   alatt) érintetlen marad. Pixel, 2026-09-08. */
.page-id-594 .wr-hero__title-accent { display: inline; }

.wr-hero__lead {
  margin: 24px 0 0;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-lead); line-height: var(--wr-lh-lead);
  color: var(--wr-muted);
  max-width: 680px;
}
@media (max-width: 640px) {
  .wr-hero__lead { max-width: 100%; }
}

.wr-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.wr-hero__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 54px; padding: 0 28px;
  border-radius: var(--radius-pill);
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-button); line-height: 1.25rem; font-weight: var(--wr-fw-button);
  letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, background-color .15s ease,
              color .15s ease, box-shadow .2s ease, border-color .15s ease;
}
.wr-hero__btn-icon { width: 18px; height: 18px; flex: 0 0 18px; }

.wr-hero__btn--primary {
  background: var(--wr-coral);
  color: #fff;
  border-color: var(--wr-coral);
  box-shadow: 0 6px 16px -6px rgba(241,56,62,.55),
              0 2px 4px -2px rgba(241,56,62,.35);
}
.wr-hero__btn--primary:hover {
  background: var(--wr-coral-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(241,56,62,.6),
              0 3px 6px -2px rgba(241,56,62,.4);
}

.wr-hero__btn--ghost {
  background: transparent;
  color: var(--wr-ink);
  border-color: rgba(26,54,102,.18);
}
.wr-hero__btn--ghost:hover {
  border-color: rgba(26,54,102,.45);
  background: rgba(26,54,102,.04);
}

@media (max-width: 640px) {
  .wr-hero__actions { width: 100%; }
  /* Wrike #4: a hero-gombok a tartalmukat oleljek (mint a Lovable-on: 272/201px),
     ne feszuljenek teljes szelessegre. A .wr-hero__actions flex-wrap miatt 390px-en
     a ket gomb egymas ala kerul (a Lovable is igy tordel). */
  .wr-hero__btn { width: auto; height: 50px; }
}

.wr-hero__meta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 44px; padding-top: 20px;
  border-top: 1px solid var(--wr-line);
  font-family: var(--wr-font-mono);
  font-size: var(--wr-font-eyebrow); letter-spacing: var(--wr-ls-eyebrow);
  text-transform: uppercase;
  color: var(--wr-muted-alt); font-weight: 500; line-height: 1;
}
.wr-hero__meta-divider {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--wr-coral); opacity: .7;
}
@media (max-width: 640px) {
  .wr-hero__meta { flex-wrap: wrap; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .wr-hero__btn { transition: none; }
  .wr-hero__btn:hover { transform: none; }
}
.wr-hero__btn:focus-visible { outline: 2px solid var(--wr-coral); outline-offset: 3px; }


/* ==========================================================================
   4. FŐOLDALI HERO  (.wr-home-hero) — v18/v19 Elementor-ból portálva
       Sötét témájú szekció, saját lokális tokenekkel.
       HTML: Gutenberg egyéni HTML blokk (hero v18 struktúra)
   ========================================================================== */

@keyframes wr-home-hero-arc-draw-v18 {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  10%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

.wr-home-hero,
.wr-home-hero * { box-sizing: border-box; }

.wr-home-hero {
  position: relative;
  display: block;
  width: auto;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  background-color: #1b3c6f;
  color: #fbfaf6;
  font-family: var(--wr-font-sans);
  isolation: isolate;
  clear: both;
}
@supports (width: 100dvw) {
  .wr-home-hero {
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

/* Háttér rács ELTÁVOLÍTVA (Ernő, 2026-09-03) — a Lovable-specifikus halvány
   64px-es rács a főoldal-hero-n; a ::before pseudo-elem üresen marad (semleges). */
.wr-home-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: none;
}
.wr-home-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: none;
}

/* Trajectory SVG — mobil alapértelmezett, desktop rejtett */
.wr-home-hero__trajectory-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none; overflow: visible; display: block;
}
.wr-home-hero__trajectory-svg--mobile  { display: block; }
.wr-home-hero__trajectory-svg--desktop { display: none; }
.wr-home-hero__trajectory-dotted {
  stroke: rgba(251,250,246,.38); stroke-width: 1.5; stroke-dasharray: 3 8;
}
.wr-home-hero__trajectory-arc-base { display: none; }
.wr-home-hero__trajectory-arc-v18 {
  stroke: #f03a47; stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(240,58,71,.40));
  stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1;
  animation: wr-home-hero-arc-draw-v18 2.35s cubic-bezier(.2,.8,.2,1) .35s both;
}

/* Inner grid */
.wr-home-hero__inner {
  position: relative; z-index: 3;
  width: min(100%, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 28px;
  padding: 56px 20px 80px;
}

/* Copy top (eyebrow + h1) és copy bottom (lead + CTA + stats) */
.wr-home-hero__copy-top,
.wr-home-hero__copy-bottom {
  max-width: 590px; min-width: 0;
  position: relative; z-index: 4;
  color: #fbfaf6;
}
/* Mobilon a lead margin-topját a grid gap adja, ne duplázódjon */
.wr-home-hero__copy-bottom > .wr-home-hero__lead { margin-top: 0; }

/* Eyebrow */
.wr-home-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  color: lab(54.8487 69.6498 43.5134);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; line-height: 20px;
  text-transform: uppercase; letter-spacing: .18em; font-weight: 400;
}
.wr-home-hero__eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: #f03a47; display: inline-block; flex: 0 0 auto;
}

/* Cím */
.wr-home-hero__title {
  display: block;
  margin: 24px 0 0; padding: 0;
  color: #fbfaf6;
  font-family: var(--wr-font-display);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: .98; font-weight: 600; letter-spacing: -.035em;
  max-width: 590px;
}
.wr-home-hero__title-line { display: inline; color: #fbfaf6; font: inherit; }
.wr-home-hero__accent {
  position: relative; display: inline-block;
  color: #f03a47; font: inherit;
}
.wr-home-hero__accent::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -.04em;
  height: 12px; background: rgba(240,58,71,.30); z-index: -1; display: block;
}

/* Lead */
.wr-home-hero__lead {
  display: block; margin: 28px 0 0; max-width: 560px;
  color: rgba(251,250,246,.70);
  font-family: var(--wr-font-sans);
  font-size: 1.125rem; line-height: 1.7; font-weight: 400;
}

/* CTA gombok */
.wr-home-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px; margin-top: 36px;
  position: relative; z-index: 5;
}
.wr-home-hero__btn,
.wr-home-hero__btn:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  width: auto; min-width: max-content;
  padding: .95rem 1.4rem;
  border-radius: 999px; text-decoration: none;
  font-family: var(--wr-font-sans);
  font-size: .95rem; font-weight: 500; line-height: 1;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease,
              color .25s ease, border-color .25s ease;
}
.wr-home-hero__btn-label { display: inline-block; }
.wr-home-hero__btn-icon {
  display: inline-block;
  width: 1em; height: 1em; min-width: 1em; flex: 0 0 1em;
  font-family: Arial, "Helvetica Neue", system-ui, sans-serif;
  font-size: 1.05rem; font-weight: 500; line-height: .9;
  text-align: center; transform: translateY(-.01em);
}
.wr-home-hero__btn-icon--external::before { content: "↗︎"; }
.wr-home-hero__btn-icon--arrow::before    { content: "→"; }

.wr-home-hero__btn--primary,
.wr-home-hero__btn--primary:visited {
  background: #f03a47; color: #fff;
  box-shadow: 0 18px 50px -16px rgba(240,58,71,.45);
}
.wr-home-hero__btn--primary:hover {
  background: #dc2f3c; color: #fff; transform: translateY(-2px);
}
.wr-home-hero__btn--secondary,
.wr-home-hero__btn--secondary:visited {
  border-color: rgba(251,250,246,.30); color: #fbfaf6; background: transparent;
}
.wr-home-hero__btn--secondary:hover {
  background: #fbfaf6; color: #1b3c6f;
}

/* Statisztikák */
.wr-home-hero__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; max-width: 560px;
  margin: 48px 0 0; padding: 24px 0 0;
  border-top: 1px solid rgba(251,250,246,.15);
  color: #fbfaf6;
}
.wr-home-hero__stat-number {
  display: block; color: #fbfaf6;
  font-family: var(--wr-font-display);
  font-size: 1.875rem; line-height: 1; font-weight: 600; letter-spacing: -.02em;
}
.wr-home-hero__stat-label {
  display: block; margin-top: 6px;
  color: rgba(251,250,246,.55);
  font-family: var(--wr-font-mono);
  font-size: 11px; line-height: 1.35;
  text-transform: uppercase; letter-spacing: .08em;
}

/* Vizuál (jobb oszlop) */
.wr-home-hero__visual {
  position: relative; z-index: 3;
  min-width: 0; width: 100%; max-width: 100%; display: block;
}
.wr-home-hero__visual-glow {
  position: absolute; inset: -24px;
  border-radius: 40px; pointer-events: none;
  background: none; filter: none; z-index: 0;
}

/* Konverzió kártya */
.wr-home-hero__conversion {
  position: absolute; left: -24px; bottom: -24px;
  display: none; width: 184px;
  border: 1px solid rgba(251,250,246,.15); border-radius: 16px;
  background: rgba(255,255,255,.055);
  padding: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.30);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: wr-float-slow 7s ease-in-out infinite;
}
.wr-home-hero__conversion-kicker {
  margin: 0; color: rgba(251,250,246,.6);
  font-family: var(--wr-font-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: .16em;
}
.wr-home-hero__conversion-value {
  margin: 5px 0 0; color: #fbfaf6;
  font-family: var(--wr-font-display);
  font-size: 1.5rem; line-height: 1; font-weight: 600;
}
.wr-home-hero__conversion-copy {
  margin: 5px 0 0; color: rgba(251,250,246,.65); font-size: 12px; line-height: 1.35;
}

/* Marquee */
.wr-home-hero__marquee {
  position: relative; z-index: 4;
  border-top: 1px solid rgba(251,250,246,.1);
  border-bottom: 1px solid rgba(251,250,246,.1);
  background: rgba(255,255,255,.03);
  padding: 20px 0; overflow: hidden; width: 100%;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.wr-home-hero__marquee-track {
  display: flex; width: max-content; align-items: center;
  gap: 48px; white-space: nowrap; padding-left: 48px;
  animation: wr-marquee 40s linear infinite;
}
.wr-home-hero__marquee-item {
  color: rgba(251,250,246,.45);
  font-family: var(--wr-font-display);
  font-size: 1.125rem; font-weight: 500; line-height: 1;
}
.wr-home-hero__star { margin-left: 48px; color: #f03a47; }

/* Platforms hero — Tailwind class shim (a beágyazott SVG-hez) */
.wr-home-hero .wr-platforms-hero,
.wr-home-hero .wr-platforms-hero * { box-sizing: border-box; }
.wr-home-hero .wr-platforms-hero {
  position: relative; width: 100%; aspect-ratio: 6/5.6;
  overflow: hidden; z-index: 2; display: block;
  font-family: var(--wr-font-sans); color: #fbfaf6;
}
.wr-home-hero .wr-platforms-hero .pointer-events-none { pointer-events: none; }
.wr-home-hero .wr-platforms-hero .absolute  { position: absolute; }
.wr-home-hero .wr-platforms-hero .relative  { position: relative; }
.wr-home-hero .wr-platforms-hero .inset-0   { inset: 0; }
.wr-home-hero .wr-platforms-hero .h-full    { height: 100%; }
.wr-home-hero .wr-platforms-hero .w-full    { width: 100%; }
.wr-home-hero .wr-platforms-hero .opacity-\[0\.08\] { opacity: .08; }
.wr-home-hero .wr-platforms-hero .left-4   { left: 1rem; }
.wr-home-hero .wr-platforms-hero .top-4    { top: 1rem; }
.wr-home-hero .wr-platforms-hero .flex     { display: flex; }
.wr-home-hero .wr-platforms-hero .items-center   { align-items: center; }
.wr-home-hero .wr-platforms-hero .gap-2          { gap: .5rem; }
.wr-home-hero .wr-platforms-hero .rounded-full   { border-radius: 9999px; }
.wr-home-hero .wr-platforms-hero .border         { border-width: 1px; border-style: solid; }
.wr-home-hero .wr-platforms-hero .border-white\/10 { border-color: rgba(255,255,255,.1); }
.wr-home-hero .wr-platforms-hero .bg-white\/10   { background-color: rgba(255,255,255,.1); }
.wr-home-hero .wr-platforms-hero .px-3   { padding-left: .75rem; padding-right: .75rem; }
.wr-home-hero .wr-platforms-hero .py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.wr-home-hero .wr-platforms-hero .backdrop-blur-md {
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.wr-home-hero .wr-platforms-hero .h-2    { height: .5rem; }
.wr-home-hero .wr-platforms-hero .w-2    { width: .5rem; }
.wr-home-hero .wr-platforms-hero .inline-flex { display: inline-flex; }
.wr-home-hero .wr-platforms-hero .opacity-75  { opacity: .75; }
.wr-home-hero .wr-platforms-hero .font-mono   { font-family: var(--wr-font-mono); }
.wr-home-hero .wr-platforms-hero .text-\[11px\] { font-size: 11px; }
.wr-home-hero .wr-platforms-hero .uppercase     { text-transform: uppercase; }
.wr-home-hero .wr-platforms-hero .tracking-wider { letter-spacing: .05em; }
.wr-home-hero .wr-platforms-hero .text-white\/90  { color: rgba(255,255,255,.9); }
.wr-home-hero .wr-platforms-hero .animate-ping    { animation: wr-ping 1s cubic-bezier(0,0,.2,1) infinite; }
.wr-home-hero .wr-platforms-hero .hidden          { display: none; }
.wr-home-hero .wr-platforms-hero .md\:inline      { display: none; }
.wr-home-hero .wr-platforms-hero .md\:hidden      { display: inline; }

/* Platforms SVG — mobil alap, desktop rejtett */
.wr-platforms-hero__svg--mobile  { display: block; width: 100%; height: 100%; }
.wr-platforms-hero__svg--desktop { display: none;  width: 100%; height: 100%; }

/* ── Reszponzív — EGYETLEN breakpoint: 1024px ── */

/* Desktop: ≥1024px */
@media (min-width: 1024px) {
  /* Trajectory: mobil rejtve, desktop látható */
  .wr-home-hero__trajectory-svg--mobile  { display: none; }
  .wr-home-hero__trajectory-svg--desktop { display: block; }

  /* Platforms SVG: desktop látható */
  .wr-platforms-hero__svg--mobile  { display: none; }
  .wr-platforms-hero__svg--desktop { display: block; }

  /* Grid elrendezés: copy-top / copy-bottom a bal oszlopban,
     visual a jobb oszlopban mindkét sort átfogva */
  .wr-home-hero__inner {
    grid-template-columns: 5fr 7fr;
    column-gap: 40px;
    row-gap: 0;
    padding: 80px 40px 112px;
    align-items: start;
  }
  .wr-home-hero__copy-top {
    grid-column: 1; grid-row: 1;
    align-self: end; max-width: 576px;
  }
  .wr-home-hero__copy-bottom {
    grid-column: 1; grid-row: 2;
    align-self: start; max-width: 576px;
  }
  .wr-home-hero__visual {
    grid-column: 2; grid-row: 1 / span 2;
    align-self: center;
  }

  /* Desktop szöveg finomítások — csak a méret változik, a többi a base-ből jön */
  .wr-home-hero__eyebrow { font-size: var(--wr-font-eyebrow); line-height: var(--wr-lh-eyebrow); }
  .wr-home-hero__btn,
  .wr-home-hero__btn:visited { font-size: 17px; line-height: 27px; }
  .wr-home-hero__lead    { font-size: 1.25rem; }
  .wr-home-hero__copy-bottom > .wr-home-hero__lead { margin-top: 28px; }
  .wr-home-hero__conversion { display: block; }

  /* Tailwind shim: desktop md: osztályok */
  .wr-home-hero .wr-platforms-hero .md\:inline           { display: inline; }
  .wr-home-hero .wr-platforms-hero .md\:hidden           { display: none; }
  .wr-home-hero .wr-platforms-hero .hidden.md\:inline    { display: inline; }
}

/* Mobil: stats a gombok FELETT — copy-bottom flex-sorrenddel (<1024px) */
@media (max-width: 1023px) {
  .wr-home-hero__copy-bottom                          { display: flex; flex-direction: column; }
  .wr-home-hero__copy-bottom > .wr-home-hero__lead    { order: 0; }
  .wr-home-hero__copy-bottom > .wr-home-hero__stats   { order: 1; }
  .wr-home-hero__copy-bottom > .wr-home-hero__actions { order: 2; }
}

/* Kis mobilon finomítások (<480px) */
@media (max-width: 479px) {
  .wr-home-hero__inner       { gap: 20px; padding: 48px 20px 72px; }
  .wr-home-hero__copy-top,
  .wr-home-hero__copy-bottom { max-width: 100%; width: 100%; }
  .wr-home-hero__title       { font-size: clamp(2.25rem, 9.5vw, 3rem); line-height: 1.02; letter-spacing: -.025em; }
  .wr-home-hero__title-line  { display: block; }
  .wr-home-hero__accent      { display: inline-block; max-width: 100%; }
  .wr-home-hero__lead        { font-family: Inter, system-ui, sans-serif; font-size: 18px; line-height: 29px; font-weight: 400; color: rgba(251,250,246,.7); max-width: 100%; overflow-wrap: break-word; }
  /* Gombok: tartalom szélességű, egymás alatt, bal igazítva */
  .wr-home-hero__actions     { margin-top: 52px; gap: 12px; flex-direction: column; align-items: flex-start; }
  .wr-home-hero__btn         { flex: 0 0 auto; width: auto; padding: .85rem 1.2rem; font-size: 16px; line-height: 26px; font-weight: 500; white-space: nowrap; min-height: 44px; }
  .wr-home-hero__btn-label   { white-space: nowrap; }
  /* Stats: gombok felett (sorrend CSS order-rel jön) */
  .wr-home-hero__stats       { gap: 12px; margin-top: 32px; margin-bottom: 0; padding-top: 20px; order: 1; }
  .wr-home-hero__stat-number {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 30px; line-height: 36px; font-weight: 600;
    color: rgb(251,250,246);
  }
  .wr-home-hero__stat-label  {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; line-height: 18px; font-weight: 400;
    color: rgba(251,250,246,.55); letter-spacing: .08em; overflow-wrap: anywhere;
  }
  .wr-home-hero__visual      { width: 100%; max-width: 100%; }
  .wr-home-hero .wr-platforms-hero { aspect-ratio: 6/5.7; min-width: 0; }
  .wr-home-hero__marquee       { padding: 16px 0; }
  .wr-home-hero__marquee-track { gap: 34px; padding-left: 34px; animation-duration: 32s; }
  .wr-home-hero__marquee-item  {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 18px; line-height: 28px; font-weight: 500;
    color: rgba(251,250,246,.45);
  }
  .wr-home-hero__star          { margin: 0 12px; }
}
@media (max-width: 370px) {
  .wr-home-hero__btn { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .wr-home-hero__trajectory-arc-v18 { animation: none; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; }
  .wr-home-hero__marquee-track,
  .wr-home-hero__conversion { animation: none; }
}

/* Standalone platforms hero (home-hero-n kívüli előforduláshoz) */
.wr-platforms-hero,
.wr-platforms-hero * { box-sizing: border-box; }
.wr-platforms-hero {
  position: relative; width: 100%; aspect-ratio: 6/5.6;
  overflow: hidden; font-family: var(--wr-font-sans);
}
/* BEM segéd-osztályok (wr-platforms-hero__grid + __svg) */
.wr-platforms-hero__grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; opacity: .08; display: block;
}
.wr-platforms-hero__svg {
  position: relative;
  width: 100%; height: 100%; display: block;
}
@media (prefers-reduced-motion: reduce) {
  .wr-platforms-hero .animate-ping { animation: none; }
}
/* ==========================================================================
   6. FOLYAMAT  (.wrp-section)
   ========================================================================== */

.wrp-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--wr-ink);
  color: #fff;
  padding: var(--space-4xl) 0;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (min-width: 1024px) {
  .wrp-section {
    padding: var(--space-5xl) 0;
  }
}

.wrp-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

.wrp-section .wrp-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.wrp-section .wrp-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Piros ív — alapállapot */
.wrp-section .wrp-arc {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  opacity: 0;
}

/* Piros ív — akkor indul, amikor a sections.js ráteszi az .is-visible class-t */
.wrp-section.is-visible .wrp-arc {
  opacity: 1;
  animation: wrpArcDraw 3.5s cubic-bezier(.2,.8,.2,1) .8s forwards;
}

@keyframes wrpArcDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.wrp-section .wrp-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-mobile);
}

@media (min-width: 1024px) {
  .wrp-section .wrp-inner {
    padding: 0 var(--container-pad-desktop);
  }
}

.wrp-section .wrp-head {
  max-width: 672px;
}

.wrp-section .wrp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wr-font-mono);
  font-weight: 400;
  font-size: var(--wr-font-eyebrow);
  line-height: 1;
  letter-spacing: var(--wr-ls-eyebrow);
  text-transform: uppercase;
  color: var(--wr-coral);
  margin: 0;
}

.wrp-section .wrp-eyebrow::before {
  content: "";
  width: var(--wr-eyebrow-dash);
  height: 1px;
  background: currentColor;
}

.wrp-section .wrp-title {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: var(--wr-font-title-lg);
  line-height: var(--wr-lh-title);
  letter-spacing: var(--wr-ls-title);
  color: #fff;
  margin: 16px 0 0;
}

.wrp-section .wrp-steps {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .wrp-section .wrp-steps {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (min-width: 1024px) {
  .wrp-section .wrp-steps {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}

.wrp-section .wrp-step {
  background: var(--wr-ink);
  padding: 28px;
}

.wrp-section .wrp-step-tag {
  display: block;
  font-family: var(--wr-font-mono);
  font-weight: 400;
  font-size: var(--wr-font-eyebrow);
  line-height: 1.2;
  letter-spacing: var(--wr-ls-eyebrow);
  text-transform: uppercase;
  color: var(--wr-coral);
  margin: 0;
}

.wrp-section .wrp-step-title {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: var(--wr-font-title-sm);
  line-height: var(--wr-lh-card);
  letter-spacing: var(--wr-ls-card);
  color: #fff;
  margin: 12px 0 0;
}

.wrp-section .wrp-step-desc {
  font-family: var(--wr-font-sans);
  font-weight: 400;
  font-size: var(--wr-font-body);
  line-height: var(--wr-lh-body);
  color: rgba(255,255,255,.65);
  margin: 8px 0 0;
}

.wrp-section .wrp-arc--mobile  { display: none; }
.wrp-section .wrp-arc--desktop { display: block; }

@media (max-width: 767px) {
  .wrp-section .wrp-arc--desktop { display: none; }
  .wrp-section .wrp-arc--mobile  { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .wrp-section .wrp-arc {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* ==========================================================================
   7. ESZKÖZPARK / MISSION CONTROL  (.wrm-section)
   ========================================================================== */

.wrm-section {
  background: var(--wr-paper);
  color: var(--wr-ink);
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-body); line-height: var(--wr-lh-body);
  padding-block: var(--space-4xl);
}
@media (min-width: 1024px) { .wrm-section { padding-block: var(--space-5xl); } }

.wrm-inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad-mobile); }
@media (min-width: 1024px) { .wrm-inner { padding-inline: var(--container-pad-desktop); } }

.wrm-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .wrm-grid { grid-template-columns: repeat(12,minmax(0,1fr)); } }

.wrm-stack {
  border: 1px solid var(--wr-line);
  background: var(--wr-card);
  border-radius: 1.5rem;
  padding: 2rem;
}
@media (min-width: 1024px) { .wrm-stack { grid-column: span 6 / span 6; } }

.wrm-stack-head { display: flex; align-items: center; gap: .75rem; color: var(--wr-ink); }
.wrm-icon       { width: 1.25rem; height: 1.25rem; color: var(--wr-coral); flex-shrink: 0; }

.wrm-eyebrow {
  font-family: var(--wr-font-mono);
  font-size: var(--wr-font-eyebrow);
  text-transform: uppercase; letter-spacing: var(--wr-ls-eyebrow);
  color: var(--wr-coral);
  display: inline-flex; align-items: center; gap: .5rem;
}
.wrm-eyebrow::before { content: ""; width: var(--wr-eyebrow-dash); height: 1px; background: var(--wr-coral); }

.wrm-stack-title {
  margin: 1rem 0 0;
  font-family: var(--wr-font-display);
  font-size: var(--wr-font-title-sm); line-height: var(--wr-lh-card);
  font-weight: 600; letter-spacing: -.02em;
  color: var(--wr-ink);
}

.wrm-chips { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.wrm-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem;
  border: 1px solid var(--wr-line);
  border-radius: var(--radius-pill);
  font-family: var(--wr-font-mono);
  font-size: var(--wr-font-eyebrow);
  color: var(--wr-muted);
  background: var(--wr-paper);
}

.wrm-side { display: grid; gap: 1.5rem; }
@media (min-width: 640px)  { .wrm-side { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1024px) { .wrm-side { grid-column: span 6 / span 6; } }

.wrm-panel { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 2rem; }
.wrm-panel--ink   { background: var(--wr-ink); color: var(--wr-paper); }
.wrm-panel--ink   .wrm-panel-label { color: oklch(0.98 0.004 106 / 0.6); }
.wrm-panel--ink   .wrm-panel-value { color: var(--wr-paper); }
.wrm-panel--coral { background: var(--wr-card); border: 1px solid oklch(0.63 0.22 25 / 0.3); }
.wrm-panel--coral .wrm-panel-label { color: var(--wr-muted); }
.wrm-panel--coral .wrm-panel-value { color: var(--wr-ink); }

.wrm-panel-label {
  margin: 1rem 0 0;
  font-family: var(--wr-font-mono);
  font-size: var(--wr-font-eyebrow);
  text-transform: uppercase; letter-spacing: var(--wr-ls-eyebrow);
}
.wrm-panel-value {
  margin: .5rem 0 0;
  font-family: var(--wr-font-display);
  font-size: var(--wr-font-title-md); line-height: var(--wr-lh-title); font-weight: 600;
}
.wrm-panel-note {
  margin: .75rem 0 0;
  font-size: var(--wr-font-body); line-height: var(--wr-lh-body);
  color: var(--wr-muted);
}
.wrm-glow {
  pointer-events: none; position: absolute;
  bottom: -2.5rem; right: -2.5rem;
  width: 8rem; height: 8rem;
  border-radius: var(--radius-pill);
  background: oklch(0.63 0.22 25 / 0.2);
  filter: blur(24px);
}


/* ==========================================================================
   8. SZÁLLÍTANDÓK  (.wr-deliverables)
   ========================================================================== */

.wr-deliverables {
  position: relative;
  overflow: hidden;
  padding: var(--space-4xl) 0;
  color: var(--wr-ink);
  font-family: var(--wr-font-sans);
  -webkit-font-smoothing: antialiased;
  background: transparent;
  box-sizing: border-box;
}
.wr-deliverables *, .wr-deliverables *::before, .wr-deliverables *::after { box-sizing: border-box; }
@media (min-width: 1024px) { .wr-deliverables { padding: var(--space-5xl) 0; } }

.wr-deliverables__container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad-mobile); }
@media (min-width: 1024px)  { .wr-deliverables__container { padding: 0 var(--container-pad-desktop); } }

.wr-deliverables__header {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .wr-deliverables__header { flex-direction: row; align-items: flex-end; }
}
.wr-deliverables__heading { display: flex; flex-direction: column; gap: 1rem; }

.wr-deliverables__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--wr-font-mono);
  font-weight: 400; font-size: var(--wr-font-eyebrow); line-height: 1;
  text-transform: uppercase; letter-spacing: var(--wr-ls-eyebrow);
  color: var(--wr-coral);
  margin: 0;
}
.wr-deliverables__eyebrow-dash {
  display: inline-block;
  width: var(--wr-eyebrow-dash); height: 1px;
  background: var(--wr-coral);
  flex-shrink: 0;
}

.wr-deliverables__title {
  font-family: var(--wr-font-display);
  font-weight: 600; font-size: var(--wr-font-title-lg); line-height: var(--wr-lh-title);
  letter-spacing: var(--wr-ls-title);
  color: var(--wr-ink);
  margin: 0;
}
.wr-deliverables__title em { font-style: normal; color: var(--wr-coral); }

.wr-deliverables__lead {
  font-family: var(--wr-font-sans);
  font-weight: 400; font-size: var(--wr-font-body); line-height: var(--wr-lh-body);
  color: var(--wr-muted);
  margin: 0; max-width: 28rem;
}

.wr-deliverables__grid {
  margin-top: 2.5rem;
  display: grid; grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(27,60,111,.12);
  border: 1px solid rgba(27,60,111,.12);
  border-radius: 24px; overflow: hidden;
}
@media (min-width: 768px)  { .wr-deliverables__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .wr-deliverables__grid { grid-template-columns: 1fr 1fr 1fr; } }

.wr-deliverables__card { display: flex; flex-direction: column; padding: 1.75rem; background: var(--wr-paper); }
.wr-deliverables__card-top { display: flex; align-items: center; justify-content: space-between; }

.wr-deliverables__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-pill); flex-shrink: 0;
  background: linear-gradient(135deg,#F1F5FB 0%, var(--wr-paper) 100%);
  box-shadow: inset 0 0 0 1px rgba(27,60,111,.10), 0 4px 14px -8px rgba(27,60,111,.25);
  color: var(--wr-ink);
}
.wr-deliverables__icon svg { width: 22px; height: 22px; display: block; }

.wr-deliverables__code {
  font-family: var(--wr-font-mono);
  font-weight: 400; font-size: var(--wr-font-eyebrow); line-height: var(--wr-lh-eyebrow);
  letter-spacing: var(--wr-ls-eyebrow); text-transform: uppercase;
  color: var(--wr-muted);
}

.wr-deliverables__card-title {
  font-family: var(--wr-font-display);
  font-weight: 600; font-size: var(--wr-font-title-sm); line-height: var(--wr-lh-card);
  color: var(--wr-ink);
  margin: 1.25rem 0 0;
}
.wr-deliverables__card-desc {
  font-family: var(--wr-font-sans);
  font-weight: 400; font-size: var(--wr-font-body); line-height: var(--wr-lh-body);
  color: var(--wr-muted);
  margin: .5rem 0 0;
}
/* ==========================================================================
   9. CSOMAG TARTALMAK  (.wr-pkg)
   ========================================================================== */

.wr-pkg {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--wr-paper);
  padding: var(--space-4xl) 0;
  font-family: var(--wr-font-sans);
  color: var(--wr-ink);
  box-sizing: border-box;
}

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

@media (min-width: 1024px) {
  .wr-pkg {
    padding: var(--space-5xl) 0;
  }
}

.wr-pkg__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .wr-pkg__inner {
    padding: 0 var(--container-pad-desktop);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
}

.wr-pkg__left,
.wr-pkg__right {
  min-width: 0;
}

.wr-pkg__right {
  padding-top: 0;
}

.wr-anim {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--wr-line);
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(135deg, #fbfaf7 0%, #ffffff 50%, #f4f3ee 100%);
}

@media (max-width: 1023px) {
  .wr-anim {
    max-width: 100%;
  }
}

.wr-anim__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(26,54,102,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,54,102,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .5;
  pointer-events: none;
}

.wr-anim__svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.wr-anim__label {
  font-family: var(--wr-font-mono);
  font-size: 10px;
}

.wr-stats {
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--wr-line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.wr-stats__item {
  min-width: 0;
}

.wr-stats__item dt {
  margin: 0;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: var(--wr-font-title-md);
  line-height: var(--wr-lh-title);
  color: var(--wr-ink);
  letter-spacing: -.02em;
}

.wr-stats__item dd {
  margin: 6px 0 0;
  font-family: var(--wr-font-mono);
  font-size: var(--wr-font-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--wr-muted);
}

.wr-pkg .wr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--wr-font-mono);
  font-size: var(--wr-font-eyebrow);
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--wr-coral);
}

.wr-pkg .wr-eyebrow::before {
  content: "";
  display: inline-block;
  width: var(--wr-eyebrow-dash);
  height: 1px;
  background: var(--wr-coral);
}

.wr-pkg .wr-title {
  margin: 16px 0 32px;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: var(--wr-font-title-lg);
  line-height: var(--wr-lh-title);
  letter-spacing: var(--wr-ls-title);
  color: var(--wr-ink);
}

.wr-pkg .wr-title .wr-accent {
  color: var(--wr-coral);
}

.wr-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.wr-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 14px;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-body);
  line-height: var(--wr-lh-body);
  color: var(--wr-ink);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.wr-bullets li:hover {
  transform: translateY(-2px);
  border-color: rgba(241,56,62,.35);
  box-shadow: 0 10px 24px -16px rgba(241,56,62,.45);
}

.wr-check {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--wr-coral);
}

.wr-check path {
  stroke: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .wr-anim__svg * {
    animation: none;
  }

  .wr-bullets li {
    transition: none;
  }

  .wr-bullets li:hover {
    transform: none;
  }
}

/* ==========================================================================
   10. KAPCSOLÓDÓ SZOLGÁLTATÁSOK  (.wrk-section)
   ========================================================================== */

.wrk-section {
  background: var(--wr-paper);
  padding-block: var(--space-4xl);
  font-family: var(--wr-font-sans);
  color: var(--wr-ink);
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw; max-width: 100vw;
  box-sizing: border-box;
}
@media (min-width: 1024px) { .wrk-section { padding-block: var(--space-5xl); } }

.wrk-section * { box-sizing: border-box; }

.wrk-section .wrk-wrap {
  max-width: var(--container-max); margin-inline: auto;
  padding-inline: var(--container-pad-mobile); width: 100%;
}
@media (min-width: 1024px) { .wrk-section .wrk-wrap { padding-inline: var(--container-pad-desktop); } }

.wrk-section .wrk-head {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .wrk-section .wrk-head { flex-direction: row; align-items: flex-end; }
}

.wrk-section .wrk-eyebrow {
  font-family: var(--wr-font-mono);
  font-size: var(--wr-font-eyebrow); line-height: 1; font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--wr-ls-eyebrow);
  color: var(--wr-coral);
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0;
}
.wrk-section .wrk-eyebrow::before {
  content: ""; display: inline-block;
  width: var(--wr-eyebrow-dash); height: 1px; background: var(--wr-coral);
}

.wrk-section .wrk-title {
  margin: 1rem 0 0;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: var(--wr-font-title-lg);
  line-height: var(--wr-lh-title); letter-spacing: var(--wr-ls-title);
  color: var(--wr-ink);
}
.wrk-section .wrk-title .wrk-accent { color: var(--wr-coral); font-family: inherit; font-weight: inherit; }

.wrk-section .wrk-all {
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-button); line-height: 1.25rem;
  font-weight: var(--wr-fw-button);
  color: var(--wr-ink);
  text-decoration: none;
  transition: color .2s ease;
}
.wrk-section .wrk-all:hover { color: var(--wr-coral); }

.wrk-section .wrk-grid {
  margin-top: 2.5rem;
  display: grid; gap: 1px;
  background: var(--wr-line);
  border: 1px solid var(--wr-line);
  border-radius: 1.5rem; overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .wrk-section .wrk-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1024px) { .wrk-section .wrk-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }

.wrk-section .wrk-card {
  display: block; background: var(--wr-paper);
  padding: 1.75rem; text-decoration: none;
  color: inherit;
  transition: background .2s ease;
}
.wrk-section .wrk-card:hover { background: var(--wr-card); }

.wrk-section .wrk-ico {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 9999px;
  background: var(--wr-ink); color: var(--wr-paper);
  transition: background .2s ease;
}
.wrk-section .wrk-card:hover .wrk-ico { background: var(--wr-coral); }
.wrk-section .wrk-ico svg {
  width: 1.25rem; height: 1.25rem;
  stroke: currentColor; fill: none; display: block;
}

.wrk-section .wrk-card-title {
  margin: 1.25rem 0 0;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: var(--wr-font-title-sm); line-height: var(--wr-lh-card);
  letter-spacing: var(--wr-ls-card);
  color: var(--wr-ink);
}
.wrk-section .wrk-card-desc {
  margin: .5rem 0 0;
  font-family: var(--wr-font-sans);
  font-weight: 400;
  font-size: var(--wr-font-body); line-height: var(--wr-lh-body);
  color: var(--wr-muted);
}


/* ==========================================================================
   11. ISMERŐS HELYZETEK  (.wr-section.wr-ismeros)
   ========================================================================== */

.wr-section.wr-ismeros {
  position: relative;
  width: 100vw;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  overflow: hidden;
  background: var(--wr-surface-alt);
  padding: var(--wr-section-pad-md) 0;
  color: var(--wr-ink);
  font-family: var(--wr-font-sans);
}
@media (min-width: 1024px) { .wr-section.wr-ismeros { padding: 140px 0; } }

.wr-ismeros .wr-bg-arc {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.wr-ismeros .wr-arc-path--mobile  { display: none; }
.wr-ismeros .wr-arc-path--desktop { display: block; }

@media (max-width: 767px) {
  .wr-ismeros .wr-arc-path--desktop { display: none; }
  .wr-ismeros .wr-arc-path--mobile  { display: block; }
}
.wr-ismeros .wr-arc-path { opacity: 0; }
.wr-ismeros.is-visible .wr-arc-path {
  opacity: 1;
  animation: wrArcDrawOnce 3.5s ease forwards;
}

.wr-container { position: relative; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad-mobile); }
@media (min-width: 1024px) { .wr-container { padding: 0 var(--container-pad-desktop); } }

.wr-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .wr-grid { grid-template-columns: 5fr 7fr; gap: 64px; } }

/* Ismeros eyebrow — span-alapú (.wr-eyebrow-bar) */
.wr-ismeros .wr-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--wr-font-mono);
  font-size: var(--wr-font-eyebrow); font-weight: 600;
  letter-spacing: var(--wr-ls-eyebrow); text-transform: uppercase;
  color: var(--wr-coral);
}
.wr-eyebrow-bar { display: inline-block; width: var(--wr-eyebrow-dash); height: 1px; background: var(--wr-coral); }

.wr-ismeros .wr-display {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: var(--wr-font-title-lg);
  line-height: var(--wr-lh-title); letter-spacing: var(--wr-ls-title);
  color: var(--wr-ink);
  margin: 20px 0 0;
}
.wr-ismeros .wr-display .wr-coral { color: var(--wr-coral); }
.wr-forwhom { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-direction: column; gap: 12px; }
.wr-forwhom-item {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 18px; padding: 20px;
  box-shadow: var(--wr-shadow-soft);
}
.wr-badge {
  flex-shrink: 0; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--wr-ink); color: var(--wr-paper);
  font-family: var(--wr-font-mono); font-size: var(--wr-font-eyebrow); font-weight: 600;
}
.wr-forwhom-text { padding-top: 6px; font-size: var(--wr-font-body); line-height: var(--wr-lh-body); color: var(--wr-ink); }

.wr-problems { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 640px) { .wr-problems { grid-template-columns: 1fr 1fr; } }

.wr-problem {
  position: relative; overflow: hidden;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 18px; padding: 24px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wr-problem:hover       { transform: translateY(-4px); box-shadow: var(--wr-shadow-launch); }
.wr-problem-icon        { width: 20px; height: 20px; color: var(--wr-coral); }
.wr-problem-title       { margin: 16px 0 0; font-family: var(--wr-font-display); font-weight: 600; font-size: var(--wr-font-title-sm); line-height: var(--wr-lh-card); color: var(--wr-ink); }
.wr-problem-desc        { margin: 12px 0 0; font-size: var(--wr-font-body); line-height: var(--wr-lh-body); color: var(--wr-muted); }
.wr-problem-blob        { position: absolute; top: -32px; right: -32px; width: 96px; height: 96px; border-radius: 999px; background: oklch(0.63 0.22 25 / 0.10); transition: background .25s ease; pointer-events: none; }
.wr-problem:hover .wr-problem-blob { background: oklch(0.63 0.22 25 / 0.20); }

@media (prefers-reduced-motion: reduce) {
  .wr-problem, .wr-problem-blob { transition: none; }
  .wr-ismeros .wr-arc-path { animation: none; stroke-dashoffset: 0; }
}

/* ==========================================================================
   Arc háttér — deliverables (.wr-deliverables .wr-bg-arc)
   ========================================================================== */
.wr-deliverables .wr-bg-arc {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

.wr-deliverables .wr-arc-path {
  fill: none;
  stroke: var(--wr-coral);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  opacity: 0;
  filter: drop-shadow(0 0 8px oklch(0.63 0.22 25 / .4));
}

.wr-deliverables .wr-arc-path--mobile  { display: none; }
.wr-deliverables .wr-arc-path--desktop { display: block; }

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

.wr-deliverables.is-visible .wr-arc-path {
  opacity: 1;
  animation: wrArcDrawOnce 3.5s ease forwards;
}

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

/* === Home Hero addon === */

/* Stat elem (flex oszlop a számon + feliraton) */
.wr-home-hero__stat { display: flex; flex-direction: column; gap: .15rem; }


/* ==========================================================================
   5. PIPELINE SZEKCIÓ  (.wr-pipeline)
   --------------------------------------------------------------------------
   "A weboldaltól a vevőig — egy összefüggő pálya."
   4 kártyás grid animált SVG illusztrációkkal.
   Tokenek: design-system.css globális változókból jönnek.
   ========================================================================== */

.wr-pipeline {
  background: var(--wr-paper);
  color: var(--wr-ink);
  font-family: var(--wr-font-sans);
  padding: 80px 20px;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  .wr-pipeline { padding: 112px 40px; }
}

.wr-pipeline__inner { max-width: 1280px; margin: 0 auto; }

.wr-pipeline__head { max-width: 720px; }

.wr-pipeline__eyebrow {
  display: inline-block;
  font-family: var(--wr-font-mono);
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wr-coral);
}

.wr-pipeline__title {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.107;
  letter-spacing: -0.02em;
  color: var(--wr-ink);
  margin: 16px 0 0;
}
.wr-pipeline__title em { font-style: normal; color: var(--wr-coral); }

.wr-pipeline__lead {
  max-width: 640px;
  margin: 20px 0 0;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-lead);
  font-weight: var(--wr-fw-body);
  line-height: var(--wr-lh-lead);
  color: var(--muted-foreground);
}

.wr-pipeline__grid {
  margin-top: 56px;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .wr-pipeline__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wr-pipeline__grid { grid-template-columns: repeat(4, 1fr); } }

.wr-pipeline__card {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--wr-shadow-soft);
}

.wr-pipeline__anim {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--wr-paper) 0%, #fff 50%, rgba(218,221,227,.25) 100%);
  border-bottom: 1px solid var(--wr-line);
}
.wr-pipeline__anim svg { display: block; width: 100%; height: 100%; }

.wr-pipeline__body { padding: 24px; }

.wr-pipeline__code {
  font-family: var(--wr-font-mono);
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 0.2em;
  color: var(--wr-coral);
  text-transform: uppercase;
}

.wr-pipeline__cardtitle {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  color: var(--wr-ink);
  margin: 8px 0 0;
}
@media (min-width: 1024px) {
  .wr-pipeline__cardtitle { font-size: 26px; line-height: 33px; }
}

.wr-pipeline__desc {
  margin: 8px 0 0;
  font-family: var(--wr-font-sans);
  font-weight: var(--wr-fw-body);
  font-size: var(--wr-font-lead);
  line-height: var(--wr-lh-lead);
  color: var(--muted-foreground);
}


/* ==========================================================================
   6. SERVICES SZEKCIÓ  (.wr-services)
   --------------------------------------------------------------------------
   "Egy csapat. Egy stratégia. Egy összehangolt rendszer."
   8 kártyás grid, 1→2→4 oszlop, rácsvonalas elválasztás.
   Tokenek: design-system.css globális változókból jönnek.
   ========================================================================== */

.wr-services {
  position: relative;
  background: #f4f6f9;
  border-top: 1px solid rgba(216,221,230,.7);
  padding: 80px 0;
  font-family: var(--wr-font-sans);
  color: var(--wr-ink);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) { .wr-services { padding: 112px 0; } }

.wr-services .wr-top-tick {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 96px; height: 1px; background: rgba(240,58,71,.6);
}

.wr-services .wr-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1024px) { .wr-services .wr-container { padding: 0 40px; } }

.wr-services .wr-header {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: space-between;
  gap: 32px;
}
@media (min-width: 1024px) {
  .wr-services .wr-header { flex-direction: row; align-items: flex-end; }
}

.wr-services .wr-header-left { max-width: 42rem; }

.wr-services .wr-header-right {
  max-width: 28rem;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-lead);
  font-weight: var(--wr-fw-body);
  line-height: var(--wr-lh-lead);
  color: var(--muted-foreground);
}

.wr-services .wr-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--wr-font-mono);
  font-size: 13px; line-height: 13px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--wr-coral);
}
.wr-services .wr-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--wr-coral);
}

/* Wrike #20 H1: osztaly-alapu, hogy a h2->h1 tagvaltas (csak a Szolgaltatasok
   oldalon, page 34) NE valtoztassa a megjelenest. A fooldalon marad h2. */
.wr-services :is(h1, h2).wr-title {
  margin: 16px 0 0;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.107;
  letter-spacing: -0.03em;
  color: var(--wr-ink);
}
.wr-services :is(h1, h2).wr-title .wr-accent { color: var(--wr-coral); }

.wr-services .wr-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--wr-line);
  border-radius: 24px;
  overflow: hidden;
}
@media (min-width: 768px)  { .wr-services .wr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wr-services .wr-grid { grid-template-columns: repeat(4, 1fr); } }

/* Ha WP <p> vagy más wrapper elemet szúr be a grid gyerekei köré, az is töltse ki a cellát */
.wr-services .wr-grid > * {
  height: 100%;
  display: flex;
}

/* Kártya — belső rácsvonalas elválasztó rendszer (border alapú, WP-biztonságos) */
.wr-services .wr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  background: var(--wr-paper);
  padding: 28px;
  text-decoration: none; color: inherit;
  transition: background .25s ease;
  /* 1 oszlop: csak alsó vonal, jobb nincs */
  border-right: none;
  border-bottom: 1px solid var(--wr-line);
  border-top: none;
  border-left: none;
  margin: 0;
  box-sizing: border-box;
}
.wr-services .wr-card:last-child { border-bottom: none; }
.wr-services .wr-card:hover { background: #ffffff; }

/* 2 oszlop: páros kártyákon nincs jobb vonal, utolsó 2-nek nincs alsó */
@media (min-width: 768px) {
  .wr-services .wr-card                   { border-right: 1px solid var(--wr-line); }
  .wr-services .wr-card:last-child         { border-bottom: 1px solid var(--wr-line); }
  .wr-services .wr-card:nth-child(2n)      { border-right: none; }
  .wr-services .wr-card:nth-last-child(-n+2) { border-bottom: none; }
}

/* 4 oszlop: 4n kártyán nincs jobb, utolsó 4-nek nincs alsó */
@media (min-width: 1024px) {
  .wr-services .wr-card                     { border-right: 1px solid var(--wr-line); }
  .wr-services .wr-card:nth-child(2n)        { border-right: 1px solid var(--wr-line); }
  .wr-services .wr-card:nth-child(4n)        { border-right: none; }
  .wr-services .wr-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--wr-line); }
  .wr-services .wr-card:nth-last-child(-n+4) { border-bottom: none; }
}

.wr-services .wr-card-top {
  display: flex; align-items: center; justify-content: space-between;
}

.wr-services .wr-icon-wrap {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 9999px;
  background: var(--wr-ink); color: var(--wr-paper);
  transition: background .25s ease;
}
.wr-services .wr-card:hover .wr-icon-wrap { background: var(--wr-coral); }
.wr-services .wr-icon-wrap svg { width: 22px; height: 22px; }

.wr-services .wr-code {
  font-family: var(--wr-font-mono);
  font-size: 13px; line-height: 13px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--wr-coral);
}

.wr-services .wr-card h3 {
  margin: 20px 0 0;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  color: var(--wr-ink);
}
@media (min-width: 1024px) { .wr-services .wr-card h3 { font-size: 26px; line-height: 33px; } }

.wr-services .wr-card p {
  margin: 8px 0 0;
  font-family: var(--wr-font-sans);
  font-weight: var(--wr-fw-body);
  font-size: var(--wr-font-lead);
  line-height: var(--wr-lh-lead);
  color: var(--muted-foreground);
}

.wr-services .wr-more {
  margin-top: 20px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500;
  color: var(--wr-coral);
  opacity: .7;
  transition: opacity .25s ease;
}
.wr-services .wr-card:hover .wr-more { opacity: 1; }
.wr-services .wr-more svg { width: 14px; height: 14px; }

.wr-services .wr-icon-coral      { stroke: var(--wr-coral); }
.wr-services .wr-icon-coral-fill { fill:   var(--wr-coral); }


/* ==========================================================================
   7. PROTOCOL SZEKCIÓ  (.wr-protocol)
   --------------------------------------------------------------------------
   "Hat fázisos kilövési protokoll."
   Sötét navy háttér, gradient SVG arc, 6 kártyás 3×2 grid (1→2→3 oszlop).
   Struktúra: div-alapú (wp-kompatibilis), a működő wrp- sémát követi.
   ========================================================================== */

/* Arc draw animáció */
@keyframes wr-arc-draw {
  to { stroke-dashoffset: 0; }
}

.wr-protocol {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--wr-ink);
  color: #fff;
  padding: 80px 0;
  font-family: var(--wr-font-sans);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) { .wr-protocol { padding: 112px 0; } }

/* Azonos rácsháttér mint a wrp-section */
.wr-protocol::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

/* SVG háttér — z-index 1, kártyák mögé kerül */
.wr-protocol__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.wr-protocol__bg svg { width: 100%; height: 100%; display: block; }

/* Arc — alapállapot: rejtett, nincs animáció */
.wr-protocol__arc {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  opacity: 0;
}

/* Arc — JS adja hozzá az .is-visible osztályt (IntersectionObserver) */
.wr-protocol.is-visible .wr-protocol__arc {
  opacity: 1;
  animation: wr-arc-draw 3.5s cubic-bezier(.2,.8,.2,1) .8s forwards;
}

/* Mobil / desktop arc váltás */
.wr-protocol__arc--mobile  { display: none; }
.wr-protocol__arc--desktop { display: block; }
@media (max-width: 767px) {
  .wr-protocol__arc--desktop { display: none; }
  .wr-protocol__arc--mobile  { display: block; }
}

/* Mozgáscsökkentés preferencia */
@media (prefers-reduced-motion: reduce) {
  .wr-protocol__arc {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Belső konténer — z-index 2, az arc SVG FELETT */
.wr-protocol__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1024px) { .wr-protocol__inner { padding: 0 40px; } }

/* Eyebrow */
.wr-protocol__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 20px;
  font-family: var(--wr-font-mono);
  font-size: 13px;
  line-height: 13px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--wr-coral);
}
.wr-protocol__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--wr-coral);
  flex-shrink: 0;
}

/* H2 */
.wr-protocol__title {
  margin: 0 0 20px;
  max-width: 32rem;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.107;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* Lead */
.wr-protocol__lead {
  margin: 0 0 56px;
  max-width: 38rem;
  font-family: var(--wr-font-sans);
  font-weight: var(--wr-fw-body);
  font-size: var(--wr-font-lead);
  line-height: var(--wr-lh-lead);
  color: rgba(255,255,255,.55);
}

/* Grid — explicit display:grid hogy WP ne tudja felülírni */
.wr-protocol__steps {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px)  { .wr-protocol__steps { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .wr-protocol__steps { grid-template-columns: repeat(3, 1fr) !important; } }

/* Kártya */
.wr-protocol__step {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  padding: 28px;
  /* biztosítjuk hogy ne legyen display:inline a WP-től */
  display: block;
  box-sizing: border-box;
}

/* T-01 kód */
.wr-protocol__step-tag {
  display: block;
  margin-bottom: 12px;
  font-family: var(--wr-font-mono);
  font-size: 13px;
  line-height: 13px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--wr-coral);
}

/* Kártya H3 */
.wr-protocol__step-title {
  margin: 0 0 8px;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  color: #ffffff;
}
@media (min-width: 1024px) {
  .wr-protocol__step-title { font-size: 26px; line-height: 33px; }
}

/* Kártya leírás */
.wr-protocol__step-desc {
  margin: 0;
  font-family: var(--wr-font-sans);
  font-weight: var(--wr-fw-body);
  font-size: var(--wr-font-lead);
  line-height: var(--wr-lh-lead);
  color: rgba(255,255,255,.55);
}

/* ---------- Orbitális rakéta-motívum háttér (.wr-motif) ---------- */
/* A befoglaló szekció tartalmát a motívum fölé rendezi */
.wr-about-hero > *:not(.wr-motif):not(.wr-motif-rocket):not(.wr-motif-glow) { position: relative; z-index: 2; }

.wr-motif {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  color: inherit;
  fill: none;
}
.wr-motif__orbits        { stroke: currentColor; stroke-width: 1; opacity: .13; }
.wr-motif__orbit--dashed { stroke-dasharray: 2 12; }
.wr-motif__ticks         { stroke: currentColor; stroke-width: 1; opacity: .16; }
.wr-motif__arc           { stroke: currentColor; stroke-width: 1; opacity: .22; stroke-dasharray: 1 9; }

@media (prefers-reduced-motion: no-preference) {
  .wr-motif__arc {
    stroke-dasharray: 2200; stroke-dashoffset: 2200;
    animation: wr-motif-draw 2.4s cubic-bezier(.2,.8,.2,1) .3s forwards;
  }
  @keyframes wr-motif-draw { to { stroke-dashoffset: 0; } }
}

@media (max-width: 640px) {
  .wr-motif__ticks { display: none; }
}

/* --- Halvány rakéta kontúr --- */
.wr-motif-rocket {
  position: absolute;
  top: 50%;
  right: -80px;
  height: 120%;
  width: auto;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  display: block;
  color: var(--paper, #fbfaf6);
  fill: none;
  opacity: .05;
}
@media (min-width: 1024px) { .wr-motif-rocket { right: -40px; } }
@media (max-width: 640px)  { .wr-motif-rocket { right: -140px; opacity: .04; } }

.wr-motif-rocket__lines  { stroke: currentColor; stroke-width: 1.2; fill: none; }
.wr-motif-rocket__trail  { stroke: currentColor; stroke-width: 1.2; fill: none; stroke-dasharray: 2 10; }
.wr-motif-rocket__sparks { fill: currentColor; stroke: none; }

/* --- Glow foltok --- */
.wr-motif-glow {
  position: absolute; z-index: 0; display: block;
  border-radius: 50%; pointer-events: none;
  background: var(--coral, #f03a47);
}
.wr-motif-glow--tr { top: -128px; right: -128px; width: 480px; height: 480px; opacity: .28; filter: blur(140px); }
.wr-motif-glow--bl { bottom: 0; left: -80px; width: 320px; height: 320px; opacity: .10; filter: blur(120px); }

@media (max-width: 640px) {
  .wr-motif-glow--tr { width: 300px; height: 300px; top: -100px; right: -100px; filter: blur(100px); }
  .wr-motif-glow--bl { width: 200px; height: 200px; filter: blur(90px); }
}
/* ==========================================================================
   Webrakéta — futó szalag / ticker (.wr-ticker)
   Add-on a sections.css logikájával: KIZÁRÓLAG layout + felszín.
   Tipográfia és szín a design-system.css tokenjeiből.
   Betöltés: fonts → design-system → sections → sections-wr-ticker
   ========================================================================== */

.wr-ticker,
.wr-ticker * { box-sizing: border-box; }

.wr-ticker {
  --wr-tk-bg:       var(--paper, #fbfaf6);
  --wr-tk-fg:       rgba(27, 60, 111, .70);
  --wr-tk-accent:   var(--coral, #f03a47);
  --wr-tk-hairline: rgba(27, 60, 111, .12);
  --wr-tk-speed:    38s;

  position: relative;
  display: block;
  width: auto;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  clear: both;
  padding: 20px 0;
  background-color: var(--wr-tk-bg);
  border-top: 1px solid var(--wr-tk-hairline);
  border-bottom: 1px solid var(--wr-tk-hairline);
}
@supports (width: 100dvw) {
  .wr-ticker {
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

.wr-ticker__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: wr-ticker-scroll var(--wr-tk-speed) linear infinite;
}

.wr-ticker__group {
  list-style: none;
  margin: 0;
  padding: 0 20px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 40px;
}

.wr-ticker__item,
.wr-ticker__sep {
  font-family: var(--wr-font-mono);
  font-size: var(--wr-font-eyebrow, .75rem);
  letter-spacing: var(--wr-ls-eyebrow, .22em);
  text-transform: uppercase;
  line-height: 1;
  color: var(--wr-tk-fg);
}
.wr-ticker__sep { color: var(--wr-tk-accent); letter-spacing: 0; }

/* A track 2 azonos csoportot tartalmaz → -50% ugrásmentes hurok */
@keyframes wr-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 640px) {
  .wr-ticker { padding: 16px 0; }
  .wr-ticker__group { gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .wr-ticker__track { animation: none; }
}
@keyframes wr-team-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ==========================================================================
   RÓLUNK — „Kinek való · kinek nem"  (.wr-fit)
   ========================================================================== */

.wr-fit {
  padding: 80px 0;
  background: var(--paper, #fff);
}
@media (min-width: 1024px) {
  .wr-fit { padding: 128px 0; }
}

.wr-fit__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1024px) {
  .wr-fit__inner { padding: 0 40px; }
}

/* ---------- Head ---------- */
.wr-fit__head { max-width: 42rem; }

.wr-fit__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wr-font-mono);
  font-size: var(--wr-font-eyebrow);
  line-height: var(--wr-lh-eyebrow);
  letter-spacing: var(--wr-ls-eyebrow);
  text-transform: uppercase;
  color: var(--coral, #e8384f);
}
.wr-fit__dash {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--coral, #e8384f);
  flex: 0 0 auto;
}

.wr-fit__title {
  margin: 20px 0 0;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink, #16203c);
  text-wrap: balance;
}
.wr-fit__title em {
  font-style: italic;
  color: var(--coral, #e8384f);
}

.wr-fit__lead {
  margin: 20px 0 0;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 27px;
  color: oklch(0.46 0.03 258);
}
@media (max-width: 640px) {
  .wr-fit__lead { font-size: 16px; line-height: 26px; }
}

/* ---------- Grid ---------- */
.wr-fit__grid {
  margin-top: 56px;
  display: grid;
  gap: 32px;
}
@media (min-width: 1024px) {
  .wr-fit__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Cards ---------- */
.wr-fit__card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 40px;
}
@media (max-width: 640px) {
  .wr-fit__card { padding: 28px 24px; border-radius: 20px; }
}

.wr-fit__card--yes {
  background: var(--ink, #16203c);
  color: var(--paper, #fff);
}
.wr-fit__card--no {
  background: var(--paper, #fff);
  border: 1px solid var(--line, rgba(22, 32, 60, .12));
}

.wr-fit__glow {
  position: absolute;
  top: -64px;
  right: -64px;
  width: 192px;
  height: 192px;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--coral, #e8384f) 30%, transparent);
  filter: blur(64px);
  pointer-events: none;
}

.wr-fit__cardhead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wr-fit__badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 9999px;
}
.wr-fit__badge svg { width: 20px; height: 20px; }
.wr-fit__badge--yes {
  background: var(--coral, #e8384f);
  color: var(--paper, #fff);
}
.wr-fit__badge--no {
  background: var(--secondary, #eef1f7);
  color: var(--ink, #16203c);
}

.wr-fit__cardtitle {
  margin: 0;
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: inherit;
}
.wr-fit__card--no .wr-fit__cardtitle { color: var(--ink, #16203c); }

/* ---------- Lists ---------- */
.wr-fit__list {
  position: relative;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.wr-fit__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-body);
  line-height: 1.65;
  color: color-mix(in oklab, var(--paper, #fff) 85%, transparent);
}
.wr-fit__item--muted { color: oklch(0.46 0.03 258); }

.wr-fit__icon {
  width: 16px;
  height: 16px;
  margin-top: 5px;
  flex: 0 0 auto;
}
.wr-fit__icon--yes { color: var(--coral, #e8384f); }
.wr-fit__icon--no  { color: color-mix(in oklab, var(--ink, #16203c) 40%, transparent); }
@keyframes wr-contact-arc-draw {
  0%   { opacity: 0; stroke-dashoffset: 1; }
  10%  { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

/* Lovable-specifikus rácsos halvány háttér eltávolítása a hero-król + a
   szolgáltatás-aloldalak „Mit kapsz" animációiról (Ernő, 2026-09-03).
   A röppálya-ív (.wr-trajectory, .wr-home-hero__trajectory-*) és a lábléc-rács
   (.wr-footer__grid-bg) ÉRINTETLEN. A homepage hero-n nincs rács (csak ív). */
.wr-hero-section .trajectory-grid,
.wr-hero-section .ink-grid,
.wr-anim__grid { display: none !important; }

/* Főoldal hero — a .wr-platforms-hero SVG halvány négyzetrácsa (ph-grid/phm-grid
   pattern, opacity .08) elrejtése. CSAK a rács-rect (fill=url(#ph-grid)/#phm-grid);
   a badge-ek (#ph-pill-glass), a szaggatott összekötők, a röppálya-ív MARADNAK. */
.wr-platforms-hero [fill="url(#ph-grid)"],
.wr-platforms-hero [fill="url(#phm-grid)"] { display: none !important; }

/* =========================================================================
   SZOLGÁLTATÁS-ALOLDAL közös blokkok (Idézet / GYIK / Indítsuk) — 2026-09-03
   Globális stílus; minden aloldal a végére kapja (saját tartalommal). Tokenekkel;
   újrahasznált komponensek: .display-lg .eyebrow .btn-ghost-ink .btn-launch.
   ========================================================================= */
.wr-svc-quote { position: relative; overflow: hidden; padding-block: 5rem;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--secondary) 60%, transparent) 0%,
    var(--paper) 50%,
    color-mix(in oklab, var(--secondary) 40%, transparent) 100%); }
@media (min-width:1024px){ .wr-svc-quote { padding-block: 7rem; } }
.wr-svc-quote__inner { max-width: 56rem; margin-inline:auto; padding-inline: var(--container-pad-mobile); text-align:center; }
@media (min-width:1024px){ .wr-svc-quote__inner { padding-inline: var(--container-pad-desktop); } }
.wr-svc-quote__icon { width:2.5rem; height:2.5rem; color: var(--coral); margin:0 auto; display:block; }
.wr-svc-quote__q { margin:1.5rem 0 0; font-family: var(--wr-font-display); font-weight: var(--wr-fw-display);
  font-size: var(--wr-font-quote); line-height:1.375; letter-spacing: var(--wr-ls-card); color: var(--ink); }
.wr-svc-quote__a { margin-top:1.5rem; font-family: var(--wr-font-mono); font-size: var(--wr-font-xs);
  text-transform:uppercase; letter-spacing: var(--wr-ls-label); color: var(--muted-foreground); }

.wr-svc-faq { padding-block: 5rem; }
@media (min-width:1024px){ .wr-svc-faq { padding-block: 7rem; } }
.wr-svc-faq__grid { display:grid; gap:3rem; max-width: var(--container-max); margin-inline:auto; padding-inline: var(--container-pad-mobile); }
@media (min-width:1024px){ .wr-svc-faq__grid { grid-template-columns: 4fr 8fr; align-items:start; padding-inline: var(--container-pad-desktop); } }
.wr-svc-faq__title { margin-top:1rem; color: var(--ink); }
.wr-svc-faq__lead { margin-top:1.25rem; font-family: var(--font-sans); font-size: var(--wr-font-body); line-height: var(--wr-lh-body); color: var(--muted-foreground); }
.wr-svc-faq__cta { margin-top:2rem; }
.wr-svc-faq__item { border-bottom:1px solid var(--line); }
.wr-svc-faq__q { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 0; font-family: var(--wr-font-display); font-weight: var(--wr-fw-display);
  font-size: var(--wr-font-card-title); line-height: var(--wr-lh-card); letter-spacing: var(--wr-ls-card); color: var(--ink); transition: color .2s ease; }
.wr-svc-faq__q::-webkit-details-marker { display:none; }
.wr-svc-faq__q::after { content:""; flex:0 0 auto; width:.6rem; height:.6rem; margin-right:.25rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; }
.wr-svc-faq__item[open] .wr-svc-faq__q::after { transform: rotate(-135deg); }
.wr-svc-faq__q:hover { color: var(--coral); }
.wr-svc-faq__a { padding:0 0 1.25rem; font-family: var(--font-sans); font-size: var(--wr-font-body); line-height:1.7; color: var(--muted-foreground); max-width:60ch; }

.wr-svc-cta { padding-bottom: 5rem; }
@media (min-width:1024px){ .wr-svc-cta { padding-bottom: 7rem; } }
.wr-svc-cta__inner { max-width: 56rem; margin-inline:auto; padding-inline: var(--container-pad-mobile); text-align:center; }
@media (min-width:1024px){ .wr-svc-cta__inner { padding-inline: var(--container-pad-desktop); } }
.wr-svc-cta__lead { margin:1.25rem auto 0; max-width:42rem; font-family: var(--font-sans); font-size: var(--wr-font-body-lg); line-height: var(--wr-lh-body); color: var(--muted-foreground); }
.wr-svc-cta__btn { margin-top:2rem; }
.wr-svc-accent { color: var(--coral); }
.wr-svc-ic { width: 1rem; height: 1rem; flex:0 0 auto; }

/* =========================================================================
   FŐOLDAL — Rólunk-szekció (.wr-abouthome) + záró CTA (.wr-startcta) — 2026-09-03
   Lovable index.tsx 246-307 / 338-vég. Tokenekkel; .card-elevated/.eyebrow/
   .display-lg/.btn-launch újrahasználva. A testimonials a kettő KÖZÉ kerül
   (Optimus [wr_testimonials] shortcode).
   ========================================================================= */
.wr-abouthome { padding-block: 5rem; }
@media (min-width:1024px){ .wr-abouthome { padding-block: 7rem; } }
.wr-abouthome__grid { display:grid; gap:3rem; max-width: var(--container-max); margin-inline:auto; padding-inline: var(--container-pad-mobile); }
@media (min-width:1024px){ .wr-abouthome__grid { grid-template-columns: 5fr 7fr; gap:4rem; padding-inline: var(--container-pad-desktop); } }
.wr-abouthome__card { position:relative; overflow:hidden; padding:2.5rem; }
.wr-abouthome__card-in { position:relative; z-index:1; }
.wr-abouthome__traj { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.wr-abouthome__quote { margin:1.25rem 0 0; font-family: var(--wr-font-display); font-weight: var(--wr-fw-display); font-size: var(--wr-font-title-sm); line-height:1.375; color: var(--ink); }
.wr-abouthome__by { margin-top:2rem; display:flex; align-items:center; gap:1rem; }
.wr-abouthome__avatar { display:grid; place-items:center; width:3rem; height:3rem; border-radius:999px; background: var(--ink); color: var(--paper); font-family: var(--wr-font-display); font-size:1.125rem; font-weight:600; flex:0 0 auto; }
.wr-abouthome__name { margin:0; font-family: var(--font-sans); font-weight:500; color: var(--ink); }
.wr-abouthome__org { margin:.1rem 0 0; font-family: var(--wr-font-mono); font-size: var(--wr-font-xs); text-transform:uppercase; letter-spacing: var(--wr-ls-label); color: var(--muted-foreground); }
.wr-abouthome__title { margin-top:1rem; color: var(--ink); }
.wr-abouthome__lead { margin-top:1.5rem; max-width:36rem; font-family: var(--font-sans); font-size: var(--wr-font-body-lg); line-height: var(--wr-lh-body); color: var(--muted-foreground); }
.wr-abouthome__feats { margin-top:2rem; display:grid; gap:1rem; }
@media (min-width:640px){ .wr-abouthome__feats { grid-template-columns:1fr 1fr; } }
.wr-abouthome__feat { display:flex; gap:.75rem; border:1px solid var(--line); border-radius: var(--radius-xl); padding:1rem; }
.wr-abouthome__feat-ic { width:1.25rem; height:1.25rem; flex:0 0 auto; color: var(--coral); margin-top:.15rem; }
.wr-abouthome__feat-t { margin:0; font-family: var(--font-sans); font-weight:500; color: var(--ink); }
.wr-abouthome__feat-d { margin:.15rem 0 0; font-family: var(--font-sans); font-size: var(--wr-font-body); color: var(--muted-foreground); }
.wr-abouthome__more { margin-top:2.5rem; display:inline-flex; align-items:center; gap:.5rem; font-family: var(--font-sans); font-weight:500; color: var(--ink); text-decoration:none; transition:color .2s ease; }
.wr-abouthome__more:hover { color: var(--coral); }

.wr-startcta { padding-block: 5rem; }
@media (min-width:1024px){ .wr-startcta { padding-block: 7rem; } }
.wr-startcta__wrap { max-width:64rem; margin-inline:auto; padding-inline: var(--container-pad-mobile); }
@media (min-width:1024px){ .wr-startcta__wrap { padding-inline: var(--container-pad-desktop); } }
.wr-startcta__card { position:relative; overflow:hidden; border-radius:2rem; background: var(--ink); color: var(--paper); padding:2.5rem; }
@media (min-width:1024px){ .wr-startcta__card { padding:4rem; } }
.wr-startcta__traj { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.wr-startcta__in { position:relative; z-index:1; }
.wr-startcta__title { margin-top:1rem; max-width:36rem; color: var(--paper); }
.wr-startcta__lead { margin-top:1rem; max-width:34rem; font-family: var(--font-sans); font-size: var(--wr-font-body); line-height: var(--wr-lh-body); color: color-mix(in oklab, var(--paper) 70%, transparent); }
.wr-startcta__actions { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.wr-startcta__alt { display:inline-flex; align-items:center; gap:.5rem; border:1px solid color-mix(in oklab, var(--paper) 30%, transparent); border-radius:999px; padding:.85rem 1.5rem; font-family: var(--font-sans); font-size: var(--wr-font-button); font-weight: var(--wr-fw-button); color: var(--paper); text-decoration:none; transition: background .2s ease, color .2s ease; }
.wr-startcta__alt:hover { background: var(--paper); color: var(--ink); }
.wr-startcta .eyebrow, .wr-abouthome__card .eyebrow { }
@media (max-width: 640px) {
  .wr-lp-sec, .wr-svc-faq { padding-block: 3rem; }
  .wr-lp-req, .wr-lp-ty-hero { padding-block: 2.75rem; }
  .wr-lp-sec--pad10 { padding-block: 1.75rem; }
}

/* eyebrow középre a CTA fejléceknél */
.eyebrow--center { justify-content:center; }
/* Wrike #19: fogyo gyuru (countdown-erzet) az ora-ikon korul. CSS-only, a
   conic-gradient szoget @property-vel animaljuk, radial maszkkal gyuruve vagjuk.
   prefers-reduced-motion eseten statikus (~5/6 gyuru), nem mozog. Csak a koszono
   oldalon van egy ilyen ora (2026-09-08 meres). */
@property --wr-ty-ring { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@keyframes wr-ty-ring-deplete { from { --wr-ty-ring: 360deg; } to { --wr-ty-ring: 0deg; } }
.wr-adv__svg { display:block; width:100%; height:auto; }
.wr-blog-cta__btns .wr-startcta__alt { border-color: color-mix(in oklab, var(--paper) 40%, transparent); }
.wr-blog-related__h .wr-svc-accent { color: var(--coral); }
.wr-blogindex-hero__t .wr-svc-accent { color: var(--coral); display:block; }
.wr-blogindex-news__t .wr-svc-accent { color: var(--coral); }


/* =========================================================================
   Wrike #3 - X es PIPA IKONOK EGYSEGESITESE (Pixel, 2026-09-08)
   Erno egyseges X-et es pipat kert MINDEN oldalon: X = weboldal pirosa,
   pipa = weboldal kekje, az altala mellekelt tick.svg / close.svg alakjaval.
   MEGOLDAS: a meglevo (Lucide) stroke-ikonokat CSS-maszkkal Erno alakjara
   valtjuk es fix brand-tokenre festjuk.
   SZELEKTOR path-alak alapjan (OLVASD EL uj ikon hozzaadasa elott):
     - PIPA: main svg, amely tartalmaz <path d="M20 6 9 17l-5-5"> (Lucide "check")
     - X:    main svg, amely tartalmaz <path d="M18 6 6 18">      (Lucide "x" 1. path)
   'main'-re szukitve -> a fejlec/lablec ikonjai ERINTETLENEK.
   2026-09-08 lefedettseg: 61 ikon (38 pipa + 23 X), 5 oldalon
   (honlapkeszites 28, wordpress 10, kudarcra 12, utmutato 10, koszono 1), 0 kimaradt.
   >>> UJ IKON MAS ALAKKAL: bovitsd a szelektort az uj 'd' ertekkel, kulonben az
       uj ikon csendben kimarad az egysegesitesbol. <<<
   Regi bongeszo (nincs :has) -> szabaly figyelmen kivul, marad az eredeti ikon. */
main svg:has(> path[d="M20 6 9 17l-5-5"]) {
  background-color: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M504.502%2C75.496c-9.997-9.998-26.205-9.998-36.204%2C0L161.594%2C382.203L43.702%2C264.311c-9.997-9.998-26.205-9.997-36.204%2C0c-9.998%2C9.997-9.998%2C26.205%2C0%2C36.203l135.994%2C135.992c9.994%2C9.997%2C26.214%2C9.99%2C36.204%2C0L504.502%2C111.7C514.5%2C101.703%2C514.499%2C85.494%2C504.502%2C75.496z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M504.502%2C75.496c-9.997-9.998-26.205-9.998-36.204%2C0L161.594%2C382.203L43.702%2C264.311c-9.997-9.998-26.205-9.997-36.204%2C0c-9.998%2C9.997-9.998%2C26.205%2C0%2C36.203l135.994%2C135.992c9.994%2C9.997%2C26.214%2C9.99%2C36.204%2C0L504.502%2C111.7C514.5%2C101.703%2C514.499%2C85.494%2C504.502%2C75.496z'/%3E%3C/svg%3E") center / contain no-repeat;
  display: inline-block; stroke: none;
}
main svg:has(> path[d="M18 6 6 18"]) {
  background-color: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20329.26933%20329'%3E%3Cpath%20d='m21.339844%20329.398438c-5.460938%200-10.925782-2.089844-15.082032-6.25-8.34375-8.339844-8.34375-21.824219%200-30.164063l286.589844-286.59375c8.339844-8.339844%2021.824219-8.339844%2030.164063%200%208.34375%208.339844%208.34375%2021.824219%200%2030.164063l-286.589844%20286.59375c-4.183594%204.179687-9.621094%206.25-15.082031%206.25zm0%200'/%3E%3Cpath%20d='m307.929688%20329.398438c-5.460938%200-10.921876-2.089844-15.082032-6.25l-286.589844-286.59375c-8.34375-8.339844-8.34375-21.824219%200-30.164063%208.339844-8.339844%2021.820313-8.339844%2030.164063%200l286.589844%20286.59375c8.34375%208.339844%208.34375%2021.824219%200%2030.164063-4.160157%204.179687-9.621094%206.25-15.082031%206.25zm0%200'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20329.26933%20329'%3E%3Cpath%20d='m21.339844%20329.398438c-5.460938%200-10.925782-2.089844-15.082032-6.25-8.34375-8.339844-8.34375-21.824219%200-30.164063l286.589844-286.59375c8.339844-8.339844%2021.824219-8.339844%2030.164063%200%208.34375%208.339844%208.34375%2021.824219%200%2030.164063l-286.589844%20286.59375c-4.183594%204.179687-9.621094%206.25-15.082031%206.25zm0%200'/%3E%3Cpath%20d='m307.929688%20329.398438c-5.460938%200-10.921876-2.089844-15.082032-6.25l-286.589844-286.59375c-8.34375-8.339844-8.34375-21.824219%200-30.164063%208.339844-8.339844%2021.820313-8.339844%2030.164063%200l286.589844%20286.59375c8.34375%208.339844%208.34375%2021.824219%200%2030.164063-4.160157%204.179687-9.621094%206.25-15.082031%206.25zm0%200'/%3E%3C/svg%3E") center / contain no-repeat;
  display: inline-block; stroke: none;
}
main svg:has(> path[d="M20 6 9 17l-5-5"]) > *,
main svg:has(> path[d="M18 6 6 18"]) > * { display: none; }

/* =========================================================================
   Wrike #0 - GYIK ANIMALT LENYILAS (Pixel, 2026-09-08)
   Erno szep animalt lenyilast kert. A chevron mar animalt (.wr-svc-faq__q::after);
   itt a tartalom-magassagot animaljuk 0 -> auto.
   AZ ANIMACIOT A .wr-svc-faq__item OSZTALY VISZI (NEM a .wr-svc-faq kontener!):
   igy mind a 4 GYIK-blokk egyforman mukodik, akkor is, ha mas a kontenere. Az
   interpolate-size a .wr-svc-faq__item-en van, hogy a ::details-content
   block-size:auto animaciojahoz szukseges kulcs ott legyen, ahol a rejtes/nyitas
   is -> nem tud felig ervenyesulni.
   Elofordulas 2026-09-08: honlapkeszites (8), wordpress-weboldal-keszites (8),
   kudarcra (5), weboldal-keszites-arak (9, kontener .wr-arak-faqlist) = 30 elem.
   >>> UJ GYIK-BLOKK: hasznald a .wr-svc-faq__item/.wr-svc-faq__q/.wr-svc-faq__a
       osztalyokat -> az animaciot automatikusan megkapja. <<<
   Regi bongeszo (nincs ::details-content/interpolate-size) -> azonnali nyilas
   (mukodik, csak nem animal): graciozus degradacio. */
.wr-svc-faq__item { interpolate-size: allow-keywords; }
.wr-svc-faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size .3s ease, content-visibility .3s allow-discrete;
  content-visibility: hidden;
}
.wr-svc-faq__item[open]::details-content {
  block-size: auto;
  content-visibility: visible;
}

/* A pöttyözött keringő kör és az ívelt vonal a jobb felső sarokban. */
.wr-nl-deco {
  position: absolute; right: -4rem; top: -4rem; width: 11rem; height: 11rem;
  border: 1px dashed color-mix(in oklab, var(--paper) 15%, transparent);
  border-radius: 999px; pointer-events: none;
}
.wr-nl-deco::before {
  content: ""; position: absolute; left: 50%; top: -4px; width: .5rem; height: .5rem;
  border-radius: 999px; background: var(--coral);
  box-shadow: 0 0 16px var(--coral);
}

.wr-nl-eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--coral); }
.wr-nl-eyebrow svg,
.wr-nl-bul svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--coral); }
/* A site-szintű `main svg:has(> path[d="M20 6 9 17l-5-5"])` szabály minden
   pipát a sötét --ink színnel maszkol. A sötét kártyán ez LÁTHATATLAN pipát ad.
   MÉRVE 2026-09-09: a pipa háttérszíne oklch(0.34 0.09 260) volt, PONTOSAN a
   kártya háttere. Csak a SZÍNT írjuk felül, az egységesített alakot megtartjuk,
   és a szelektor elég erős ahhoz, hogy nyerjen (a sima `.wr-nl-bul svg` nem az). */
main .wr-nl-bul svg:has(> path[d="M20 6 9 17l-5-5"]) { background-color: var(--coral); }
.wr-nl-hl { color: var(--coral); }

.wr-nl-bul {
  margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
  font-family: var(--font-sans); font-size: var(--wr-font-sm);
  color: color-mix(in oklab, var(--paper) 60%, transparent);
}
.wr-nl-bul span { display: inline-flex; align-items: center; gap: .5rem; }
@media (min-width: 640px) {
  .wr-nl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
}
.wr-nl-field { display: block; }
.wr-nl-lab {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .375rem;
  font-family: var(--wr-font-mono); font-size: .5625rem; letter-spacing: .18em;
  text-transform: uppercase; color: color-mix(in oklab, var(--paper) 60%, transparent);
}
/* A cimke-ikonoknak NINCS width/height attributuma a markupban, ezert meret
   nelkul a bongeszo alapertelmezett 300px-es SVG-t rajzol. MERVE 2026-09-09:
   igy a nev- es a level-ikon akkora lett, mint a fel doboz. */
.wr-nl-lab svg { width: .875rem; height: .875rem; flex: 0 0 auto; }

.wr-nl-consent {
  display: flex; align-items: flex-start; gap: .625rem;
  font-family: var(--font-sans); font-size: .8125rem; line-height: 1.5;
  color: color-mix(in oklab, var(--paper) 70%, transparent);
}
.wr-nl-consent input { margin-top: .15rem; width: 1rem; height: 1rem; flex: 0 0 auto; accent-color: var(--coral); }
.wr-nl-consent a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.wr-nl-consent.wr-form-invalid { color: var(--coral); }

.wr-nl-msg { margin: .75rem 0 0; font-family: var(--font-sans); font-size: .9375rem; color: var(--paper); }

/* 1. Keringő kör: a szaggatott gyűrű forog, vele a rajta ülő korall pont. */
.wr-nl-deco { animation: wr-nl-orbit 14s linear infinite; }
@keyframes wr-nl-orbit { to { transform: rotate(360deg); } }
@keyframes wr-nl-sweep {
  0%        { transform: skewX(-18deg) translateX(-120%); opacity: 0; }
  20%, 70%  { opacity: .7; }
  100%      { transform: skewX(-18deg) translateX(240%); opacity: 0; }
}

/* 3. Lebegő szikra-ikon a felcímben. */
.wr-nl-eyebrow svg { animation: wr-nl-float 4s ease-in-out infinite; }
@keyframes wr-nl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 4. Aki csökkentett mozgást kért a rendszerében, annak MINDET kikapcsoljuk.
      Ez nem kozmetika: mozgásérzékenységnél valódi panaszt okoz. */
@media (prefers-reduced-motion: reduce) {
  .wr-nl-deco,
  .wr-blog-news::after,
  .wr-blogindex-news__box::after,
  .wr-nl-eyebrow svg { animation: none; }
}
.wr-nl-fields { display: grid; gap: 1.25rem; }
@media (min-width: 640px) {
  .wr-nl-fields { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
/* A felcím <p> burkolója se toljon a szövegen. */
.wr-blog-news > p:has(> .wr-nl-eyebrow),
.wr-blogindex-news__box > p:has(> .wr-nl-eyebrow) { margin: 0; }
/* ==========================================================================
   A LOVABLE-SPECIFIKUS HÁTTÉRRÁCS TELJES ELTÁVOLÍTÁSA (Ernő, 2026-09-09)

   2026-09-03-án már kivettünk hármat a szolgáltatás-oldalakról
   (.trajectory-grid, .ink-grid, .wr-anim__grid), de a keresés akkor NEM volt
   teljes. Ernő ma a referencia-adatlapon és a /weboldal-keszites/ oldalon is
   megtalálta. Végigmértem MINDEN CSS-fájlt: összesen 14 rácsos háttér-szabály
   van, ebből 13 ez a Lovable-minta.

   NEM display:none-nal rejtjük, hanem a HÁTTÉRKÉPET vesszük el. A különbség
   nem elméleti: a .wr-team__grid és a ::before elemek egy része egyben
   pozicionált réteg is, és a display:none egy layout-konténernél az egész
   szekciót eltüntetné. A background-image:none SOHA nem tud elrendezést törni.

   MARAD a lábléc rácsa (.wr-footer__grid-bg): azt Ernő 2026-09-03-án
   kifejezetten megtartotta, és a röppálya-ívek (.wr-trajectory) is maradnak.
   ========================================================================== */
.wr-hero-section .trajectory-grid,
.wr-hero-section .ink-grid,
.trajectory-grid,
.ink-grid,
.wr-anim__grid,
.wr-team__grid,
.wr-briefing::before,
.wrp-section::before,
.wr-protocol::before { background-image: none !important; }