/*
Theme Name:  whitel-core-theme
Theme URI:   https://whitel.hu
Author:      Whitel
Author URI:  https://whitel.hu
Description: Whitel Core Theme – klasszikus PHP sablon, shared hosting kompatibilis.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: whitel-core-theme
*/

/* TARTALOMJEGYZÉK
   ──────────────────────────────
   1.  Design tokens
   2.  Reset
   3.  Base
   4.  Logó váltás (dark / light)
   5.  Container
   6.  Header
   7.  Mobile drawer
   8.  Hero (canvas, visual, title, scramble)
   9.  Tech Stack szalag
   10. How We Work stepper
   11. Tudjuk, min gondolkozol
   12. GYIK (FAQ accordion)
   13. Gombok
   14. prefers-reduced-motion
   15. Footer
   16. Reveal animáció
   17. Lighthouse panel
   18. CookieYes cookie banner
   19. Jogi oldalak (entry-content)
   ────────────────────────────── */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {

    /* Háttér rétegek */
    --color-base:         #0D1117;
    --color-surface:      #161B22;
    --color-border:       #21262D;
    --color-muted:        #30363D;

    /* Brand kék */
    --color-accent:       #4DA3E8;
    --color-brand:        #308BD9;
    --color-accent-deep:  #1a6aad;

    /* Szöveg */
    --color-text:         #E6EDF3;
    --color-text-muted:   #8B949E;
    --color-text-subtle:  #4a5568;

    /* Státusz */
    --color-success:      #3fb950;
    --color-warning:      #d29922;
    --color-orange:       #f0883e;
    --color-danger:       #f85149;
    --color-rating:       #f0b429;

    /* Szöveg accent háttéren (mindig sötét) */
    --color-on-accent:    #0D1117;

    /* Emelt felület (dropdown, tooltip) */
    --color-surface-raised: #1c2128;

    /* Glassmorphism */
    --glass-bg:           rgba(22, 27, 34, 0.7);
    --glass-border:       rgba(77, 163, 232, 0.15);
    --glass-blur:         blur(12px);

    /* Tipográfia */
    --font-sans:          'GeistSans', -apple-system, sans-serif;
    --font-mono:          'GeistMono', monospace;
    --font-pixel:         'GeistPixel', monospace;

    /* Layout */
    --header-height:          84px;
    --header-height-shrunk:   64px;
    --section-padding:        clamp(4rem, 8vw, 7rem);
    --container-max:          1200px;
    --radius-sm:              6px;
    --radius-md:              10px;
    --radius-lg:              16px;
}

[data-theme="light"] {
    --color-base:        #F5F5F5;
    --color-surface:     #FFFFFF;
    --color-border:      #E2E8F0;
    --color-muted:       #CBD5E1;

    --color-text:        #0D1117;
    --color-text-muted:  #4a5568;
    --color-text-subtle: #8B949E;

    --glass-bg:          rgba(245, 245, 245, 0.8);
    --glass-border:      rgba(48, 139, 217, 0.15);

    --color-surface-raised: #FFFFFF;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

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

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

button {
    cursor:     pointer;
    background: none;
    border:     none;
    padding:    0;
}

ul, ol {
    list-style: none;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

body {
    font-family:      var(--font-sans);
    font-size:        16px;
    line-height:      1.7;
    color:            var(--color-text);
    background-color: var(--color-base);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top:      var(--header-height);
}

/* ==========================================================================
   5. Container
   ========================================================================== */

.container {
    width:     100%;
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 clamp(1rem, 4vw, 2rem);
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.site-header {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    z-index:          50;
    height:           var(--header-height);
    display:          flex;
    align-items:      center;
    background:       transparent;
    transition:       height 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.site-header.is-scrolled {
    height:           var(--header-height-shrunk);
    background:       var(--glass-bg);
    backdrop-filter:  var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom:    0.5px solid var(--glass-border);
}

.site-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
}

.site-header__logo img {
    height: 44px;
    width: auto;
    display: block;
}

/* Alapértelmezett: mindkettő rejtve */
.site-header__logo-light { display: none; }
.site-header__logo-dark  { display: none; }

/* Dark mód */
[data-theme="dark"] .site-header__logo-dark  { display: block; }
[data-theme="dark"] .site-header__logo-light { display: none; }

/* Light mód */
[data-theme="light"] .site-header__logo-dark  { display: none; }
[data-theme="light"] .site-header__logo-light { display: block; }

.site-header__nav {
    display: none;
}

@media (min-width: 1024px) {
    .site-header__nav {
        display: flex;
    }
}

.site-header__menu {
    display:     flex;
    align-items: center;
    gap:         2rem;
}

.site-header__menu a {
    position:    relative;
    font-size:   15px;
    font-weight: 500;
    color:       var(--color-text);
}

.site-header__menu .current-menu-item > a {
    color: var(--color-accent);
}

/* Nav decoder effekt — JS hozza létre a .nd-* struktúrát */
.nd-link {
    display: inline-block;
}

.nd-ghost {
    visibility: hidden;
}

.nd-overlay {
    position:       absolute;
    left:           0;
    top:            50%;
    transform:      translateY(-50%);
    display:        flex;
    align-items:    center;
    white-space:    nowrap;
    pointer-events: none;
}

.nd-char {
    display:    inline-block;
    color:      var(--color-text);
    transition: color 0.08s ease;
}

.nd-char.nd-scrambled {
    color:       var(--color-accent);
    text-shadow: 0 0 8px rgba(77, 163, 232, 0.45);
}

.site-header__actions {
    display:     flex;
    align-items: center;
    gap:         1rem;
}

.site-header__theme-toggle {
    color:      var(--color-text-muted);
    transition: color 0.2s ease;
    display:    flex;
    align-items: center;
}

.site-header__theme-toggle:hover {
    color: var(--color-text);
}

.icon-moon { display: none; }
.icon-sun  { display: block; }

[data-theme="dark"]  .icon-moon { display: block; }
[data-theme="dark"]  .icon-sun  { display: none; }

[data-theme="light"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: block; }

/* Hamburger */
.hamburger {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    padding:        4px;
}

@media (min-width: 1024px) {
    .hamburger {
        display: none;
    }
}

.hamburger__line {
    display:          block;
    width:            22px;
    height:           2px;
    background-color: var(--color-text-muted);
    border-radius:    2px;
    transition:       transform 0.25s ease, opacity 0.25s ease;
}

.hamburger.is-active .hamburger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active .hamburger__line:nth-child(2) {
    opacity: 0;
}
.hamburger.is-active .hamburger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   7. Mobile drawer
   ========================================================================== */

.mobile-drawer {
    position:   fixed;
    inset:      0;
    z-index:    60;
    visibility: hidden;
    overflow:   hidden; /* Clip-eli a __nav-ot ami transform: translateX(100%)-tal off-screen
                           jobbra van toldva zart allapotban. E nelkul a transformed __nav
                           hozzaadodik a body szelessegehez = mobil horizontal overflow.
                           Nyitott allapotban a nav a viewport-en belul van (translateX(0)),
                           igy nem zavar. */
    transition: visibility 0s linear 0.3s; /* zaraskor a child overlay/nav animacio (0.3s) lefuthat, mielott a parent eltunik */
}

.mobile-drawer.is-open {
    visibility: visible;
    transition: visibility 0s linear 0s; /* nyitaskor azonnal lathato, hogy a child animaciok latszanak */
}

.mobile-drawer__overlay {
    position:    absolute;
    inset:       0;
    background:  rgba(0, 0, 0, 0.6);
    opacity:     0;
    transition:  opacity 0.3s ease;
    will-change: opacity;
}

.mobile-drawer.is-open .mobile-drawer__overlay {
    opacity: 1;
}

.mobile-drawer__nav {
    position:         absolute;
    top:              0;
    right:            0;
    width:            min(320px, 85vw);
    height:           100%;
    background:       var(--glass-bg);
    backdrop-filter:  var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-left:      0.5px solid var(--glass-border);
    padding:          1.5rem;
    display:          flex;
    flex-direction:   column;
    overflow-y:       auto;
    transform:        translateX(100%);
    transition:       transform 0.3s ease;
    will-change:      transform; /* iOS Safari GPU layer promocio - blur+transform stabil kompozit */
}

.mobile-drawer.is-open .mobile-drawer__nav {
    transform: translateX(0);
}

.mobile-drawer__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-bottom:  1.25rem;
    border-bottom:   0.5px solid var(--color-border);
    margin-bottom:   1.25rem;
    flex-shrink:     0;
}

.mobile-drawer__logo {
    display:     flex;
    align-items: center;
}

.mobile-drawer__close {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   var(--radius-sm);
    color:           var(--color-text-muted);
    transition:      color 0.2s ease, background 0.2s ease;
    flex-shrink:     0;
}

.mobile-drawer__close:hover {
    color:      var(--color-text);
    background: rgba(255, 255, 255, 0.05);
}

.mobile-drawer__menu {
    display:        flex;
    flex-direction: column;
    list-style:     none;
    margin:         0;
    padding:        0;
}

.mobile-drawer__menu li {
    border-bottom: 0.5px solid var(--color-border);
}

.mobile-drawer__menu a {
    display:     block;
    padding:     0.9rem 0;
    font-size:   1rem;
    font-weight: 500;
    color:       var(--color-text-muted);
    transition:  color 0.2s ease;
}

.mobile-drawer__menu a:hover {
    color: var(--color-accent);
}

.mobile-drawer__menu .current-menu-item > a,
.mobile-drawer__menu .current-menu-item > a:hover {
    color: var(--color-accent);
}

.mobile-drawer__cta {
    margin-top:  auto;
    padding-top: 1.5rem;
    flex-shrink: 0;
}

.mobile-drawer__cta a {
    display:       block;
    text-align:    center;
    padding:       0.875rem 1rem;
    background:    var(--color-accent);
    color:         #fff;
    border-radius: var(--radius-md);
    font-size:     0.9375rem;
    font-weight:   600;
    transition:    background 0.2s ease, transform 0.2s ease;
}

.mobile-drawer__cta a:hover {
    background: var(--color-brand);
    transform:  translateY(-2px);
}

/* ==========================================================================
   8. Hero
   ========================================================================== */

.hero {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
}

.hero__content {
    max-width: 720px;
}

.hero__title {
    font-size:      clamp(2.5rem, 6vw, 4.5rem);
    font-weight:    800;
    line-height:    1.1;
    letter-spacing: -0.03em;
    color:          var(--color-text);
    margin-bottom:  1.5rem;
    min-height:     2.2em; /* 2 sor × line-height 1.1 — layout shift ellen */
}

.hero__subtitle {
    font-size:     clamp(1rem, 2vw, 1.25rem);
    color:         var(--color-text-muted);
    margin-bottom: 2.5rem;
    max-width:     560px;
}

.hero__actions {
    display:   flex;
    gap:       1rem;
    flex-wrap: wrap;
}

/* Alcím animált belépés */
.hero__subtitle {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.hero__subtitle.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gombok animált belépés */
.hero__actions {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 1s ease, transform 1s ease;
}

.hero__actions.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero__title::after { display: none; }
    .hero__subtitle,
    .hero__actions {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =============================================
   HERO CANVAS ANIMÁCIÓ
   style.css-be illeszd a .hero blokk után
   ============================================= */

.hero {
    position: relative;
    overflow: hidden;
}

.hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Kattintható hero — crosshair kurzor */
.hero--interactive {
    cursor: crosshair;
}

/* Tartalom előtérben */
.hero__inner {
    position: relative;
    z-index: 1;
}

/* Scan-line a főcímen */
.hero__title {
    position: relative;
}

.hero__title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(77, 163, 232, 0.45),
        transparent
    );
    animation: hero-scan 5s ease-in-out infinite;
    top: 0;
    pointer-events: none;
}

@keyframes hero-scan {
    0%   { top: 0;    opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 0.25; }
    100% { top: 100%; opacity: 0; }
}

/* Kattintás hint */
.hero__canvas-hint {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--color-border);
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.6s ease;
    white-space: nowrap;
}

.hero__canvas-hint.is-hidden {
    opacity: 0;
}

/* Reduced motion: canvas elrejtése */
@media (prefers-reduced-motion: reduce) {
    .hero__canvas {
        display: none;
    }
    .hero__title::after {
        display: none;
    }
}

/* =============================================
   HERO VISUAL — 60/40 grid
   Mindkét cím-sor mindig jelen van → magasság konstans
   → align-items: center biztonságos, nincs layout shift
   ============================================= */

.hero__inner {
    display:               grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows:    100vh;   /* fix sormagasság → panel pozíció állandó */
    gap:                   clamp(2rem, 4vw, 4rem);
    align-items:           center;
}

.hero__visual {
    display:         flex;
    justify-content: center;
    opacity:         0;
    transform:       translateX(20px);
    transition:      opacity 0.8s ease, transform 0.8s ease;
}

.hero__visual.is-visible {
    opacity:   1;
    transform: translateX(0);
}

@media (max-width: 900px) {
    .hero__inner {
        grid-template-columns: 1fr;
    }
    .hero__visual {
        transform: translateY(16px);
    }
    .hero__visual.is-visible {
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .hero__inner {
        grid-template-rows: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* =============================================
   HERO TITLE — LINE2 brand accent
   ============================================= */

/* Shimmer gradient + glow a "Mi tudjuk, hogyan." sorra */
.hero__title--line2-accent {
    background: linear-gradient(
        90deg,
        #308BD9  0%,
        #4DA3E8 25%,
        #E6EDF3 50%,
        #4DA3E8 75%,
        #308BD9 100%
    );
    background-size:          200% auto;
    -webkit-background-clip:  text;
    background-clip:          text;
    -webkit-text-fill-color:  transparent;
    color:                    transparent;
    text-shadow:              0 0 18px rgba(77, 163, 232, 0.5),
                              0 0 40px rgba(77, 163, 232, 0.2);
    animation:                hero-line2-shimmer 3.5s linear infinite;
}

@keyframes hero-line2-shimmer {
    from { background-position: 0%    center; }
    to   { background-position: 200%  center; }
}

/* Reduced motion: gradient megmarad, animáció kikapcsol */
@media (prefers-reduced-motion: reduce) {
    .hero__title--line2-accent {
        animation:   none;
        background-position: 0% center;
        text-shadow: none;
    }
}

/* =============================================
   LIGHTHOUSE PANEL
   ============================================= */

.lh-panel {
    background:          var(--glass-bg);
    border:              1px solid var(--glass-border);
    border-radius:       var(--radius-lg);
    backdrop-filter:     var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding:             1.5rem;
    width:               100%;
    max-width:           320px;
    box-shadow:          0 0 40px rgba(77, 163, 232, 0.06),
                         0 8px 32px rgba(0, 0, 0, 0.4);
}

.lh-panel__header {
    display:       flex;
    align-items:   center;
    gap:           0.35rem;
    margin-bottom: 1.5rem;
}

.lh-panel__dot {
    display:       inline-block;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    flex-shrink:   0;
}

.lh-panel__title {
    margin-left:    0.5rem;
    font-family:    var(--font-mono);
    font-size:      0.65rem;
    letter-spacing: 0.14em;
    color:          var(--color-text-muted);
    text-transform: uppercase;
}

.lh-panel__grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1.25rem 0.75rem;
    margin-bottom:         1.25rem;
}

.lh-score {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.45rem;
    cursor:         default;
}


.lh-score__ring-wrap {
    position: relative;
    width:    64px;
    height:   64px;
}

.lh-score__svg {
    width:     64px;
    height:    64px;
    transform: rotate(-90deg);
}

.lh-score__track {
    fill:           none;
    stroke:         var(--color-muted);
    stroke-width:   4;
    stroke-linecap: round;
}

.lh-score__fill {
    fill:               none;
    stroke:             var(--color-success);
    stroke-width:       4;
    stroke-linecap:     round;
    stroke-dasharray:   150.8;
    stroke-dashoffset:  150.8;
}

.lh-score:hover .lh-score__fill {
    filter: drop-shadow(0 0 6px rgba(63, 185, 80, 0.65));
}

.lh-score__num {
    position:    absolute;
    top:         50%;
    left:        50%;
    transform:   translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--color-text);
    line-height: 1;
}

.lh-score__label {
    font-family:    var(--font-mono);
    font-size:      0.55rem;
    letter-spacing: 0.08em;
    color:          var(--color-text-muted);
    text-align:     center;
    text-transform: uppercase;
}

.lh-panel__footer {
    border-top:  1px solid var(--color-border);
    padding-top: 0.75rem;
    text-align:  center;
}

.lh-panel__url {
    font-family:    var(--font-mono);
    font-size:      0.6rem;
    color:          var(--color-text-subtle);
    letter-spacing: 0.06em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .lh-score     { transition: none; }
    .hero__visual { opacity: 1; transform: none; transition: none; }
}

/* =============================================
   TECH STACK SZALAG
   style.css-be illeszd a .hero blokk után
   ============================================= */

/* ---- Szekció keret ---- */
.tech-stack {
    position: relative;
    overflow: hidden;
    padding: 3rem 0 3.5rem;
    border-top:    0.5px solid var(--color-border);
    border-bottom: 0.5px solid var(--color-border);
    background: var(--color-surface);
}

/* ---- Széleken halványítás — szélesebb fade zóna ---- */
.tech-stack__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100vw - var(--container-max)) / 2 + clamp(3rem, 10vw, 8rem));
    min-width: 80px;
    z-index: 2;
    pointer-events: none;
}

.tech-stack__fade--left {
    left: 0;
    background: linear-gradient(
        to right,
        var(--color-surface) 0%,
        var(--color-surface) 75%,
        transparent 100%
    );
}

.tech-stack__fade--right {
    right: 0;
    background: linear-gradient(
        to left,
        var(--color-surface) 0%,
        var(--color-surface) 75%,
        transparent 100%
    );
}

/* ---- Mozgó sáv ---- */
.tech-stack__track-wrap {
    display: flex;
    width: max-content;
    /* A wrap mozog -50%-ot = pontosan egy track szélességet → zökkenőmentes loop */
    animation: marquee 55s linear infinite;
}

.tech-stack__track {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0 1.25rem;
    flex-shrink: 0;
}

/* Hover: az egész szalag megáll */
.tech-stack--paused .tech-stack__track-wrap {
    animation-play-state: paused;
}

/* Reveal: marquee áll amíg nem scrollolnak oda */
.tech-stack--waiting .tech-stack__track-wrap {
    animation-play-state: paused;
}

/* Reveal: elemek fade-in + slide-up belépés */
.tech-stack--waiting .tech-stack__item {
    opacity: 0;
    transform: translateY(16px);
}

.tech-stack__item.is-revealed {
    opacity: 0.65 !important;
    transform: translateY(0) !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}

.tech-stack__item.is-revealed:hover {
    opacity: 1 !important;
    transform: translateY(-1px) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tech-stack__track-wrap {
        animation:       none;
        flex-wrap:       wrap;
        width:           auto;
        justify-content: center;
    }
}

/* ---- Egyes elemek — Glow Cards, nagy ikon, hover label ---- */
.tech-stack__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    cursor: default;
    padding: 0.5rem;
    background: none;
    border: none;
    transition: opacity 0.3s ease;
    opacity: 0.5;
    perspective: 400px;
}

.tech-stack__item:hover {
    opacity: 1;
}

.tech-stack__item img {
    width:  42px;
    height: 42px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
    transition: filter 0.3s ease, transform 0.3s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Hover: eredeti SVG szín */
.tech-stack__item:hover img {
    filter: none;
}

/* Light mód — nincs extra stílus keret nélkül */

[data-theme="light"] .tech-stack__item img {
    filter: brightness(0);
}

[data-theme="light"] .tech-stack__item:hover img {
    filter: none;
}

/* Label: rejtett, hover-re alulról fade-in tooltip */
.tech-stack__item span {
    position: absolute;
    bottom: -1.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
}

.tech-stack__item:hover span {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* =============================================
   ÚJRATERVEZÉS SZEKCIÓ — Before/After slider
   ============================================= */

.redesign {
    padding: var(--section-padding) 0;
    background: var(--color-base);
    position: relative;
}

.redesign::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(77,163,232,0.25), transparent);
    box-shadow: 0 0 8px rgba(77,163,232,0.15), 0 0 24px rgba(77,163,232,0.06);
    animation: divider-breathe 5s ease-in-out infinite;
}

@keyframes divider-breathe {
    0%, 100% { opacity: 0.5; transform: scaleX(0.92); }
    50%      { opacity: 1;   transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .redesign::after {
        animation: none;
        opacity: 0.7;
        transform: scaleX(1);
    }
}

.redesign__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 3rem);
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

/* ---- Slider ---- */
.ba-slider {
    position:      relative;
    width:         520px;
    min-width:     280px;
    aspect-ratio:  4/3;
    border-radius: var(--radius-lg);
    overflow:      hidden;
    cursor:        col-resize;
    user-select:   none;
    flex-shrink:   0;
    border:        0.5px solid var(--glass-border);
    box-shadow:
        0  0  0    0.5px var(--glass-border),
        0  1px  2px rgba(0, 0, 0, 0.08),
        0  4px  8px rgba(0, 0, 0, 0.10),
        0  8px 16px rgba(0, 0, 0, 0.10),
        0 16px 32px rgba(0, 0, 0, 0.12),
        0 32px 64px rgba(0, 0, 0, 0.08);
    touch-action:  pan-y;
    transition:    box-shadow 0.3s ease, border-color 0.3s ease;
}

.ba-slider:hover {
    border-color:  rgba(77, 163, 232, 0.25);
    box-shadow:
        0  0  0    0.5px rgba(77, 163, 232, 0.25),
        0  1px  2px rgba(0, 0, 0, 0.08),
        0  4px  8px rgba(0, 0, 0, 0.10),
        0  8px 16px rgba(0, 0, 0, 0.12),
        0 16px 32px rgba(0, 0, 0, 0.14),
        0 32px 64px rgba(0, 0, 0, 0.10),
        0  0  20px rgba(48, 139, 217, 0.10);
}

.ba-panel-after,
.ba-panel-before {
    position: absolute;
    inset:    0;
}

.ba-panel-after img,
.ba-panel-before img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: top center;
    display:         block;
    opacity:         0;
    transition:      opacity 0.35s ease;
}

.ba-panel-after img.is-active,
.ba-panel-before img.is-active {
    opacity: 1;
}

/* Tab valtaskor aktivalodo atmenet - slider handle 100% -> 50% animalt csusztatas */
.ba-slider.is-animating .ba-panel-before {
    transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.ba-slider.is-animating .ba-divider,
.ba-slider.is-animating .ba-handle {
    transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.ba-panel-before {
    clip-path:   inset(0 50% 0 0);
    will-change: clip-path;
    z-index:     2;
}

/* ---- Elválasztó ---- */
.ba-divider {
    position:       absolute;
    top: 0; bottom: 0;
    left:           50%;
    width:          2px;
    background:     rgba(255,255,255,0.9);
    transform:      translateX(-50%);
    z-index:        10;
    pointer-events: none;
    box-shadow:     0 0 12px rgba(255,255,255,0.4);
}

[data-theme="light"] .ba-divider {
    background: var(--color-brand);
    box-shadow: 0 0 12px rgba(48,139,217,0.3);
}

[data-theme="light"] .ba-slider {
    border-color:  rgba(48, 139, 217, 0.12);
    box-shadow:
        0  0  0    0.5px rgba(48, 139, 217, 0.10),
        0  1px  2px rgba(0, 0, 0, 0.03),
        0  4px  8px rgba(0, 0, 0, 0.04),
        0  8px 16px rgba(0, 0, 0, 0.04),
        0 16px 32px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .ba-slider:hover {
    border-color:  rgba(48, 139, 217, 0.25);
    box-shadow:
        0  0  0    0.5px rgba(48, 139, 217, 0.20),
        0  1px  2px rgba(0, 0, 0, 0.03),
        0  4px  8px rgba(0, 0, 0, 0.05),
        0  8px 16px rgba(0, 0, 0, 0.05),
        0 16px 32px rgba(0, 0, 0, 0.04),
        0  0  16px rgba(48, 139, 217, 0.06);
}

/* ---- Fogantyú ---- */
.ba-handle {
    position:       absolute;
    top: 50%; left: 50%;
    transform:      translate(-50%, -50%);
    z-index:        20;
    width: 36px; height: 36px;
    border-radius:  50%;
    background:     white;
    border:         2px solid var(--color-brand);
    box-shadow:     0 2px 12px rgba(0,0,0,0.3);
    cursor:         col-resize;
    transition:     box-shadow 0.2s, transform 0.2s;
    display:        flex;
    align-items:    center;
    justify-content:center;
}

.ba-handle::after {
    content:        '⟨⟩';
    font-family:    var(--font-mono);
    font-size:      .6rem;
    color:          var(--color-brand);
    letter-spacing: 2px;
    pointer-events: none;
}

.ba-handle:hover {
    box-shadow: 0 2px 20px rgba(48,139,216,0.5);
    transform:  translate(-50%,-50%) scale(1.1);
}

.ba-handle.is-hinting {
    animation: ba-handlePulse 1.5s ease-in-out 3;
}

@keyframes ba-handlePulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.3); transform: translate(-50%,-50%) scale(1); }
    50%      { box-shadow: 0 2px 24px rgba(48,139,216,0.6); transform: translate(-50%,-50%) scale(1.12); }
}

/* ---- Badge-ek ---- */
.ba-badge {
    position:        absolute;
    top:             14px;
    z-index:         15;
    font-family:     var(--font-mono);
    font-size:       10px;
    font-weight:     700;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    padding:         5px 12px;
    border-radius:   999px;
    pointer-events:  none;
    background:      rgba(13, 17, 23, 0.78);
    border:          1px solid rgba(255, 255, 255, 0.12);
    text-shadow:     0 1px 2px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ba-badge--before {
    left:  14px;
    color: #fff;
}

.ba-badge--after {
    right: 14px;
    color: var(--color-accent);
}

/* ---- Szöveg oldal ---- */
.redesign__text { flex: 1; }

.redesign__title {
    font-size:      clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight:    800;
    line-height:    1.2;
    letter-spacing: -0.02em;
    margin-bottom:  1rem;
}

.redesign__title em {
    font-style: normal;
    color:      var(--color-accent);
}

/* ---- Tab switcher (pill style) ---- */
.redesign-tabs {
    display:       inline-flex;
    background:    var(--color-surface);
    border:        0.5px solid var(--color-border);
    border-radius: 100px;
    padding:       3px;
    gap:           2px;
    margin-bottom: 1.75rem;
}

.redesign-tab {
    font-family:   var(--font-sans);
    font-size:     13px;
    font-weight:   500;
    color:         var(--color-text-muted);
    background:    transparent;
    border:        none;
    border-radius: 100px;
    padding:       0.45rem 1.1rem;
    cursor:        pointer;
    transition:    color 0.25s ease, background 0.25s ease;
    white-space:   nowrap;
}

.redesign-tab:hover { color: var(--color-text); }

.redesign-tab.is-active {
    background: var(--color-base);
    color:      var(--color-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 0.5px var(--color-border);
}

[data-theme="light"] .redesign-tab.is-active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 0.5px var(--color-border);
}

.redesign-tab:focus-visible {
    outline:        2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ---- Tab content ---- */
.redesign-content { min-height: 0; }

.redesign-panel {
    display:   none;
    animation: redesign-panel-in 0.3s ease;
}

.redesign-panel.is-active { display: block; }

@keyframes redesign-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.redesign-panel__desc {
    font-size:     0.95rem;
    color:         var(--color-text-muted);
    line-height:   1.8;
    margin-bottom: 1.25rem;
}

/* ---- Feature list (check marks) ---- */
.redesign-features {
    list-style:     none;
    display:        flex;
    flex-wrap:      wrap;
    gap:            0.5rem 1.25rem;
    margin-bottom:  1.75rem;
}

.redesign-features li {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    font-size:   0.85rem;
    color:       var(--color-text);
}

.redesign-features__check {
    flex-shrink: 0;
    width:       18px;
    height:      18px;
    color:       var(--color-success);
}

/* ---- Dashboard strip (horizontal stats bar) ---- */
.redesign-scan {
    margin-top:            1.5rem;
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0;
    background:            rgba(10,10,10,0.92);
    border:                0.5px solid var(--glass-border);
    border-radius:         var(--radius-md);
    padding:               0.7rem 0.4rem;
    overflow:              hidden;
}

[data-theme="light"] .redesign-scan { background: rgba(246,248,250,0.9); }

.scan-header { display: none; }

.scan-row {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.3rem;
    padding:         0.35rem 0.5rem;
    border-right:    1px solid rgba(255,255,255,0.08);
    opacity:         0;
    transform:       translateY(4px);
    transition:      opacity 0.3s ease, transform 0.3s ease;
}

[data-theme="light"] .scan-row { border-right-color: rgba(0,0,0,0.08); }

.scan-row:last-child { border-right: none; }

.scan-row.is-visible {
    opacity:   1;
    transform: translateY(0);
}

.scan-row__prefix,
.scan-row__dots,
.scan-row__check { display: none; }

.scan-row__label {
    order:          2;
    font-family:    var(--font-sans);
    font-size:      0.6rem;
    color:          var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity:        0.7;
    text-align:     center;
    white-space:    nowrap;
}

.scan-row__value {
    order:        1;
    font-family:  var(--font-mono);
    font-size:    0.95rem;
    font-weight:  600;
    color:        var(--color-accent);
    text-align:   center;
    min-width:    0;
    display:      inline-flex;
    align-items:  center;
    gap:          0.35rem;
    text-shadow:  0 0 8px rgba(77,163,232,0.25);
}

[data-theme="light"] .scan-row__value { text-shadow: none; }

.scan-row__value::before {
    content:       '';
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--color-success);
    box-shadow:    0 0 6px rgba(63,185,80,0.45);
    flex-shrink:   0;
}

/* ---- Redesign responsive ---- */
@media (max-width: 900px) {
    .redesign__inner { flex-direction: column; text-align: center; }
    .ba-slider { width: 100%; min-width: 0; max-width: 520px; }
    .redesign-tabs { justify-content: center; }
}

@media (max-width: 520px) {
    .redesign-tabs {
        display:       flex;
        flex-wrap:     wrap;
        border-radius: var(--radius-md);
        gap:           2px;
    }
    .redesign-tab {
        border-radius: var(--radius-sm);
        font-size:     12px;
        padding:       0.4rem 0.85rem;
        flex:          1 1 auto;
        text-align:    center;
    }
    .redesign-scan {
        grid-template-columns: 1fr 1fr;
        padding:               0.7rem 0.4rem;
    }
    .scan-row { padding: 0.5rem 0.4rem; }
    .scan-row:nth-child(2) { border-right: none; }
    .scan-row:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    [data-theme="light"] .scan-row:nth-child(-n+2) {
        border-bottom-color: rgba(0,0,0,0.08);
    }
    .scan-row__value { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .redesign-panel { animation: none; }
    .scan-row,
    .scan-header { opacity: 1; transform: none; transition: none; }
    .scan-row__check { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ba-handle.is-hinting { animation: none !important; }
    .ba-panel-after img,
    .ba-panel-before img { transition: none; }
    .ba-slider.is-animating .ba-panel-before,
    .ba-slider.is-animating .ba-divider,
    .ba-slider.is-animating .ba-handle { transition: none; }
}

/* =============================================
   HOGYAN DOLGOZUNK — orbital carousel
   ============================================= */

.how-we-work {
    background: var(--color-base);
    position:   relative;
}

/* Scroll terület - ezen belül sticky a carousel */
.how-we-work__scroll-area {
    height:   400vh;
    position: relative;
}

.how-we-work__sticky {
    position: sticky;
    top:      0;
    height:   100vh;
    display:  flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* ---- Fejléc ---- */
.how-we-work__header {
    text-align:    center;
    margin-bottom: 1.5rem;
}

.how-we-work__title {
    font-family:   var(--font-sans);
    font-size:     clamp(2rem, 4vw, 2.5rem);
    font-weight:   800;
    color:         var(--color-text);
    line-height:   1.1;
    margin-bottom: 0.75rem;
}

.how-we-work__subtitle {
    font-size:   1rem;
    color:       var(--color-text-muted);
    line-height: 1.6;
}

/* ---- Orbital carousel stage ---- */
.hww-orbit {
    position: relative;
    width:    100%;
    height:   min(580px, 65vh);
    cursor:   default;
}

/* ---- Circles (left-center) ---- */
.hww-circles {
    position:  absolute;
    left:      8%;
    top:       50%;
    transform: translateY(-50%);
    width:     300px;
    height:    300px;
}

.hww-circles__ring {
    position:      absolute;
    border-radius: 50%;
    left:          50%;
    top:           50%;
    transform:     translate(-50%, -50%);
}

.hww-circles__ring--outer {
    width:      100%;
    height:     100%;
    background: rgba(77, 163, 232, 0.03);
    border:     0.5px solid rgba(77, 163, 232, 0.06);
    will-change: transform;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                0 2px 8px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(77, 163, 232, 0.06);
}

.hww-circles__ring--mid {
    width:      68%;
    height:     68%;
    background: rgba(77, 163, 232, 0.06);
    border:     0.5px solid rgba(77, 163, 232, 0.1);
    will-change: transform;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25),
                0 1px 4px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(77, 163, 232, 0.08);
}

.hww-circles__ticks {
    position:      absolute;
    width:         100%;
    height:        100%;
    top:           0;
    left:          0;
    border-radius: 50%;
    overflow:      hidden;
    color:         var(--color-accent);
}

.hww-circles__ring--inner {
    width:                  42%;
    height:                 42%;
    background:             var(--glass-bg);
    border:                 2px dashed rgba(77, 163, 232, 0.12);
    backdrop-filter:        var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    display:                flex;
    align-items:            center;
    justify-content:        center;
    animation:              ring-pulse 3s ease-in-out infinite;
}

@keyframes ring-pulse {
    0%, 100% {
        box-shadow: 0 0 40px rgba(77, 163, 232, 0.08),
                    0 0 80px rgba(77, 163, 232, 0.04);
    }
    50% {
        box-shadow: 0 0 50px rgba(77, 163, 232, 0.14),
                    0 0 100px rgba(77, 163, 232, 0.07);
    }
}

/* Ikon wrapper */
.hww-circles__icon-wrap {
    width:           80px;
    height:          80px;
    overflow:        hidden;
    position:        relative;
    background:      var(--glass-bg);
    border:          0.5px solid var(--glass-border);
    border-radius:   50%;
    box-shadow:      0 0 20px rgba(77, 163, 232, 0.15),
                     0 0 40px rgba(77, 163, 232, 0.05);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.hww-circles__icon {
    width:      42px;
    height:     42px;
    color:      var(--color-accent);
    filter:     drop-shadow(0 0 10px rgba(77, 163, 232, 0.5));
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hww-circles__step-num {
    position:       absolute;
    bottom:         -2rem;
    left:           50%;
    transform:      translateX(-50%);
    font-family:    var(--font-mono);
    font-size:      0.7rem;
    letter-spacing: 0.15em;
    color:          var(--color-accent);
    opacity:        0.6;
}

/* ---- Keringő kártyák ---- */
.hww-mobile-cards {
    display: contents;
}

.hww-card {
    position:               absolute;
    left:                   0;
    top:                    0;
    width:                  420px;
    background:             var(--color-surface);
    border:                 0.5px solid var(--glass-border);
    border-radius:          var(--radius-lg);
    padding:                1.25rem;
    padding-left:           calc(1.25rem + 4px);
    cursor:                 pointer;
    overflow:               hidden;
    will-change:            transform, opacity;
    transition:             border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.hww-card.is-active {
    border-color: rgba(77, 163, 232, 0.35);
    box-shadow:   0 4px 24px rgba(77, 163, 232, 0.1),
                  0 0 48px rgba(77, 163, 232, 0.05);
}

.hww-card__border {
    position:      absolute;
    top:           20%;
    bottom:        20%;
    left:          0;
    width:         3px;
    background:    linear-gradient(
        to bottom,
        transparent,
        rgba(77, 163, 232, 0.3) 20%,
        var(--color-accent) 50%,
        rgba(77, 163, 232, 0.3) 80%,
        transparent
    );
    border-radius: 0 2px 2px 0;
    opacity:       0;
    transition:    opacity 0.4s ease, top 0.3s ease, bottom 0.3s ease;
}

.hww-card.is-active .hww-card__border {
    opacity: 1;
    top:     8%;
    bottom:  8%;
}

.hww-card__title-row {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             0.6rem;
    margin-bottom:   0.35rem;
}

.hww-card__num {
    font-family:    var(--font-mono);
    font-size:      0.6rem;
    letter-spacing: 0.12em;
    color:          var(--color-accent);
    opacity:        0.5;
    flex-shrink:    0;
    order:          1;
}

.hww-card.is-active .hww-card__num { opacity: 0.8; }

.hww-card__title {
    font-family:   var(--font-sans);
    font-size:     1.1rem;
    font-weight:   700;
    color:         var(--color-text);
    line-height:   1.2;
    transition:    color 0.3s ease;
}

.hww-card.is-active .hww-card__title { color: var(--color-accent); }

.hww-card__body {
    font-size:   0.82rem;
    color:       var(--color-text-muted);
    line-height: 1.6;
}

/* ---- CTA ---- */
.how-we-work__cta {
    text-align:  center;
    margin-top:  1.5rem;
    padding-top: 0;
}

.how-we-work__trust {
    font-family:    var(--font-mono);
    font-size:      0.7rem;
    letter-spacing: 0.04em;
    color:          var(--color-text-subtle);
    margin-top:     1rem;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .hww-circles__ring--inner { animation: none !important; }
    .hww-circles__icon { transition: none !important; }
}

/* ---- Light mode ---- */
[data-theme="light"] .hww-circles__ring--outer {
    background:   rgba(48, 139, 217, 0.04);
    border-color: rgba(48, 139, 217, 0.08);
    box-shadow:   0 8px 32px rgba(48, 139, 217, 0.1),
                  0 2px 8px rgba(0, 0, 0, 0.06),
                  inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .hww-circles__ring--mid {
    background:   rgba(48, 139, 217, 0.07);
    border-color: rgba(48, 139, 217, 0.12);
    box-shadow:   0 4px 20px rgba(48, 139, 217, 0.08),
                  0 1px 4px rgba(0, 0, 0, 0.04),
                  inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .hww-circles__ring--inner {
    box-shadow: 0 0 40px rgba(48, 139, 217, 0.06),
                0 0 80px rgba(48, 139, 217, 0.03);
}

[data-theme="light"] .hww-circles__ticks {
    color: var(--color-brand);
    opacity: 1.8;
}

[data-theme="light"] .hww-circles__ticks line {
    opacity: 0.25;
}

[data-theme="light"] .hww-circles__ticks line[stroke="var(--color-accent)"] {
    opacity: 0.5;
}

[data-theme="light"] .hww-circles__icon-wrap {
    box-shadow: 0 0 20px rgba(48, 139, 217, 0.12),
                0 0 40px rgba(48, 139, 217, 0.04);
}

[data-theme="light"] .hww-card {
    background:   rgba(255, 255, 255, 0.8);
    border-color: rgba(48, 139, 217, 0.1);
}

[data-theme="light"] .hww-card.is-active {
    border-color: rgba(48, 139, 217, 0.3);
    box-shadow:   0 4px 24px rgba(48, 139, 217, 0.08);
}

/* ---- Mobil ---- */
@media (max-width: 768px) {
    .hww-orbit {
        height: 520px;
    }

    .hww-circles {
        width:  280px;
        height: 280px;
        left:   -110px;
    }

    .hww-circles__icon-wrap {
        width:  60px;
        height: 60px;
    }

    .hww-circles__icon {
        width:  32px;
        height: 32px;
    }

    .hww-circles__step-num {
        display: none;
    }

    .hww-card {
        width: 260px !important;
    }

    .hww-card__body {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   9. Gombok — Egységes terminál stílus
   ========================================================================== */

.btn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         .65rem 1.5rem;
    font-size:       13px;
    font-weight:     500;
    font-family:     var(--font-mono);
    color:           var(--color-text-muted);
    background:      var(--color-base);
    border:          0.5px solid var(--color-border);
    border-radius:   calc(var(--radius-md) - 1px);
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background .3s ease, color .3s ease,
                     border-color .3s ease, box-shadow .3s ease;
    outline:         none;
}

.btn:hover {
    background:   rgba(77, 163, 232, 0.06);
    color:        var(--color-text);
    border-color: rgba(77, 163, 232, 0.2);
    box-shadow:   inset 0 1px 3px rgba(77, 163, 232, 0.08),
                  inset 0 0 12px rgba(77, 163, 232, 0.03);
}

.btn:focus-visible {
    outline:        2px solid var(--color-accent);
    outline-offset: 3px;
}

.btn__prefix {
    display:        inline-block;
    max-width:      0;
    overflow:       hidden;
    vertical-align: bottom;
    color:          var(--color-accent);
    margin-right:   0;
    transition:     max-width .35s cubic-bezier(.4,0,.2,1),
                    margin-right .35s ease;
}

.btn__cursor {
    display:        inline-block;
    width:          0;
    border-right:   2px solid var(--color-accent);
    margin-left:    0;
    height:         1.1em;
    vertical-align: text-bottom;
    opacity:        0;
    transition:     opacity .2s ease, width .2s ease, margin-left .2s ease;
}

.btn:hover .btn__prefix {
    max-width:    1.5rem;
    margin-right: 4px;
}

.btn:hover .btn__cursor {
    opacity:     1;
    width:       2px;
    margin-left: 4px;
    animation:   btn-cursor-blink 1s steps(1) infinite;
}

@keyframes btn-cursor-blink {
    0%,  50%  { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@media (hover: none) {
    .btn__prefix { display: none; }
    .btn__cursor { display: none; }
}

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


.hero-a__trust {
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    letter-spacing: 0.03em;
    text-align: center;
}

/* BTN — Light mode */

[data-theme="light"] .btn {
    background:   var(--color-surface);
    color:        var(--color-text-muted);
    border-color: var(--color-border);
}

[data-theme="light"] .btn:hover {
    background:   rgba(48, 139, 217, 0.08);
    color:        var(--color-text);
    border-color: rgba(48, 139, 217, 0.2);
    box-shadow:   inset 0 1px 3px rgba(48, 139, 217, 0.1),
                  inset 0 0 12px rgba(48, 139, 217, 0.04);
}

[data-theme="light"] .btn__prefix,
[data-theme="light"] .btn__cursor { color: var(--color-brand); }

[data-theme="light"] .btn__cursor { border-right-color: var(--color-brand); }

/* ============================================================
   Hero-A címsor — hover glow
   ============================================================ */

.hero-a__title:hover {
    text-shadow: 0 0 10px rgba(77,163,232,0.5),
                 0 0 30px rgba(77,163,232,0.25),
                 0 0 60px rgba(77,163,232,0.1);
}

[data-theme="light"] .hero-a__title:hover {
    text-shadow: 0 0 8px rgba(48,139,217,0.4),
                 0 0 24px rgba(48,139,217,0.2),
                 0 0 50px rgba(48,139,217,0.08);
}

/* ==========================================================================
   10. prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration:  0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}
/* ==========================================================================
   11. Footer
   ========================================================================== */

/* ---- Footer ---- */
.site-footer {
    background:  var(--color-surface);
    border-top:  0.5px solid var(--color-border);
    padding:     var(--section-padding) 0 2rem;
}

.site-footer__grid {
    display:               grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap:                   2rem;
    margin-bottom:         3rem;
}

@media (max-width: 1024px) {
    .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}

/* Brand column */
.site-footer__brand {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.site-footer__logo {
    width:      42px;
    height:     auto;
    transition: filter 0.25s ease, transform 0.25s ease;
}

.site-footer__logo:hover {
    animation: chroma-glitch 0.4s ease forwards;
}

@keyframes chroma-glitch {
    0%   { filter: none; transform: none; }
    20%  { filter: drop-shadow(-3px 0 0 rgba(255,80,80,0.65))
                   drop-shadow(3px 0 0 rgba(77,163,232,0.65));
           transform: skewX(-1.5deg); }
    60%  { filter: drop-shadow(-2px 0 0 rgba(255,80,80,0.45))
                   drop-shadow(2px 0 0 rgba(77,163,232,0.45));
           transform: skewX(0.5deg); }
    100% { filter: drop-shadow(-2px 0 0 rgba(255,80,80,0.5))
                   drop-shadow(2px 0 0 rgba(77,163,232,0.5));
           transform: skewX(0deg); }
}
.site-footer__logo--light { display: none; }
[data-theme="light"] .site-footer__logo--dark  { display: none; }
[data-theme="light"] .site-footer__logo--light { display: block; }

.site-footer__brand-top {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    padding-bottom: 1rem;
    border-bottom:  0.5px solid var(--color-border);
}

.site-footer__brand-bottom {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    padding-top:    0.25rem;
}

.site-footer__tagline {
    font-family:    var(--font-mono);
    font-size:      0.65rem;
    letter-spacing: 0.04em;
    color:          var(--color-text-subtle);
    line-height:    1.8;
    margin:         0;
}

.site-footer__tagline-prefix {
    color:   var(--color-accent);
    opacity: 0.7;
}

/* Column titles */
.site-footer__col-title {
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-text-subtle);
    margin-bottom:  1rem;
}

/* Lists */
.site-footer__list {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

.site-footer__link {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   14px;
    color:       var(--color-text-muted);
    transition:  color 0.2s ease;
}
.site-footer__link:hover { color: var(--color-text); }

/* Navigation links with > prefix animation */
.site-footer__nav-link {
    display:     flex;
    align-items: center;
    font-size:   14px;
    color:       var(--color-text-muted);
    transition:  color 0.25s ease;
}
.site-footer__nav-link:hover { color: var(--color-text); }

.site-footer__nav-link .prefix {
    display:        inline-block;
    max-width:      0;
    overflow:       hidden;
    vertical-align: bottom;
    transition:     max-width .35s cubic-bezier(.4, 0, .2, 1), margin-right .35s ease;
    color:          var(--color-accent);
    margin-right:   0;
    font-family:    var(--font-mono);
    font-size:      12px;
}
.site-footer__nav-link:hover .prefix {
    max-width:    1.5rem;
    margin-right: 4px;
}
[data-theme="light"] .site-footer__nav-link .prefix { color: var(--color-brand); }

/* wp_nav_menu in footer — match manual nav-link style */
.site-footer__nav-list a {
    display:     inline-flex;
    align-items: center;
    font-size:   14px;
    color:       var(--color-text-muted);
    transition:  color 0.25s ease;
    text-decoration: none;
}
.site-footer__nav-list a:hover { color: var(--color-text); }

.site-footer__nav-list a::before {
    content:        '>';
    display:        inline-block;
    max-width:      0;
    overflow:       hidden;
    color:          var(--color-accent);
    font-family:    var(--font-mono);
    font-size:      12px;
    transition:     max-width 0.25s ease, margin 0.25s ease;
}
.site-footer__nav-list a:hover::before {
    max-width:    1.5rem;
    margin-right: 4px;
}

.site-footer__nav-list a::after {
    content:      '';
    width:        0.5em;
    height:       2px;
    background:   var(--color-accent);
    margin-left:  2px;
    align-self:   center;
    position:     relative;
    top:          5px;
    opacity:      0;
    transition:   opacity 0.25s ease;
}

.site-footer__nav-list a:hover::after {
    opacity:   1;
    animation: footer-cursor-blink 0.8s step-end infinite;
}

@keyframes footer-cursor-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

[data-theme="light"] .site-footer__nav-list a::before { color: var(--color-brand); }
[data-theme="light"] .site-footer__nav-list a::after  { background: var(--color-brand); }

@media (prefers-reduced-motion: reduce) {
    .site-footer__nav-list a::before { transition: none; }
    .site-footer__nav-list a::after  { animation: none; display: none; }
}

/* External link icon */
.site-footer__link .external-icon {
    flex-shrink: 0;
    opacity:     0.4;
    transition:  opacity 0.2s ease;
}
.site-footer__link:hover .external-icon { opacity: 0.7; }

/* Status indicator */
.site-footer__status {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    margin-top:  0.25rem;
}

.site-footer__status-dot {
    width:         10px;
    height:        10px;
    flex-shrink:   0;
    margin-top:    4px;
    background:    var(--color-text-subtle);
    border-radius: 3px;
}

.site-footer__status-dot[data-status="green"] {
    background: linear-gradient(135deg, var(--color-success), #14b8a6);
    animation:  status-morph 4s infinite ease-in-out alternate, status-pulse 2s ease-in-out infinite;
}

.site-footer__status-dot[data-status="yellow"] {
    background: linear-gradient(135deg, var(--color-warning), #e6a817);
    animation:  status-morph 4s infinite ease-in-out alternate, status-pulse-yellow 2s ease-in-out infinite;
}

.site-footer__status-dot[data-status="orange"] {
    background: linear-gradient(135deg, var(--color-orange, #F0883E), #e67817);
    animation:  status-morph 4s infinite ease-in-out alternate, status-pulse-orange 2s ease-in-out infinite;
}

.site-footer__status-dot[data-status="red"] {
    background: linear-gradient(135deg, var(--color-danger, #f85149), #e6173e);
    animation:  status-morph 4s infinite ease-in-out alternate, status-pulse-red 2s ease-in-out infinite;
}

@keyframes status-morph {
    0%  { border-radius: 3px;  transform: rotate(0deg) scale(1); }
    50% { border-radius: 30%;  transform: rotate(90deg) scale(1.1); }
    100%{ border-radius: 50%;  transform: rotate(180deg) scale(1); }
}

@keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.4); }
    50%      { box-shadow: 0 0 0 5px transparent; }
}

@keyframes status-pulse-yellow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(210, 153, 34, 0.4); }
    50%      { box-shadow: 0 0 0 5px transparent; }
}

@keyframes status-pulse-orange {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 136, 62, 0.4); }
    50%      { box-shadow: 0 0 0 5px transparent; }
}

@keyframes status-pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.4); }
    50%      { box-shadow: 0 0 0 5px transparent; }
}

.site-footer__status-text {
    font-size:   14px;
    color:       var(--color-text-muted);
    line-height: 1.5;
}

.site-footer__contact-row {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
}

.site-footer__contact-divider {
    width:      1px;
    height:     14px;
    background: var(--color-accent);
    opacity:    0.3;
}

.site-footer__mini-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    margin-top:      1.25rem;
    padding:         0.5rem 1rem;
    font-family:     var(--font-mono);
    font-size:       13px;
    color:           var(--color-accent);
    border:          0.5px solid var(--color-accent);
    border-radius:   var(--radius-sm);
    text-decoration: none;
    opacity:         0.75;
    transition:      opacity 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.site-footer__mini-cta:hover {
    opacity:    1;
    background: rgba(77, 163, 232, 0.08);
    color:      var(--color-brand);
}

.site-footer__mini-cta svg {
    opacity:    0.7;
    flex-shrink: 0;
}

/* Bottom bar */
.site-footer__bottom {
    border-top:      0.5px solid var(--color-border);
    padding-top:     1.5rem;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             0.75rem;
}

.site-footer__copy {
    font-size: 13px;
    color:     var(--color-text-subtle);
}

.site-footer__legal {
    font-size:  13px;
    color:      var(--color-text-subtle);
    text-align: right;
}

.site-footer__legal-link {
    color:      var(--color-text-subtle);
    transition: color 0.2s ease;
}
.site-footer__legal-link:hover { color: var(--color-text-muted); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .site-footer__nav-link .prefix { transition: none; }
    .site-footer__logo:hover {
        animation: none;
        filter: drop-shadow(-2px 0 0 rgba(255,80,80,0.4))
                drop-shadow(2px 0 0 rgba(77,163,232,0.4));
    }
    .site-footer__status-dot,
    .kapcsolat-info__status-dot { animation: none; }
}
/* ============================================================
   TUDJUK, MIN GONDOLKOZOL — style.css
   Hogyan dolgozunk blokk UTÁN illesztendő.
   ============================================================ */

.section-tudjuk {
  padding: var(--section-padding) 0;
  position: relative;
  overflow: hidden;
}

/* Pont-mátrix háttér */
.section-tudjuk::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(77,163,232,0.06) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
}

.section-tudjuk .container { position: relative; z-index: 1; }

/* Fejléc */
.section-tudjuk__header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-tudjuk__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  opacity: 0.6;
  user-select: none;
  flex-shrink: 0;
}

.section-tudjuk__title {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

/* Grid */
.section-tudjuk__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 768px) {
  .section-tudjuk__grid { grid-template-columns: 1fr; }
}

/* Glassmorphism kártya */
.tudjuk-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.tudjuk-card:hover {
  border-color: rgba(77,163,232,0.38);
  transform: translateY(-3px);
}

/* Belső glow */
.tudjuk-card::before {
  content: '';
  position: absolute;
  top: -40px; left: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(77,163,232,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Ikon */
.tudjuk-card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(77,163,232,0.1);
  border: 0.5px solid rgba(77,163,232,0.2);
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  color: var(--color-accent);
  position: relative;
  z-index: 1;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.tudjuk-card:hover .tudjuk-card__icon-wrap {
  background: rgba(77,163,232,0.18);
  border-color: rgba(77,163,232,0.45);
}

/* Idézet (kérdés) */
.tudjuk-card__quote {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0 0 0.875rem;
  position: relative;
  z-index: 1;
}

/* Body szöveg */
.tudjuk-card__body {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0;
  position: relative;
  z-index: 1;
}

.tudjuk-card__body strong {
  color: var(--color-text);
  font-weight: 500;
}

/* Alsó accent vonal */
.tudjuk-card__accent {
  position: absolute;
  bottom: 0; left: 2rem; right: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,163,232,0.28), transparent);
}

/* Light mód override */
[data-theme="light"] .tudjuk-card {
  background: rgba(255,255,255,0.75);
  border-color: rgba(48,139,217,0.15);
}

[data-theme="light"] .tudjuk-card:hover {
  border-color: rgba(48,139,217,0.35);
}

[data-theme="light"] .tudjuk-card__icon-wrap {
  background: rgba(48,139,217,0.08);
  border-color: rgba(48,139,217,0.18);
}

[data-theme="light"] .tudjuk-card:hover .tudjuk-card__icon-wrap {
  background: rgba(48,139,217,0.15);
}

/* ============================================================
   AMIT VÁLLALUNK — 3 garancia kártya + EXTRA hover
   ============================================================ */

.section-vallalunk {
  padding: var(--section-padding) 0;
  background: var(--color-surface);
  position: relative;
  overflow: hidden;
}


.section-vallalunk .container { position: relative; z-index: 1; }

/* Header */
.section-vallalunk__header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-vallalunk__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  opacity: 0.6;
  user-select: none;
  flex-shrink: 0;
}

.section-vallalunk__title {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.section-vallalunk__subtitle {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

/* 3-column grid */
.section-vallalunk__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 768px) {
  .section-vallalunk__grid { grid-template-columns: 1fr; }
}

/* Card — 3D tilt ready */
.vallalunk-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  padding-left: calc(clamp(1.5rem, 3vw, 2.25rem) + 3px);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
}

.vallalunk-card:hover,
.vallalunk-card.is-hovering {
  border-color: rgba(77,163,232,0.45);
  box-shadow:
    0 8px 32px rgba(77,163,232,0.12),
    0 0 60px rgba(77,163,232,0.06);
}

/* Spotlight — positioned by JS */
.vallalunk-card__spotlight {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77,163,232,0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

.vallalunk-card.is-hovering .vallalunk-card__spotlight {
  opacity: 1;
}

/* Left accent border — gradient + traveling pulse */
.vallalunk-card__border {
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(77,163,232,0.4) 20%,
    var(--color-accent) 50%,
    rgba(77,163,232,0.4) 80%,
    transparent
  );
  border-radius: 0 2px 2px 0;
  z-index: 2;
  transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease;
}

/* Traveling pulse overlay */
.vallalunk-card__border::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.6) 50%, transparent);
  border-radius: inherit;
  opacity: 0;
  top: -40%;
  transition: opacity 0.3s ease;
}

/* Soft ambient glow beside the line */
.vallalunk-card__border::after {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
  width: 30px;
  background: linear-gradient(to right, rgba(77,163,232,0.08), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

@keyframes border-pulse-travel {
  0%   { top: -40%; opacity: 1; }
  100% { top: 120%; opacity: 0.3; }
}

.vallalunk-card.is-hovering .vallalunk-card__border {
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: linear-gradient(
    to bottom,
    var(--color-accent-deep),
    var(--color-accent) 30%,
    var(--color-brand) 70%,
    var(--color-accent-deep)
  );
  box-shadow:
    0 0 6px rgba(77,163,232,0.7),
    0 0 16px rgba(77,163,232,0.35),
    0 0 40px rgba(77,163,232,0.12);
}

.vallalunk-card.is-hovering .vallalunk-card__border::before {
  animation: border-pulse-travel 1.4s ease-in-out infinite;
}

.vallalunk-card.is-hovering .vallalunk-card__border::after {
  opacity: 1;
}

/* Static inner glow */
.vallalunk-card__glow {
  position: absolute;
  top: -40px; left: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(77,163,232,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Icon wrapper with pulse animation */
.vallalunk-card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(77,163,232,0.1);
  border: 0.5px solid rgba(77,163,232,0.2);
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  color: var(--color-accent);
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

@keyframes icon-glow-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(77,163,232,0.2), 0 0 4px rgba(77,163,232,0.4); }
  50%      { box-shadow: 0 0 28px rgba(77,163,232,0.35), 0 0 8px rgba(77,163,232,0.6); }
}

.vallalunk-card.is-hovering .vallalunk-card__icon-wrap {
  background: rgba(77,163,232,0.22);
  border-color: rgba(77,163,232,0.5);
  transform: scale(1.08);
  animation: icon-glow-pulse 2s ease-in-out infinite;
}

/* Card title — accent color on hover */
.vallalunk-card__title {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0 0 0.875rem;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.vallalunk-card.is-hovering .vallalunk-card__title {
  color: var(--color-accent);
}

/* Body text */
.vallalunk-card__body {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Bottom accent line — expands on hover */
.vallalunk-card__accent {
  position: absolute;
  bottom: 0; left: 2rem; right: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,163,232,0.28), transparent);
  z-index: 2;
  transition: height 0.3s ease, left 0.3s ease, right 0.3s ease, box-shadow 0.3s ease;
}

.vallalunk-card.is-hovering .vallalunk-card__accent {
  height: 2px;
  left: 0; right: 0;
  box-shadow: 0 0 12px rgba(77,163,232,0.3);
  background: linear-gradient(90deg, transparent, rgba(77,163,232,0.5), transparent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vallalunk-card,
  .vallalunk-card__border,
  .vallalunk-card__spotlight,
  .vallalunk-card__icon-wrap,
  .vallalunk-card__accent {
    transition: none !important;
    animation: none !important;
  }
  .vallalunk-card { transform: none !important; }
}

/* Light mode overrides */
[data-theme="light"] .vallalunk-card {
  background: rgba(255,255,255,0.75);
  border-color: rgba(48,139,217,0.15);
}

[data-theme="light"] .vallalunk-card:hover,
[data-theme="light"] .vallalunk-card.is-hovering {
  border-color: rgba(48,139,217,0.4);
  box-shadow: 0 8px 32px rgba(48,139,217,0.1), 0 0 40px rgba(48,139,217,0.04);
}

[data-theme="light"] .vallalunk-card__spotlight {
  background: radial-gradient(circle, rgba(48,139,217,0.12) 0%, transparent 70%);
}

[data-theme="light"] .vallalunk-card__border {
  background: linear-gradient(to bottom, transparent, rgba(48,139,217,0.4) 20%, var(--color-brand) 50%, rgba(48,139,217,0.4) 80%, transparent);
}

[data-theme="light"] .vallalunk-card.is-hovering .vallalunk-card__border {
  background: linear-gradient(to bottom, var(--color-accent-deep), var(--color-brand) 30%, var(--color-accent) 70%, var(--color-accent-deep));
  box-shadow: 0 0 6px rgba(48,139,217,0.5), 0 0 16px rgba(48,139,217,0.25);
}

[data-theme="light"] .vallalunk-card__border::after {
  background: linear-gradient(to right, rgba(48,139,217,0.06), transparent);
}

[data-theme="light"] .vallalunk-card__icon-wrap {
  background: rgba(48,139,217,0.08);
  border-color: rgba(48,139,217,0.18);
}

[data-theme="light"] .vallalunk-card.is-hovering .vallalunk-card__icon-wrap {
  background: rgba(48,139,217,0.18);
  border-color: rgba(48,139,217,0.4);
}

/* Light mode: stronger dot matrix */
[data-theme="light"] .section-vallalunk::before {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(48,139,217,0.18) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(48,139,217,0.08) 0.5px, transparent 0);
  background-size: 28px 28px, 14px 14px;
}

[data-theme="light"] .section-vallalunk::after {
  background: radial-gradient(ellipse at 50% 40%, transparent 30%, var(--color-base) 80%);
}

/* ============================================================
   REFERENCIÁK szekció
   ============================================================ */

.section-referenciak {
  padding: var(--section-padding) 0;
  background: var(--color-surface);
  position: relative;
  overflow: hidden;
}

.section-referenciak::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(77, 163, 232, 0.18), transparent);
  pointer-events: none;
}

.section-referenciak__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-referenciak__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  margin-bottom: 1.25rem;
}

.section-referenciak__title {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 1rem;
  line-height: 1.2;
}

.section-referenciak__subtitle {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Rács */
.referenciak-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

/* Referencia kártya */
.ref-card {
  position: relative;
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.ref-card:hover {
  transform: translateY(-4px);
  border-color: rgba(77, 163, 232, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .ref-card { transition: none; }
  .ref-card:hover { transform: none; }
}

/* Kép placeholder */
.ref-card__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
  overflow: hidden;
  position: relative;
}

.ref-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.ref-card__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ref-card:hover .ref-card__img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .ref-card:hover .ref-card__img { transform: none; }
}

/* Overlay ikon */
.ref-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ref-card:hover .ref-card__overlay {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ref-card__overlay { transition: none; }
}

.ref-card__overlay svg {
  width: 32px;
  height: 32px;
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(77, 163, 232, 0.5));
}

/* Szöveg terület */
.ref-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.ref-card__kategoria {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.ref-card__cim {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.ref-card__leiras {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-top: 0.15rem;
}

/* CTA a rács után */
.referenciak-cta {
  text-align: center;
  margin-top: 2.5rem;
}

.referenciak-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 1.25rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.referenciak-cta__link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .referenciak-cta__link { transition: none; }
}

/* Light mode */
[data-theme="light"] .ref-card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ref-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ref-card__overlay {
  background: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .ref-card__overlay svg {
  color: var(--color-brand);
  filter: none;
}

/* ============================================================
   REFERENCIÁK ALOLDAL
   ============================================================ */

.section-referenciak-page {
  background: var(--color-base);
  padding-bottom: var(--section-padding);
}

/* Override a globalis body.page:not(.home) #main padding-jat (lasd 5538 sor) */
body.page:not(.home) #main.referenciak-page-main {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* === Page top wrapper (hero + iparag pillek kozos hattere, arak oldal mintajara) ===
   Matrix rain canvas overlay-t a global.js inicializalja, kanvas-szelektor:
   canvas.bg-matrix-canvas[data-effect="matrix-whitel"]. */
.referenciak-page-top {
  position: relative;
  overflow: hidden;
  background-color: var(--color-base);
}

.referenciak-page-top::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 500px at 50% 33%, rgba(77,163,232,0.22) 0%, rgba(13,17,23,0.35) 50%, var(--color-base) 100%);
  pointer-events: none;
  z-index: 1;
  transform-origin: 50% 33%;
  will-change: transform, opacity;
  animation: bg-spotlight-pulse 12s ease-in-out infinite;
}

.referenciak-page-top::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent 0%, var(--color-base) 100%);
  pointer-events: none;
  z-index: 1;
}

.referenciak-page-top > * {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .referenciak-page-top::before { animation: none; }
}

[data-theme="light"] .referenciak-page-top::before {
  background: radial-gradient(ellipse 700px 500px at 50% 33%, rgba(48,139,217,0.14) 0%, rgba(245,245,245,0.4) 50%, var(--color-base) 100%);
}

/* === Hero === */
.referenciak-page-hero {
  padding: calc(var(--header-height) + 3rem) 0 1.5rem;
  text-align: center;
  background: transparent;
}

.referenciak-page-hero__title {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.referenciak-page-hero__subtitle {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
  text-shadow: 0 1px 0 var(--color-base);
}

/* === Globalis info-tip (tooltip a kerdojeles ikon button-bol) ===
   Atvett a page-arak.php inline blokkbol; jovoben minden oldal hasznalhatja.
   Egy modifier (.info-tip--accent) brand kek szinure valt, ha az alap piros
   (figyelmezteto) szin nem illik a kontextushoz. */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  padding: 0;
  background: none;
  border: none;
  cursor: help;
  color: #CC6B6B;
  vertical-align: middle;
  transition: color 0.2s ease;
}

.info-tip:hover,
.info-tip:focus-visible {
  color: #D97878;
}

.info-tip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 50%;
}

.info-tip__icon {
  width: 13px;
  height: 13px;
  display: block;
}

.info-tip__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  padding: 0.6rem 0.8rem;
  background: var(--color-surface);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10;
  pointer-events: none;
}

.info-tip__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-surface);
}

.info-tip:hover .info-tip__tooltip,
.info-tip:focus .info-tip__tooltip,
.info-tip:focus-visible .info-tip__tooltip {
  opacity: 1;
  visibility: visible;
}

[data-theme="light"] .info-tip {
  color: #B85450;
}

[data-theme="light"] .info-tip:hover,
[data-theme="light"] .info-tip:focus-visible {
  color: #A04744;
}

[data-theme="light"] .info-tip__tooltip {
  background: #FFFFFF;
  border-color: rgba(48, 139, 217, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .info-tip__tooltip::after {
  border-top-color: #FFFFFF;
}

/* Mobil tooltip pozicionalas - a tooltip a viewport-on belul teljesen latszodjon
   (felulirja az inline page-arak.php es template-parts/front-page/arak.php szabalyokat) */
@media (max-width: 600px) {
  .info-tip__tooltip {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    max-width: none !important;
    width: auto !important;
  }
  .info-tip__tooltip::after {
    display: none !important;
  }
}

/* Modifier: brand kek szin (figyelmezteto piros helyett) */
.info-tip--accent {
  color: var(--color-accent);
}

.info-tip--accent:hover,
.info-tip--accent:focus-visible {
  color: var(--color-brand);
}

[data-theme="light"] .info-tip--accent {
  color: var(--color-brand);
}

[data-theme="light"] .info-tip--accent:hover,
[data-theme="light"] .info-tip--accent:focus-visible {
  color: var(--color-accent);
}

/* === Generikus canvas-overlay (Matrix rain, particle network stb.) ===
   Hasznalat: <canvas class="bg-matrix-canvas" data-effect="matrix-whitel">
   barmilyen position:relative wrapperben. JS init: assets/js/global.js */
canvas.bg-matrix-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* === Iparag horgony pillek (chip-szeruek, arak oldal mintajara) === */
.referenciak-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  max-width: 880px;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 2rem) calc(var(--header-height) + 2rem);
  background: transparent;
}

.ref-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.85rem 0.75rem;
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.ref-pill__title {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.ref-pill__count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.ref-pill:hover,
.ref-pill.is-active {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

[data-theme="light"] .ref-pill {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(48, 139, 217, 0.15);
}

[data-theme="light"] .ref-pill:hover,
[data-theme="light"] .ref-pill.is-active {
  border-color: rgba(48, 139, 217, 0.4);
}

/* === Iparag-kategoria szekcio === */
.ref-category {
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
}

.ref-category__title {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 1.5rem;
  text-align: center;
}

.ref-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
  max-width: 1200px;
  margin: 0 auto;
}

/* === Statikus referencia kartya === */
.ref-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.ref-card:hover {
  border-color: rgba(77, 163, 232, 0.3);
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(77, 163, 232, 0.1);
}

[data-theme="light"] .ref-card:hover {
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(48, 139, 217, 0.15);
}

.ref-card__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
  overflow: hidden;
  position: relative;
}

.ref-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ref-card__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ref-card__body {
  padding: 1.5rem 1.75rem 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ref-card__kategoria {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.ref-card__cim {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.ref-card__leiras {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* === CTA === */
.section-referenciak-page .referenciak-cta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .ref-card { transition: none; }
}

/* ============================================================
   GYIK — GYAKORI KÉRDÉSEK — style.css
   ============================================================ */

.section-gyik {
  padding: var(--section-padding) 0;
  background: var(--color-surface);
  position: relative;
  overflow: hidden;
}

.section-gyik::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(77,163,232,0.06) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
}

.section-gyik .container { position: relative; z-index: 1; }

/* Fejléc */
.section-gyik__header { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-gyik__cta { text-align: center; margin-top: 2.5rem; }

.section-gyik__title {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

/* ---- Terminal Window ---- */
.terminal {
  background: rgba(13, 17, 23, 0.95);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0  0  0    0.5px var(--glass-border),
    0  1px  2px rgba(0, 0, 0, 0.08),
    0  4px  8px rgba(0, 0, 0, 0.10),
    0  8px 16px rgba(0, 0, 0, 0.10),
    0 16px 32px rgba(0, 0, 0, 0.12),
    0 32px 64px rgba(0, 0, 0, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.terminal:hover { border-color: rgba(77, 163, 232, 0.25); }

[data-theme="light"] .terminal {
  background: rgba(255, 255, 255, 0.97);
  box-shadow:
    0  0  0    0.5px rgba(48, 139, 217, 0.10),
    0  1px  2px rgba(0, 0, 0, 0.03),
    0  4px  8px rgba(0, 0, 0, 0.04),
    0  8px 16px rgba(0, 0, 0, 0.04),
    0 16px 32px rgba(0, 0, 0, 0.03);
}

/* Terminal header */
.terminal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: rgba(22, 27, 34, 0.9);
  border-bottom: 0.5px solid var(--glass-border);
  user-select: none;
}
[data-theme="light"] .terminal__header { background: rgba(245, 245, 245, 0.95); }

.terminal__dots { display: flex; gap: 6px; }
.terminal__dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal__dot--red    { background: #FF5F57; }
.terminal__dot--yellow { background: #FEBC2E; }
.terminal__dot--green  { background: #28C840; }

.terminal__title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  letter-spacing: 0.02em;
}

/* Terminal body */
.terminal__body {
  padding: clamp(0.75rem, 2vw, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---- FAQ Prompt Row ---- */
.faq-prompt {
  position: relative;
  border-radius: var(--radius-sm);
  transition: background 0.25s ease;
}
.faq-prompt:hover { background: rgba(77, 163, 232, 0.04); }
.faq-prompt.is-open { background: rgba(77, 163, 232, 0.06); }
[data-theme="light"] .faq-prompt:hover { background: rgba(48, 139, 217, 0.05); }
[data-theme="light"] .faq-prompt.is-open { background: rgba(48, 139, 217, 0.07); }

.faq-prompt + .faq-prompt { border-top: 0.5px solid rgba(77, 163, 232, 0.06); }
[data-theme="light"] .faq-prompt + .faq-prompt { border-top-color: rgba(48, 139, 217, 0.08); }

/* Trigger button */
.faq-prompt__trigger {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm);
}
.faq-prompt__trigger:focus-visible {
  outline: 2px solid rgba(77, 163, 232, 0.6);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Prompt prefix */
.faq-prompt__prefix {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: text-shadow 0.25s ease;
  line-height: 1.5;
}
.faq-prompt:hover .faq-prompt__prefix { text-shadow: 0 0 8px rgba(77, 163, 232, 0.4); }
.faq-prompt.is-open .faq-prompt__prefix { text-shadow: 0 0 12px rgba(77, 163, 232, 0.5); }

/* Question text */
.faq-prompt__question {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.5;
  flex: 1;
  transition: color 0.25s ease;
}
.faq-prompt:hover .faq-prompt__question,
.faq-prompt.is-open .faq-prompt__question { color: var(--color-text); }

/* Answer panel */
.faq-prompt__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-prompt__answer-inner {
  padding: 0 0.875rem 0.875rem;
  padding-left: calc(0.875rem + 0.625rem + 1ch);
  position: relative;
}
.faq-prompt__answer-inner::before {
  content: '';
  position: absolute;
  left: calc(0.875rem + 0.4ch);
  top: 0;
  bottom: 0.875rem;
  width: 2px;
  background: linear-gradient(to bottom, rgba(77, 163, 232, 0.35), rgba(77, 163, 232, 0.08));
  border-radius: 1px;
}
.faq-prompt__answer-text {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}
.faq-prompt__answer-text .text-bold,
.faq-prompt__answer-text strong { color: var(--color-text); font-weight: 500; }

/* Segment wrapper — each on its own line */
.faq-seg { display: block; padding: 1px 0; }

/* Blinking cursor — flat block */
.faq-cursor {
  display: inline-block;
  width: 0.55em;
  height: 3px;
  background: var(--color-brand);
  margin-left: 1px;
  vertical-align: baseline;
  border-radius: 1px;
  animation: cursor-blink 0.9s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(48, 139, 217, 0.4);
}
.faq-cursor.is-hidden { display: none; }
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}

/* Dimming when one is open */
.terminal__body.has-open .faq-prompt:not(.is-open) {
  opacity: 0.45;
  transition: opacity 0.4s ease, background 0.25s ease;
}
.terminal__body.has-open .faq-prompt:not(.is-open):hover { opacity: 0.75; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .faq-cursor { animation: none; opacity: 1; }
  .faq-prompt__answer { transition: none; }
}

/* Responsive */
@media (max-width: 640px) {
  .terminal__header { padding: 0.625rem 1rem; }
  .terminal__body { padding: clamp(0.5rem, 2vw, 0.75rem); }
  .faq-prompt__trigger { padding: 0.5rem 0.625rem; gap: 0.5rem; }
  .faq-prompt__question { font-size: 0.875rem; }
  .faq-prompt__answer-inner { padding-left: calc(0.625rem + 0.5rem + 1ch); font-size: 0.875rem; }
  .faq-prompt__answer-inner::before { left: calc(0.625rem + 0.3ch); }
}

/* =============================================
   CUSTOM CURSOR — Magnetic Repel
   ============================================= */

/* Natív kurzor rejtése hover-képes eszközökön */
@media (hover: hover) and (pointer: fine) {
    body.has-custom-cursor,
    body.has-custom-cursor * {
        cursor: none !important;
    }
}

/* Custom cursor — above CookieYes banner (z:99999) */
.cursor-ring,
.cursor-dot {
    z-index: 2147483647 !important;
}

/* Külső gyűrű — liquid glass */
.cursor-ring {
    position:       fixed;
    top:            0;
    left:           0;
    width:          40px;
    height:         40px;
    border-radius:  50%;
    border:         1px solid rgba(77,163,232,0.35);
    background:     rgba(77,163,232,0.04);
    box-shadow:     0 0 12px rgba(77,163,232,0.1),
                    0 0 24px rgba(77,163,232,0.04);
    pointer-events: none;
    z-index:        9999;
    transform:      translate(-50%, -50%);
    transition:     width 0.25s ease, height 0.25s ease,
                    border-color 0.25s ease, background 0.25s ease,
                    box-shadow 0.25s ease, opacity 0.3s ease;
    will-change:    transform;
    opacity:        0;
    mix-blend-mode: screen;
    backdrop-filter: blur(0.4px) brightness(1.06) contrast(1.04);
    -webkit-backdrop-filter: blur(0.4px) brightness(1.06) contrast(1.04);
    animation: cursor-glass-breathe 4s ease-in-out infinite;
}

@keyframes cursor-glass-breathe {
    0%, 100% {
        backdrop-filter: blur(0.4px) brightness(1.06) contrast(1.04);
        -webkit-backdrop-filter: blur(0.4px) brightness(1.06) contrast(1.04);
    }
    50% {
        backdrop-filter: blur(0.6px) brightness(1.10) contrast(1.06);
        -webkit-backdrop-filter: blur(0.6px) brightness(1.10) contrast(1.06);
    }
}

.cursor-ring.is-visible { opacity: 1; }

/* Hover interaktív elemekre — kitágul + erősebb glass */
.cursor-ring.is-hover {
    width:        52px;
    height:       52px;
    border-color: rgba(77,163,232,0.5);
    background:   rgba(77,163,232,0.06);
    box-shadow:   0 0 18px rgba(77,163,232,0.2),
                  0 0 36px rgba(77,163,232,0.06);
    backdrop-filter: blur(0.6px) brightness(1.08) contrast(1.04);
    -webkit-backdrop-filter: blur(0.6px) brightness(1.08) contrast(1.04);
    animation: cursor-glass-breathe-hover 4s ease-in-out infinite;
}

@keyframes cursor-glass-breathe-hover {
    0%, 100% {
        backdrop-filter: blur(0.6px) brightness(1.08) contrast(1.04);
        -webkit-backdrop-filter: blur(0.6px) brightness(1.08) contrast(1.04);
    }
    50% {
        backdrop-filter: blur(0.8px) brightness(1.12) contrast(1.06);
        -webkit-backdrop-filter: blur(0.8px) brightness(1.12) contrast(1.06);
    }
}

/* Belső pont */
.cursor-dot {
    position:       fixed;
    top:            0;
    left:           0;
    width:          5px;
    height:         5px;
    border-radius:  50%;
    background:     var(--color-accent);
    pointer-events: none;
    z-index:        10000;
    transform:      translate(-50%, -50%);
    transition:     width 0.15s ease, height 0.15s ease,
                    background 0.15s ease, opacity 0.3s ease;
    will-change:    transform;
    opacity:        0;
    box-shadow:     0 0 6px rgba(77,163,232,0.5);
}

.cursor-dot.is-visible { opacity: 1; }

.cursor-dot.is-hover {
    width:      3px;
    height:     3px;
    background: rgba(123,191,239,1);
}

/* Light mode */
[data-theme="light"] .cursor-ring {
    border-color: rgba(48,139,217,0.25);
    background:   rgba(48,139,217,0.03);
    box-shadow:   0 0 10px rgba(48,139,217,0.08);
    mix-blend-mode: multiply;
    backdrop-filter: blur(0.3px) brightness(0.97) contrast(1.03);
    -webkit-backdrop-filter: blur(0.3px) brightness(0.97) contrast(1.03);
}

[data-theme="light"] .cursor-ring.is-hover {
    border-color: rgba(48,139,217,0.4);
    background:   rgba(48,139,217,0.05);
    backdrop-filter: blur(0.5px) brightness(0.95) contrast(1.04);
    -webkit-backdrop-filter: blur(0.5px) brightness(0.95) contrast(1.04);
}

/* Reduced motion — static glass, no breathing */
@media (prefers-reduced-motion: reduce) {
    .cursor-ring {
        animation: none !important;
    }
}

/* Magnetic repel elemek */
.mag-repel {
    transition: transform 0.3s cubic-bezier(.25,.1,.25,1);
}

/* Mobilon nincs custom cursor */
@media (hover: none) {
    .cursor-ring, .cursor-dot { display: none !important; }
}

/* ============================================================
   KAPCSOLAT OLDAL — page-kapcsolat.php
   ============================================================ */

.section-kapcsolat {
  padding: var(--section-padding) 0;
  padding-top: calc(var(--header-height) + var(--section-padding));
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(circle at 1px 1px, rgba(77,163,232,0.13) 1px, transparent 1.5px);
  background-size: 18px 18px;
}

/* Center spotlight */
.section-kapcsolat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 500px at 50% 33%, rgba(77,163,232,0.22) 0%, rgba(13,17,23,0.35) 50%, var(--color-base) 100%);
  pointer-events: none;
  z-index: 0;
  transform-origin: 50% 33%;
  will-change: transform, opacity;
  animation: bg-spotlight-pulse 12s ease-in-out infinite;
}

/* Also vignette: alsó fade a footer fele */
.section-kapcsolat::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent 0%, var(--color-base) 100%);
  pointer-events: none;
  z-index: 0;
}

@keyframes bg-spotlight-pulse {
  0% {
    opacity: 0.85;
    transform: scale(1) translate(0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1.07) translate(1.5%, -1%);
  }
  100% {
    opacity: 0.85;
    transform: scale(1) translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-kapcsolat::before { animation: none; }
}

.section-kapcsolat .container { position: relative; z-index: 1; }

/* 2-column layout */
.kapcsolat-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 960px) {
  .kapcsolat-layout { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .kapcsolat-layout { grid-template-columns: 1fr; }
  .kapcsolat-form { max-width: 560px; }
}

/* ── Left: contact info card ── */
.kapcsolat-info {
  position: relative;
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  padding-left: calc(clamp(1.5rem, 3vw, 2.25rem) + 3px);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    0 1px 0 0 rgba(77,163,232,0.08) inset,
    0 8px 32px rgba(0,0,0,0.35),
    0 2px 8px rgba(0,0,0,0.2);
}

.kapcsolat-info__border {
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 0;
  width: 3px;
  background: linear-gradient(to bottom, transparent, rgba(77,163,232,0.4) 20%, var(--color-accent) 50%, rgba(77,163,232,0.4) 80%, transparent);
  border-radius: 0 2px 2px 0;
}

.kapcsolat-info__title {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.kapcsolat-info__desc {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 2rem;
}

.kapcsolat-info__details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.kapcsolat-info__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.kapcsolat-info__icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

.kapcsolat-info__link {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.kapcsolat-info__link:hover {
  color: var(--color-accent);
}

.kapcsolat-info__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.kapcsolat-info__availability {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  padding-top: 1.25rem;
  border-top: 0.5px solid var(--glass-border);
}

.kapcsolat-info__status-dot {
  width:      10px;
  height:     10px;
  border-radius: 3px;
  background: var(--color-text-subtle);
  flex-shrink: 0;
}

.kapcsolat-info__status-dot[data-status="green"] {
  background: linear-gradient(135deg, var(--color-success), #14b8a6);
  animation:  status-morph 4s infinite ease-in-out alternate, status-pulse 2s ease-in-out infinite;
}

.kapcsolat-info__status-dot[data-status="yellow"] {
  background: linear-gradient(135deg, var(--color-warning), #e6a817);
  animation:  status-morph 4s infinite ease-in-out alternate, status-pulse-yellow 2s ease-in-out infinite;
}

.kapcsolat-info__status-dot[data-status="orange"] {
  background: linear-gradient(135deg, var(--color-orange, #F0883E), #e67817);
  animation:  status-morph 4s infinite ease-in-out alternate, status-pulse-orange 2s ease-in-out infinite;
}

.kapcsolat-info__status-dot[data-status="red"] {
  background: linear-gradient(135deg, var(--color-danger, #f85149), #e6173e);
  animation:  status-morph 4s infinite ease-in-out alternate, status-pulse-red 2s ease-in-out infinite;
}

/* Trust pill-ek az info kártyán */
.kapcsolat-info__trust {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 0.5px solid var(--glass-border);
}

.kapcsolat-info__trust-pill {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: rgba(77, 163, 232, 0.05);
  border: 0.5px solid rgba(77, 163, 232, 0.12);
  border-radius: 100px;
  padding: 0.25rem 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.kapcsolat-info__trust-pill svg {
  width: 11px;
  height: 11px;
  color: var(--color-accent);
  opacity: 0.8;
  flex-shrink: 0;
}

/* ── Right: form wrapper ── */
.kapcsolat-form {
  min-width: 0;
}

/* ============================================================
   FLUENT FORMS — theme override
   ============================================================ */

/* Form container */
.kapcsolat-form .fluentform {
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    0 1px 0 0 rgba(77,163,232,0.1) inset,
    0 12px 40px rgba(0,0,0,0.4),
    0 4px 12px rgba(0,0,0,0.25);
}

/* Labels */
.kapcsolat-form .fluentform .ff-el-input--label label,
.kapcsolat-form .fluentform label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 0.375rem;
}

/* Inputs & textarea */
.kapcsolat-form .fluentform :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.kapcsolat-form .fluentform textarea {
  min-height: 120px;
  resize: vertical;
}

/* Hover state */
.kapcsolat-form .fluentform :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea):hover {
  border-color: rgba(77, 163, 232, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

/* Focus state */
.kapcsolat-form .fluentform input:not([type="radio"]):not([type="checkbox"]):focus,
.kapcsolat-form .fluentform select:focus,
.kapcsolat-form .fluentform textarea:focus {
  outline: none;
  background: var(--color-surface) !important;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(77,163,232,0.15), 0 0 12px rgba(77,163,232,0.08);
}

/* Radio & checkbox: csak outline, nincs glow gyűrű */
.kapcsolat-form .fluentform input[type="radio"]:focus-visible,
.kapcsolat-form .fluentform input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Autofill — böngésző ne írja felül fehérrel */
.kapcsolat-form .fluentform input:-webkit-autofill,
.kapcsolat-form .fluentform input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text);
}

/* Placeholder */
.kapcsolat-form .fluentform input::placeholder,
.kapcsolat-form .fluentform textarea::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

/* Error state */
.kapcsolat-form .fluentform .ff-el-is-error input,
.kapcsolat-form .fluentform .ff-el-is-error textarea {
  border-color: var(--color-warning);
}

.kapcsolat-form .fluentform .error {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-warning);
  margin-top: 0.25rem;
}

/* Submit button — terminál stílus (mint .btn) */
.kapcsolat-form .fluentform .ff-btn-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 2rem;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-base);
  border: 0.5px solid var(--color-border);
  border-radius: calc(var(--radius-md) - 1px);
  cursor: pointer;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease,
              border-color .3s ease, box-shadow .3s ease;
  outline: none;
  margin-top: 0.25rem;
}

/* >_ prefix — hover előtt rejtve */
.kapcsolat-form .fluentform .ff-btn-submit::before {
  content: '>_';
  display: inline-block;
  color: var(--color-accent);
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 0;
  transition: max-width .35s cubic-bezier(.4,0,.2,1),
              margin-right .35s ease;
}

/* villogó kurzor — hover előtt rejtve */
.kapcsolat-form .fluentform .ff-btn-submit::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 1.1em;
  border-right: 2px solid var(--color-accent);
  vertical-align: text-bottom;
  opacity: 0;
  margin-left: 0;
  transition: opacity .2s ease, width .2s ease, margin-left .2s ease;
}

.kapcsolat-form .fluentform .ff-btn-submit:hover {
  background: rgba(77,163,232,0.06);
  color: var(--color-text);
  border-color: rgba(77,163,232,0.2);
  box-shadow: inset 0 1px 3px rgba(77,163,232,0.08),
              inset 0 0 12px rgba(77,163,232,0.03);
}

.kapcsolat-form .fluentform .ff-btn-submit:hover::before {
  max-width: 1.5rem;
  margin-right: 4px;
}

.kapcsolat-form .fluentform .ff-btn-submit:hover::after {
  opacity: 1;
  width: 2px;
  margin-left: 4px;
  animation: btn-cursor-blink 1s steps(1) infinite;
}

.kapcsolat-form .fluentform .ff-btn-submit:active {
  background: rgba(77,163,232,0.1);
  transform: none;
}

@media (hover: none) {
  .kapcsolat-form .fluentform .ff-btn-submit::before,
  .kapcsolat-form .fluentform .ff-btn-submit::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kapcsolat-form .fluentform .ff-btn-submit::after { animation: none; }
}

.kapcsolat-form .fluentform .ff-btn-submit:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* GDPR notice below form */
.kapcsolat-form__gdpr {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  margin-top: 1rem;
  line-height: 1.5;
}

.kapcsolat-form__gdpr a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.kapcsolat-form__gdpr a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.kapcsolat-form__gdpr a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Success message */
.kapcsolat-form .fluentform .ff-message-success {
  font-family: var(--font-sans);
  color: var(--color-success);
  border-color: var(--color-success);
  background: rgba(63,185,80,0.08);
  border-radius: var(--radius-sm);
}

/* Field spacing */
.kapcsolat-form .fluentform .ff-el-group {
  margin-bottom: 1.25rem;
}

/* ── Radio & Checkbox ── */
.kapcsolat-form .fluentform .ff-el-form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.kapcsolat-form .fluentform .ff-el-form-check label {
  color: var(--color-text-muted);
  font-weight: 400;
  cursor: pointer;
  line-height: 1.45;
  margin-bottom: 0;
}

.kapcsolat-form .fluentform .ff-el-form-check label a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: rgba(77,163,232,0.4);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.kapcsolat-form .fluentform .ff-el-form-check label a:hover {
  color: var(--color-brand);
  text-decoration-color: var(--color-brand);
}

.kapcsolat-form .fluentform input[type="radio"],
.kapcsolat-form .fluentform input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  min-width: 17px;
  border: 1.5px solid var(--color-muted);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  margin-right: 0.625rem;
  vertical-align: middle;
}

.kapcsolat-form .fluentform input[type="radio"] {
  border-radius: 50%;
}

.kapcsolat-form .fluentform input[type="checkbox"] {
  border-radius: 4px;
}

.kapcsolat-form .fluentform input[type="radio"]:hover,
.kapcsolat-form .fluentform input[type="checkbox"]:hover {
  border-color: var(--color-accent);
}

/* Checked radio: accent gyűrű + SVG belső pont */
.kapcsolat-form .fluentform input[type="radio"]:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='3.5' fill='%230D1117'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

/* Checked checkbox: kitöltve + SVG pipa */
.kapcsolat-form .fluentform input[type="checkbox"]:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5l3.5 3.5 6.5-7' stroke='%230D1117' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

/* ── Choices.js multi-select ── */
.kapcsolat-form .fluentform .choices__inner {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border);
  border-left: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.675rem 1rem 0.675rem 1.1rem;
  min-height: unset;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.kapcsolat-form .fluentform .choices.is-focused .choices__inner,
.kapcsolat-form .fluentform .choices.is-open .choices__inner {
  outline: none;
  border-color: var(--color-accent);
  border-left-color: var(--color-accent);
  background: rgba(77,163,232,0.04);
  box-shadow: 0 0 0 3px rgba(77,163,232,0.12), 0 0 16px rgba(77,163,232,0.06);
}

.kapcsolat-form .fluentform .choices__list--single {
  padding: 0;
}

.kapcsolat-form .fluentform .choices__placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

.kapcsolat-form .fluentform .choices__list--dropdown,
.kapcsolat-form .fluentform .choices__list[aria-expanded] {
  background: var(--color-surface-raised);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  margin-top: 4px;
  overflow: hidden;
}

.kapcsolat-form .fluentform .choices__list--dropdown .choices__item,
.kapcsolat-form .fluentform .choices__list--dropdown .choices__item--choice {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  padding: 0.625rem 0.875rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.kapcsolat-form .fluentform .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: rgba(77,163,232,0.1);
  color: var(--color-text);
}

.kapcsolat-form .fluentform .choices__list--multiple .choices__item {
  background: rgba(77,163,232,0.15);
  border: 0.5px solid rgba(77,163,232,0.3);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: 0.8125rem;
}

.kapcsolat-form .fluentform .choices__list--multiple .choices__item .choices__button {
  border-left-color: rgba(77,163,232,0.3);
  filter: brightness(1.5);
}

/* Choices nyíl ikon */
.kapcsolat-form .fluentform .choices__inner::after,
.kapcsolat-form .fluentform .choices[data-type*="select-one"]::after {
  border-color: var(--color-text-muted) transparent transparent;
}

/* ── Required jelölő ── */
.kapcsolat-form .fluentform .ff-label-asterisk {
  color: var(--color-warning);
  margin-left: 0.2em;
}

/* ── Help szöveg ── */
.kapcsolat-form .fluentform .ff-el-help-message {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  margin-top: 0.3rem;
  line-height: 1.5;
}

/* ── Section break / elválasztó ── */
.kapcsolat-form .fluentform .ff-section_break {
  margin: 1.75rem 0 1.25rem;
}

.kapcsolat-form .fluentform .ff-section_break h2,
.kapcsolat-form .fluentform .ff-section_break h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.kapcsolat-form .fluentform .ff-section_break p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.kapcsolat-form .fluentform .ff-section_break + .ff-el-group {
  border-top: 0.5px solid var(--color-border);
  padding-top: 1.25rem;
}

/* ── Password mező (show/hide toggle) ── */
.kapcsolat-form .fluentform .ff-password-wrapper {
  position: relative;
}

.kapcsolat-form .fluentform .ff-password-wrapper input[type="password"],
.kapcsolat-form .fluentform .ff-password-wrapper input[type="text"] {
  padding-right: 3rem;
}

.kapcsolat-form .fluentform .ff-password-wrapper .ff-password-toggle {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-subtle);
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.kapcsolat-form .fluentform .ff-password-wrapper .ff-password-toggle:hover {
  color: var(--color-accent);
}

/* ── File upload ── */

/* FF custom upload gomb (.ff-btn nem submit) */
.kapcsolat-form .fluentform .ff-btn:not(.ff-btn-submit),
.kapcsolat-form .fluentform .ff-upload-btn {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-base);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.kapcsolat-form .fluentform .ff-btn:not(.ff-btn-submit):hover,
.kapcsolat-form .fluentform .ff-upload-btn:hover {
  background: rgba(77,163,232,0.06);
  border-color: rgba(77,163,232,0.2);
  color: var(--color-text);
}

.kapcsolat-form .fluentform input[type="file"] {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--color-muted);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.kapcsolat-form .fluentform input[type="file"]:hover {
  border-color: rgba(77,163,232,0.4);
  background: rgba(77,163,232,0.02);
}

.kapcsolat-form .fluentform input[type="file"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(77,163,232,0.12);
}

/* file-selector-button — terminál stílus */
.kapcsolat-form .fluentform input[type="file"]::file-selector-button {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-base);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.875rem;
  margin-right: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kapcsolat-form .fluentform input[type="file"]::file-selector-button:hover {
  background: rgba(77,163,232,0.06);
  border-color: rgba(77,163,232,0.2);
  color: var(--color-text);
}

/* Drag & drop upload zóna (FF custom) */
.kapcsolat-form .fluentform .ff-upload-container {
  border: 1px dashed var(--color-muted);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.02);
  padding: 2rem 1rem;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.kapcsolat-form .fluentform .ff-upload-container:hover,
.kapcsolat-form .fluentform .ff-upload-container.ff-drag-over {
  border-color: var(--color-accent);
  background: rgba(77,163,232,0.04);
}

.kapcsolat-form .fluentform .ff-upload-container p,
.kapcsolat-form .fluentform .ff-upload-container span {
  color: var(--color-text-subtle);
  font-size: 0.875rem;
}

/* ── Range slider ── */
.kapcsolat-form .fluentform input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--color-muted);
  border-radius: 2px;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.kapcsolat-form .fluentform input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-base);
  box-shadow: 0 0 0 1px var(--color-accent);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kapcsolat-form .fluentform input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-base);
  box-shadow: 0 0 0 1px var(--color-accent);
  cursor: pointer;
}

.kapcsolat-form .fluentform input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(77,163,232,0.25);
  transform: scale(1.1);
}

.kapcsolat-form .fluentform .ff-range-value {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-accent);
  text-align: right;
  margin-top: 0.25rem;
}

/* ── Rating csillagok ── */
.kapcsolat-form .fluentform .ff-el-ratings {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.kapcsolat-form .fluentform .ff-el-ratings input[type="radio"] {
  display: none;
}

.kapcsolat-form .fluentform .ff-el-ratings label {
  font-size: 1.5rem;
  color: var(--color-muted);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
  line-height: 1;
  margin-bottom: 0;
}

.kapcsolat-form .fluentform .ff-el-ratings label:hover,
.kapcsolat-form .fluentform .ff-el-ratings label:hover ~ label,
.kapcsolat-form .fluentform .ff-el-ratings input:checked ~ label {
  color: var(--color-rating);
}

.kapcsolat-form .fluentform .ff-el-ratings label:hover {
  transform: scale(1.15);
}

/* ── Net Promoter Score (NPS / Opinion Scale) ── */
.kapcsolat-form .fluentform .ff-el-opinion-scale {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.kapcsolat-form .fluentform .ff-el-opinion-scale input[type="radio"] {
  display: none;
}

.kapcsolat-form .fluentform .ff-el-opinion-scale label {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  margin-bottom: 0;
}

.kapcsolat-form .fluentform .ff-el-opinion-scale label:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.kapcsolat-form .fluentform .ff-el-opinion-scale input:checked + label {
  border-color: var(--color-accent);
  background: rgba(77,163,232,0.15);
  color: var(--color-accent);
}

/* ── Intl Tel Input (telefon zászló) ── */
.kapcsolat-form .fluentform .iti {
  width: 100%;
}

.kapcsolat-form .fluentform .iti__flag-container {
  left: 0;
}

.kapcsolat-form .fluentform .iti__selected-flag {
  background: transparent;
  border-right: 1px solid var(--color-border);
  padding: 0 0.625rem;
  transition: background 0.2s ease;
}

.kapcsolat-form .fluentform .iti__selected-flag:hover,
.kapcsolat-form .fluentform .iti__selected-flag:focus {
  background: rgba(255,255,255,0.05);
}

.kapcsolat-form .fluentform .iti__country-list {
  background: var(--color-surface-raised);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

.kapcsolat-form .fluentform .iti__country-list .iti__country.iti__highlight,
.kapcsolat-form .fluentform .iti__country-list .iti__country:hover {
  background: rgba(77,163,232,0.1);
  color: var(--color-text);
}

.kapcsolat-form .fluentform .iti__country-list .iti__divider {
  border-color: var(--color-border);
}

.kapcsolat-form .fluentform .iti--separate-dial-code .iti__selected-dial-code {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ── Flatpickr date/time picker ── */
.flatpickr-calendar {
  background: var(--color-surface-raised);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  font-family: var(--font-sans);
  color: var(--color-text);
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: var(--color-text);
  fill: var(--color-text);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: var(--color-text-muted);
  transition: fill 0.15s ease;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  fill: var(--color-accent);
}

.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: transparent;
}

.flatpickr-weekdays {
  background: transparent;
}

.flatpickr-weekday {
  color: var(--color-text-subtle);
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
}

.flatpickr-day {
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: rgba(77,163,232,0.12);
  color: var(--color-text);
  border-color: transparent;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
}

.flatpickr-day.today {
  border-color: rgba(77,163,232,0.4);
  color: var(--color-accent);
}

.flatpickr-day.today:hover {
  background: rgba(77,163,232,0.12);
}

.flatpickr-day.inRange {
  background: rgba(77,163,232,0.1);
  border-color: transparent;
  box-shadow: -5px 0 0 rgba(77,163,232,0.1), 5px 0 0 rgba(77,163,232,0.1);
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--color-text-subtle);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: transparent;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: rgba(77,163,232,0.08);
}

.flatpickr-time .flatpickr-time-separator {
  color: var(--color-text-subtle);
}

/* ── Multi-step progress bar ── */
.kapcsolat-form .fluentform .ff-step-header {
  margin-bottom: 1.5rem;
}

.kapcsolat-form .fluentform .ff-step-bar-wrap {
  background: var(--color-muted);
  border-radius: 99px;
  height: 4px;
  overflow: hidden;
  margin-bottom: 0.875rem;
}

.kapcsolat-form .fluentform .ff-step-bar {
  height: 100%;
  background: var(--color-accent);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.kapcsolat-form .fluentform .ff-step-titles {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.kapcsolat-form .fluentform .ff-step-title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  text-align: center;
}

.kapcsolat-form .fluentform .ff-step-title.ff-step-active {
  color: var(--color-accent);
  font-weight: 500;
}

.kapcsolat-form .fluentform .ff-step-title.ff-step-completed {
  color: var(--color-success);
}

/* Multi-step navigációs gombok */
.kapcsolat-form .fluentform .ff-btn-prev,
.kapcsolat-form .fluentform .ff-btn-next {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.kapcsolat-form .fluentform .ff-btn-next {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
}

.kapcsolat-form .fluentform .ff-btn-next:hover {
  background: var(--color-brand);
  box-shadow: 0 4px 16px rgba(77,163,232,0.25);
  transform: translateY(-1px);
}

.kapcsolat-form .fluentform .ff-btn-prev {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.kapcsolat-form .fluentform .ff-btn-prev:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── Light mode overrides ── */
[data-theme="light"] .kapcsolat-info {
  background: rgba(255,255,255,0.75);
  border-color: rgba(48,139,217,0.15);
  box-shadow:
    0 1px 0 0 rgba(48,139,217,0.06) inset,
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
}

[data-theme="light"] .kapcsolat-info__availability {
  color: var(--color-text-muted);
}

[data-theme="light"] .kapcsolat-info__trust-pill {
  background: rgba(48, 139, 217, 0.06);
  border-color: rgba(48, 139, 217, 0.15);
}

[data-theme="light"] .kapcsolat-form .fluentform {
  box-shadow:
    0 1px 0 0 rgba(48,139,217,0.08) inset,
    0 12px 40px rgba(0,0,0,0.06),
    0 4px 12px rgba(0,0,0,0.03);
}

[data-theme="light"] .kapcsolat-form .fluentform :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea):hover {
  border-color: rgba(48, 139, 217, 0.35);
  background: rgba(48, 139, 217, 0.02);
}

[data-theme="light"] .kapcsolat-info__border {
  background: linear-gradient(to bottom, transparent, rgba(48,139,217,0.4) 20%, var(--color-brand) 50%, rgba(48,139,217,0.4) 80%, transparent);
}

[data-theme="light"] .kapcsolat-form .fluentform {
  background: rgba(255,255,255,0.75);
  border-color: rgba(48,139,217,0.15);
}

[data-theme="light"] .kapcsolat-form .fluentform :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="light"] .kapcsolat-form .fluentform input:focus,
[data-theme="light"] .kapcsolat-form .fluentform select:focus,
[data-theme="light"] .kapcsolat-form .fluentform textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(48,139,217,0.12), 0 0 12px rgba(48,139,217,0.06);
}

[data-theme="light"] .section-kapcsolat {
  background-image: radial-gradient(circle at 1px 1px, rgba(48,139,217,0.11) 1px, transparent 1.5px);
}

[data-theme="light"] .section-kapcsolat::before {
  background: radial-gradient(ellipse 700px 500px at 50% 33%, rgba(48,139,217,0.14) 0%, rgba(245,245,245,0.4) 50%, var(--color-base) 100%);
}

[data-theme="light"] .kapcsolat-form .fluentform input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='3.5' fill='%23F5F5F5'/%3E%3C/svg%3E");
}

[data-theme="light"] .kapcsolat-form .fluentform input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5l3.5 3.5 6.5-7' stroke='%23F5F5F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

[data-theme="light"] .kapcsolat-form .fluentform .choices__inner {
  background: rgba(0,0,0,0.02);
  border-color: var(--color-border);
}

[data-theme="light"] .kapcsolat-form .fluentform .choices__list--dropdown,
[data-theme="light"] .kapcsolat-form .fluentform .choices__list[aria-expanded] {
  background: #FFFFFF;
  border-color: rgba(48,139,217,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
}

[data-theme="light"] .kapcsolat-form .fluentform .choices__list--dropdown .choices__item,
[data-theme="light"] .kapcsolat-form .fluentform .choices__list--dropdown .choices__item--choice {
  color: var(--color-text-muted);
}

[data-theme="light"] .kapcsolat-form .fluentform .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: rgba(48,139,217,0.07);
  color: var(--color-text);
}

[data-theme="light"] .kapcsolat-form .fluentform input[type="file"] {
  background: rgba(0,0,0,0.02);
  border-color: var(--color-muted);
  color: var(--color-text-muted);
}

[data-theme="light"] .kapcsolat-form .fluentform input[type="file"]::file-selector-button {
  background: rgba(48,139,217,0.08);
  border-color: rgba(48,139,217,0.2);
}

[data-theme="light"] .kapcsolat-form .fluentform .ff-upload-container {
  background: rgba(0,0,0,0.01);
  border-color: var(--color-muted);
}

[data-theme="light"] .kapcsolat-form .fluentform input[type="range"]::-webkit-slider-thumb {
  border-color: var(--color-base);
}

[data-theme="light"] .kapcsolat-form .fluentform input[type="range"]::-moz-range-thumb {
  border-color: var(--color-base);
}

[data-theme="light"] .kapcsolat-form .fluentform .ff-el-opinion-scale label {
  background: rgba(0,0,0,0.02);
}

[data-theme="light"] .kapcsolat-form .fluentform .iti__selected-flag:hover {
  background: rgba(0,0,0,0.04);
}

[data-theme="light"] .kapcsolat-form .fluentform .iti__country-list {
  background: #FFFFFF;
  border-color: rgba(48,139,217,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  color: var(--color-text-muted);
}

[data-theme="light"] .flatpickr-calendar {
  background: #FFFFFF;
  border-color: rgba(48,139,217,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

[data-theme="light"] .flatpickr-day {
  color: var(--color-text-muted);
}

[data-theme="light"] .flatpickr-day.selected,
[data-theme="light"] .flatpickr-day.selected:hover {
  color: #FFFFFF;
}

[data-theme="light"] .kapcsolat-form .fluentform .ff-step-bar-wrap {
  background: var(--color-muted);
}

[data-theme="light"] .kapcsolat-form .fluentform .ff-btn-next {
  color: #FFFFFF;
}

[data-theme="light"] .kapcsolat-form .fluentform .ff-btn-submit {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
}

[data-theme="light"] .kapcsolat-form .fluentform .ff-btn-submit:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(48,139,217,0.25);
}

[data-theme="light"] .kapcsolat-form .fluentform .ff-btn-submit::before,
[data-theme="light"] .kapcsolat-form .fluentform .ff-btn-submit::after {
  color: #FFFFFF;
}

[data-theme="light"] .kapcsolat-form .fluentform .ff-btn-submit::after {
  border-right-color: #FFFFFF;
}

[data-theme="light"] .kapcsolat-form .fluentform input:-webkit-autofill,
[data-theme="light"] .kapcsolat-form .fluentform input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

[data-theme="light"] .kapcsolat-form .fluentform .ff-btn:not(.ff-btn-submit),
[data-theme="light"] .kapcsolat-form .fluentform .ff-upload-btn {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="light"] .kapcsolat-form .fluentform .ff-btn:not(.ff-btn-submit):hover,
[data-theme="light"] .kapcsolat-form .fluentform .ff-upload-btn:hover {
  background: rgba(48,139,217,0.06);
  border-color: rgba(48,139,217,0.2);
}

[data-theme="light"] .kapcsolat-form .fluentform input[type="file"] {
  background: rgba(0,0,0,0.01);
  border-color: var(--color-muted);
}

[data-theme="light"] .kapcsolat-form .fluentform input[type="file"]::file-selector-button {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="light"] .kapcsolat-form .fluentform input[type="file"]::file-selector-button:hover {
  background: rgba(48,139,217,0.06);
  border-color: rgba(48,139,217,0.2);
}

/* ==========================================================================
   Back to top button
   ========================================================================== */

.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 24px;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    0 1px 4px rgba(0, 0, 0, 0.15);
  color: var(--color-accent);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, border-color 0.2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: rgba(77, 163, 232, 0.12);
  border-color: rgba(77, 163, 232, 0.35);
  transform: translateY(-2px);
}

.back-to-top.is-visible:hover {
  transform: translateY(-2px);
}

.back-to-top:active {
  transform: scale(0.96);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.back-to-top svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .back-to-top {
    width: 48px;
    height: 48px;
    bottom: 24px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
  .back-to-top:hover,
  .back-to-top:active {
    transform: none;
  }
}

/* ==========================================================================
   18. CookieYes cookie banner
   ========================================================================== */

/* ---- Banner container ---- */

/* Container width — desktop: 65%, tablet/mobile: 90%, centered */
.cky-consent-container {
    font-family: var(--font-sans) !important;
    max-width:   65% !important;
    left:        50% !important;
    transform:   translateX(-50%) !important;
}

@media (max-width: 1023px) {
    .cky-consent-container {
        max-width:  100% !important;
        width:      100% !important;
        left:       0 !important;
        right:      0 !important;
        transform:  none !important;
        margin:     0 !important;
        padding:    0 !important;
    }
}

.cky-consent-bar {
    background:             var(--glass-bg) !important;
    border:                 1px solid var(--glass-border) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    backdrop-filter:        var(--glass-blur) !important;
    border-radius:          var(--radius-lg) var(--radius-lg) 0 0 !important;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        0 1px 4px  rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    color:                  var(--color-text) !important;
    font-family:            var(--font-sans) !important;
    position:               relative !important;
    z-index:                2 !important;
}

/* Banner title */
.cky-title {
    color:       var(--color-text) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
}

/* Banner description text */
.cky-notice-des {
    color:       var(--color-text-muted) !important;
    font-family: var(--font-sans) !important;
    line-height: 1.6 !important;
}

.cky-notice-des a {
    color:           var(--color-accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.cky-notice-des a:hover {
    color: var(--color-brand) !important;
}

/* ---- Banner buttons ---- */

.cky-btn {
    font-family:   var(--font-sans) !important;
    border-radius: var(--radius-md) !important;
    font-weight:   500 !important;
    transition:    all 0.3s ease !important;
    cursor:        pointer !important;
    letter-spacing: 0.01em;
}

/* Accept button — primary */
.cky-btn-accept {
    background:   var(--color-brand) !important;
    color:        #fff !important;
    border:       1px solid var(--color-brand) !important;
    box-shadow:   0 2px 8px rgba(48, 139, 217, 0.3) !important;
}

.cky-btn-accept:hover {
    background:   var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    transform:    translateY(-2px);
    box-shadow:   0 4px 16px rgba(77, 163, 232, 0.4) !important;
}

/* Reject button — ghost */
.cky-btn-reject {
    background:   transparent !important;
    color:        var(--color-text-muted) !important;
    border:       1px solid var(--color-border) !important;
}

.cky-btn-reject:hover {
    color:        var(--color-text) !important;
    border-color: var(--color-accent) !important;
    background:   rgba(77, 163, 232, 0.06) !important;
    transform:    translateY(-2px);
}

/* Customize / Settings button — ghost */
.cky-btn-customize {
    background:   transparent !important;
    color:        var(--color-text-muted) !important;
    border:       1px solid var(--color-border) !important;
}

.cky-btn-customize:hover {
    color:        var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    background:   rgba(77, 163, 232, 0.06) !important;
    transform:    translateY(-2px);
}

/* ---- Preference center modal ---- */

.cky-modal {
    font-family: var(--font-sans) !important;
}

.cky-preference-center,
.cky-preference {
    background:    transparent !important;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    color:         var(--color-text) !important;
}

.cky-preference-center .cky-preference-title {
    color:       var(--color-text) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
}

.cky-preference-center .cky-preference-content-wrapper {
    color: var(--color-text-muted) !important;
}

/* Modal overlay */
.cky-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Modal footer — separator line above buttons */
.cky-preference-center .cky-footer-shadow {
    border:        none !important;
    box-shadow:    none !important;
    background:    rgba(77, 163, 232, 0.2) !important;
    height:        1px !important;
}

/* Preference wrapper — inset card effect under the banner bar */
.cky-preference-wrapper {
    background:             var(--glass-bg) !important;
    border:                 1px solid var(--glass-border) !important;
    border-top:             none !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    backdrop-filter:        var(--glass-blur) !important;
    border-radius:          0 !important;
    color:                  var(--color-text) !important;
}

/* Preference body wrapper — categories block */
.cky-preference-body-wrapper {
    background:    transparent !important;
    border:        none !important;
    border-radius: 0 !important;
}

/* Preference header — "Engedélyek beállítása" row */
.cky-preference-header {
    background:    transparent !important;
    border-radius: 0 !important;
}

/* Inner content wrappers — override inline colors */
.cky-preference-content-wrapper,
.cky-dma-content-wrapper {
    color: var(--color-text-muted) !important;
}

.cky-preference-center .cky-horizontal-separator {
    display: none !important;
}

/* Category items in preference center */
.cky-accordion-item {
    border-color:  var(--glass-border) !important;
    border-radius: 0 !important;
}

.cky-accordion-item .cky-accordion-header-des {
    color: var(--color-text-muted) !important;
}

.cky-accordion-item .cky-accordion-btn {
    color:       var(--color-text) !important;
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
}

/* Toggle switch — active state */
.cky-switch input:checked + .cky-slider {
    background-color: var(--color-brand) !important;
}

.cky-switch .cky-slider {
    background-color: var(--color-muted) !important;
}

/* Preference center buttons — terminal style */
.cky-preference-center .cky-btn-accept,
.cky-preference-center .cky-btn-reject {
    background:    transparent !important;
    color:         var(--color-text-muted) !important;
    border:        1px solid rgba(77, 163, 232, 0.25) !important;
    font-family:   var(--font-mono) !important;
    font-size:     13px !important;
    font-weight:   500 !important;
    box-shadow:    none !important;
    text-shadow:   none !important;
}

.cky-preference-center .cky-btn-accept:hover,
.cky-preference-center .cky-btn-reject:hover {
    background:    rgba(77, 163, 232, 0.06) !important;
    color:         var(--color-text) !important;
    border-color:  rgba(77, 163, 232, 0.2) !important;
    box-shadow:    inset 0 1px 3px rgba(77, 163, 232, 0.08),
                   inset 0 0 12px rgba(77, 163, 232, 0.03) !important;
    transform:     none !important;
}

/* "Csak a kiválasztottak elfogadása" — brand filled button */
.cky-preference-center .cky-btn-preferences {
    background:    var(--color-brand) !important;
    color:         #fff !important;
    border:        1px solid var(--color-brand) !important;
    font-family:   var(--font-mono) !important;
    font-size:     13px !important;
    font-weight:   500 !important;
    box-shadow:    0 2px 8px rgba(48, 139, 217, 0.3) !important;
}

.cky-preference-center .cky-btn-preferences:hover {
    background:    var(--color-accent) !important;
    border-color:  var(--color-accent) !important;
    box-shadow:    0 4px 16px rgba(77, 163, 232, 0.4) !important;
    transform:     none !important;
}

[data-theme="light"] .cky-preference-center .cky-btn-accept,
[data-theme="light"] .cky-preference-center .cky-btn-reject {
    border-color: var(--color-border) !important;
}

[data-theme="light"] .cky-preference-center .cky-btn-accept:hover,
[data-theme="light"] .cky-preference-center .cky-btn-reject:hover {
    background:   rgba(48, 139, 217, 0.08) !important;
    border-color: rgba(48, 139, 217, 0.2) !important;
}

/* ---- Revisit consent button ---- */

.cky-revisit-bottom-section {
    font-family: var(--font-sans) !important;
}

.cky-btn-revisit-wrapper .cky-btn-revisit {
    background:   var(--color-brand) !important;
    border:       1px solid var(--color-brand) !important;
    border-radius: 50% !important;
    box-shadow:   0 2px 12px rgba(48, 139, 217, 0.3) !important;
    transition:   all 0.3s ease !important;
}

.cky-btn-revisit-wrapper .cky-btn-revisit:hover {
    background:   var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    transform:    scale(1.08);
    box-shadow:   0 4px 20px rgba(77, 163, 232, 0.4) !important;
}

/* ---- Light mode overrides ---- */

[data-theme="light"] .cky-consent-bar {
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.08),
        0 1px 4px  rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

[data-theme="light"] .cky-preference-center {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px  rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .cky-btn,
    .cky-btn-revisit-wrapper .cky-btn-revisit {
        transition: none !important;
    }

    .cky-btn:hover,
    .cky-btn-revisit-wrapper .cky-btn-revisit:hover {
        transform: none !important;
    }
}

/* ---- Preference center — mobile fixes ---- */

@media (max-width: 768px) {

    /* Body scroll lock when preference panel is open */
    html.cky-modal-open,
    html.cky-modal-open body {
        overflow: hidden !important;
        height: 100% !important;
    }

    /* Footer separator — keep transparent */
    .cky-preference-center .cky-footer-shadow {
        background: transparent !important;
    }

    /* Footer area — cover entire bottom region with pseudo-element */
    .cky-preference-center {
        position: relative !important;
    }

    .cky-preference-center .cky-footer-shadow {
        position: relative !important;
    }

    .cky-preference-center .cky-footer-shadow::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        bottom: -500px !important;
        background: var(--glass-bg) !important;
        -webkit-backdrop-filter: var(--glass-blur) !important;
        backdrop-filter: var(--glass-blur) !important;
        z-index: -1 !important;
    }

    /* Header — opaque background on mobile */
    .cky-preference-header {
        background: var(--color-surface) !important;
    }

    /* Preference wrapper — opaque on mobile (no glass effect needed full-screen) */
    .cky-preference-wrapper {
        background: var(--color-surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* ==========================================================================
   19. Jogi oldalak (entry-content)
   ========================================================================== */

/* ---- Page layout ---- */

body.page:not(.home) #main {
    max-width:      var(--container-max);
    margin:         0 auto;
    padding:        var(--section-padding) 20px;
}

#main > article > h1 {
    font-family:    var(--font-sans);
    font-size:      clamp(2rem, 5vw, 2.75rem);
    font-weight:    800;
    color:          var(--color-text);
    letter-spacing: -0.025em;
    line-height:    1.15;
    margin-bottom:  2.5rem;
    padding-bottom: 1.5rem;
    border-bottom:  1px solid var(--color-border);
}

/* ---- Entry content typography ---- */

.entry-content {
    font-family: var(--font-sans);
    font-size:   1rem;
    line-height: 1.75;
    color:       var(--color-text-muted);
    max-width:   100%;
    overflow-x:  auto;
}

.entry-content h2 {
    font-family:    var(--font-sans);
    font-size:      clamp(1.25rem, 3vw, 1.5rem);
    font-weight:    700;
    color:          var(--color-text);
    line-height:    1.3;
    margin-top:     3rem;
    margin-bottom:  1.25rem;
    padding-left:   1rem;
    border-left:    3px solid var(--color-accent);
}

.entry-content h3 {
    font-family:    var(--font-sans);
    font-size:      1.05rem;
    font-weight:    600;
    color:          var(--color-text);
    margin-top:     2rem;
    margin-bottom:  0.75rem;
    padding-left:   0.75rem;
    border-left:    2px solid var(--color-accent);
    opacity:        0.9;
}

.entry-content p {
    margin-bottom: 1.25rem;
    text-align:    justify;
    width:         100%;
}

.entry-content strong {
    color:       var(--color-text);
    font-weight: 700;
}

.entry-content u {
    text-decoration:           underline;
    text-underline-offset:     3px;
    text-decoration-color:     var(--color-accent);
    text-decoration-thickness: 1.5px;
}

.entry-content em {
    color:      var(--color-text-subtle);
    font-style: italic;
}

/* ---- Links ---- */

.entry-content a {
    color:                  var(--color-accent);
    text-decoration:        none;
    text-underline-offset:  3px;
    transition:             color 0.2s ease, text-decoration 0.2s ease;
}

.entry-content a:hover {
    color:           var(--color-brand);
    text-decoration: underline;
}

/* ---- Lists ---- */

.entry-content ul,
.entry-content ol {
    margin-bottom:  1.25rem;
    padding-left:   1.5rem;
}

.entry-content ul {
    list-style: none;
}

.entry-content ul li {
    position:      relative;
    padding-left:  1.25rem;
    margin-bottom: 0.75rem;
}

.entry-content ul li::before {
    content:       '';
    position:      absolute;
    left:          0;
    top:           0.65em;
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--color-accent);
    opacity:       0.7;
}

.entry-content ol {
    list-style: decimal;
}

.entry-content ol li {
    margin-bottom: 0.75rem;
}

/* ---- Tables ---- */

body.page:not(.home) #main {
    overflow-x: auto !important;
}

body.page table,
table.has-fixed-layout {
    width:           max-content !important;
    min-width:       100% !important;
    border-collapse: separate !important;
    border-spacing:  0 !important;
    margin-top:      1rem;
    margin-bottom:   2rem;
    background:      var(--glass-bg);
    border:          0.5px solid var(--glass-border);
    border-radius:   var(--radius-md);
    overflow:        hidden;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    font-size:       0.9rem;
}

.entry-content thead {
    background: rgba(77, 163, 232, 0.08);
}

.entry-content th {
    font-family:    var(--font-sans);
    font-weight:    600;
    font-size:      0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color:          var(--color-accent);
    text-align:     left;
    padding:        0.875rem 1rem;
    border-bottom:  0.5px solid var(--glass-border);
}

.entry-content td {
    padding:       0.75rem 1rem;
    color:         var(--color-text-muted);
    border-bottom: 0.5px solid var(--color-border);
    word-wrap:     break-word !important;
    overflow-wrap: break-word !important;
    white-space:   normal !important;
}

.entry-content tbody tr:last-child td {
    border-bottom: none;
}

.entry-content tbody tr:hover {
    background: rgba(77, 163, 232, 0.04);
}

/* ---- Table responsive — horizontal scroll wrapper ---- */

figure.wp-block-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0 2rem !important;
}

table.has-fixed-layout {
    width:        100% !important;
    table-layout: fixed !important;
}

table.has-fixed-layout td,
table.has-fixed-layout th {
    white-space: nowrap !important;
}


/* ---- Light mode ---- */

[data-theme="light"] .entry-content thead {
    background: rgba(48, 139, 217, 0.06);
}

[data-theme="light"] .entry-content tbody tr:hover {
    background: rgba(48, 139, 217, 0.03);
}

/* ---- First h2 margin fix ---- */

.entry-content h2:first-of-type {
    margin-top: 0;
}

/* ---- Last-modified meta strip ---- */

.entry-meta-strip {
    display:      inline-flex;
    align-items:  center;
    gap:          0.5rem;
    font-family:  var(--font-mono);
    font-size:    0.75rem;
    color:        var(--color-text-subtle);
    background:   rgba(77, 163, 232, 0.05);
    border:       0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding:      0.45rem 0.875rem;
    margin-bottom: 2rem;
}

.entry-meta-strip svg {
    opacity:    0.5;
    flex-shrink: 0;
}

.entry-meta-strip strong {
    color:       var(--color-text-muted);
    font-weight: 500;
}

/* ---- Table of contents ---- */

.entry-toc {
    background:           var(--glass-bg);
    border:               0.5px solid var(--glass-border);
    border-radius:        var(--radius-md);
    padding:              1.25rem 1.5rem;
    margin-bottom:        2.5rem;
    backdrop-filter:      var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.entry-toc__title {
    font-family:    var(--font-mono);
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-accent);
    margin:         0 0 0.875rem;
}

.entry-toc__list {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        0.35rem;
    counter-reset: toc-counter;
}

.entry-toc__list li {
    padding-left: 0;
    margin:       0;
}

.entry-toc__list li::before {
    display: none;
}

.entry-toc__list a {
    font-size:       0.875rem;
    color:           var(--color-text-muted);
    text-decoration: none;
    transition:      color 0.2s ease, padding-left 0.2s ease;
    display:         inline-block;
}

.entry-toc__list a:hover {
    color:        var(--color-accent);
    padding-left: 4px;
}

/* ---- Table scroll wrapper ---- */

.table-scroll {
    overflow-x:                scroll;
    -webkit-overflow-scrolling: touch;
    margin:        1rem 0 2rem;
    border-radius: var(--radius-md);
    /* Scrollbar styling */
    scrollbar-width:  thin;
    scrollbar-color:  rgba(77, 163, 232, 0.2) transparent;
}

.table-scroll::-webkit-scrollbar {
    height: 4px;
}

.table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.table-scroll::-webkit-scrollbar-thumb {
    background:    rgba(77, 163, 232, 0.25);
    border-radius: 2px;
}

.table-scroll table {
    margin: 0 !important;
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .entry-content a {
        transition: none;
    }

    .entry-toc__list a {
        transition: none;
    }
}

/* ============================================================
   KÖSZÖNJÜK OLDAL (Fluent Forms redirect target)
   ============================================================ */

.section-koszonjuk {
    background: var(--color-base);
    padding: calc(var(--header-height) + 2.4rem) 0 calc(var(--section-padding) * 0.8);
}

.koszonjuk-hero {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.4rem;
}

.koszonjuk-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.koszonjuk-hero__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.koszonjuk-hero__icon svg {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.koszonjuk-hero__icon-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77, 163, 232, 0.28) 0%, transparent 65%);
    animation: koszonjuk-glow-breathe 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes koszonjuk-glow-breathe {
    0%, 100% { transform: scale(1);   opacity: 0.6; }
    50%      { transform: scale(1.1); opacity: 1;   }
}

.koszonjuk-hero__badge-text {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.koszonjuk-hero__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
}

.koszonjuk-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.koszonjuk-trust-pill svg {
    width: 12px;
    height: 12px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.koszonjuk-hero__title {
    font-family: var(--font-sans);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

.koszonjuk-hero__subtitle {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    max-width: 540px;
    margin: 0 auto;
}

.koszonjuk-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 1080px;
    margin: 0 auto;
}

.koszonjuk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.75rem 1.5rem 2.25rem;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: 16px;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.koszonjuk-card:hover,
.koszonjuk-card:focus-visible {
    border-color: rgba(77, 163, 232, 0.35);
    background: rgba(77, 163, 232, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25), inset 0 0 0 0.5px rgba(77, 163, 232, 0.2);
}

.koszonjuk-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.koszonjuk-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(77, 163, 232, 0.08);
    color: var(--color-accent);
    margin-bottom: 0.25rem;
}

.koszonjuk-card__icon svg {
    width: 22px;
    height: 22px;
}

.koszonjuk-card__title {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

.koszonjuk-card__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
    flex-grow: 1;
}

.koszonjuk-card__arrow {
    position: absolute;
    bottom: 1.25rem;
    right: 1.5rem;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--color-accent);
    opacity: 0.55;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.koszonjuk-card:hover .koszonjuk-card__arrow,
.koszonjuk-card:focus-visible .koszonjuk-card__arrow {
    opacity: 1;
    transform: translateX(3px);
}

.koszonjuk-back {
    text-align: center;
    margin-top: 2.5rem;
}

@media (max-width: 780px) {
    .koszonjuk-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .koszonjuk-hero {
        margin-bottom: 2rem;
    }
}

[data-theme="light"] .koszonjuk-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .koszonjuk-card:hover,
[data-theme="light"] .koszonjuk-card:focus-visible {
    background: rgba(77, 163, 232, 0.04);
    border-color: rgba(77, 163, 232, 0.3);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), inset 0 0 0 0.5px rgba(77, 163, 232, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .koszonjuk-hero__icon-glow {
        animation: none;
        opacity: 0.7;
    }
}

/* ==========================================================================
   20. Blog (single + lista) - Gutenberg-kompatibilis
   ========================================================================== */

/* ---------- 20.1 Blog hero (page intro a /blog oldalon) ---------- */
.blog-hero {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.blog-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 1px;
    max-width: 90%;
    background: linear-gradient(to right, transparent, rgba(77, 163, 232, 0.4), transparent);
    pointer-events: none;
}
.blog-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    margin-bottom: 1.25rem;
}
.blog-hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.15;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}
.blog-hero__subtitle {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---------- 20.2 Blog grid + kártya ---------- */
.blog-list {
    padding: clamp(2rem, 4vw, 3rem) 0 var(--section-padding);
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.blog-card {
    position: relative;
    background: var(--glass-bg);
    border: 0.5px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    color: inherit;
}
.blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 163, 232, 0.35);
}
@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-card:hover { transition: none; transform: none; }
}
.blog-card__img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
}
.blog-card__img-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__img-pic {
    transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
    .blog-card:hover .blog-card__img-pic { transform: none; }
}
.blog-card__img--placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-accent-deep) 0%, var(--color-brand) 100%);
    opacity: 0.55;
}
.blog-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    padding: 0.3rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
    background: rgba(13, 17, 23, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.blog-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.blog-card__kategoria {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.blog-card__cim {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    margin: 0.1rem 0 0;
    letter-spacing: -0.01em;
}
.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    margin-top: 0.25rem;
}
.blog-card__meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-text-subtle);
}
.blog-card__leiras {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-top: 0.4rem;
}
.blog-card__read-more {
    margin-top: auto;
    padding-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.2s ease;
}
.blog-card:hover .blog-card__read-more {
    gap: 0.7rem;
}
.blog-card__read-more::after {
    content: '→';
    transition: transform 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
    .blog-card__read-more,
    .blog-card__read-more::after { transition: none; }
}

/* ---------- 20.3 Pagination (the_posts_pagination output) ---------- */
.blog-list .pagination,
.blog-list .nav-links {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}
.blog-list .page-numbers {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.blog-list .page-numbers:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
    background: rgba(77, 163, 232, 0.06);
}
.blog-list .page-numbers.current {
    color: var(--color-on-accent);
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.blog-list .page-numbers.dots {
    border: none;
    background: transparent;
}

/* ---------- 20.4 Blog empty (üres állapot) ---------- */
.blog-empty {
    text-align: center;
    padding: 3rem 0;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

/* ---------- 20.5 Article hero (single cikk fejléc) ---------- */
.article-hero {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    text-align: center;
    position: relative;
}
.article-breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
    letter-spacing: 0.05em;
}
.article-breadcrumb a {
    color: var(--color-text-muted);
    transition: color 0.2s ease;
}
.article-breadcrumb a:hover {
    color: var(--color-accent);
}
.article-breadcrumb__sep {
    color: var(--color-text-subtle);
    margin: 0 0.5rem;
}
.article-category {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    margin-bottom: 1.25rem;
}
.article-title {
    font-size: clamp(1.85rem, 4.5vw, 2.85rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.15;
    margin: 0 auto 1.25rem;
    max-width: 720px;
    letter-spacing: -0.02em;
}
.article-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.article-meta__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-text-subtle);
}
.article-meta__author {
    color: var(--color-text);
}

/* ---------- 20.6 Featured image (cikk fejléc alatt) ---------- */
.article-featured-image {
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    max-width: 960px;
    width: 100%;
    padding: 0 clamp(1rem, 4vw, 2rem);
}
.article-featured-image__inner {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px -20px rgba(77, 163, 232, 0.3);
    background: var(--color-surface);
}
.article-featured-image__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- 20.7 Article content + narrow container ---------- */
.container--narrow {
    max-width: 720px;
}
.article-content {
    padding: clamp(2rem, 4vw, 3.5rem) 0 var(--section-padding);
}
.article-content__inner {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text);
}

/* ---------- 20.8 Article tipográfia (Gutenberg-kompatibilis) ---------- */
/* Lead bekezdés: Gutenberg "Large" font-size, vagy .article-lead class */
.article-content__inner .has-large-font-size,
.article-content__inner .article-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.12rem);
    line-height: 1.65;
    color: var(--color-text);
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}
.article-content__inner .has-large-font-size strong,
.article-content__inner .article-lead strong {
    color: var(--color-text);
    font-weight: 600;
}

/* Heading (Gutenberg: <h2 class="wp-block-heading">) */
.article-content__inner h2 {
    font-size: clamp(1.4rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
    margin: 2.75rem 0 1rem;
    letter-spacing: -0.015em;
}
.article-content__inner h2:first-child {
    margin-top: 0;
}
.article-content__inner h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.35;
    margin: 1.75rem 0 0.6rem;
}
.article-content__inner h2 + h3 {
    margin-top: 1rem;
}

/* Bekezdés */
.article-content__inner p {
    margin-bottom: 1.2rem;
    color: var(--color-text);
}
.article-content__inner p strong {
    color: var(--color-text);
    font-weight: 600;
}
.article-content__inner p em {
    color: var(--color-text);
    font-style: italic;
}

/* Highlight (HTML <mark> tag) - brand-kék színkiemelés bold-dal, háttér nélkül */
.article-content__inner mark {
    background: none;
    color: var(--color-accent);
    font-weight: 600;
    padding: 0;
}

/* Lista (Gutenberg: <ul class="wp-block-list">) - chevron prefix */
.article-content__inner ul:not(.faq-list):not(.stat-list),
.article-content__inner ol {
    margin: 1rem 0 1.5rem;
    padding-left: 0;
    list-style: none;
}
.article-content__inner ul:not(.faq-list):not(.stat-list) li,
.article-content__inner ol li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.6rem;
    color: var(--color-text);
}
.article-content__inner ul:not(.faq-list):not(.stat-list) li::before {
    content: '›';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent);
    font-weight: 700;
}
.article-content__inner ol {
    counter-reset: ol-counter;
}
.article-content__inner ol li {
    counter-increment: ol-counter;
}
.article-content__inner ol li::before {
    content: counter(ol-counter) '.';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Statisztikai lista (List blokk-on "stat-list" custom CSS class) - narancs chevron */
.article-content__inner ul.stat-list {
    margin: 1.25rem 0 1.5rem;
    padding-left: 0;
    list-style: none;
}
.article-content__inner ul.stat-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.6rem;
    color: var(--color-text);
}
.article-content__inner ul.stat-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-orange);
    font-weight: 700;
}

/* Táblázat (Gutenberg: <figure class="wp-block-table"><table>...</table></figure>) */
.article-content__inner figure.wp-block-table {
    margin: 1.75rem 0;
    overflow-x: auto;
}
.article-content__inner figure.wp-block-table > table {
    margin: 0;
}
.article-content__inner table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: 0.92rem;
    background: var(--glass-bg);
    border: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
.article-content__inner thead th {
    background: rgba(77, 163, 232, 0.08);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    text-align: left;
    padding: 0.85rem 1rem;
    font-weight: 600;
    border: none;
}
.article-content__inner tbody td {
    padding: 0.8rem 1rem;
    color: var(--color-text);
    vertical-align: top;
    border: none;
}
.article-content__inner tbody tr:nth-child(even) {
    background: rgba(77, 163, 232, 0.04);
}
.article-content__inner tbody tr:hover {
    background: rgba(77, 163, 232, 0.08);
}
.article-content__inner tbody td strong {
    color: var(--color-accent);
    font-weight: 600;
}
@media (max-width: 600px) {
    .article-content__inner table { font-size: 0.85rem; }
    .article-content__inner thead th,
    .article-content__inner tbody td { padding: 0.6rem 0.7rem; }
}

/* Kép a cikkben (Gutenberg: <figure class="wp-block-image">) */
.article-content__inner figure.wp-block-image {
    margin: 1.75rem 0;
    text-align: center;
}
.article-content__inner figure.wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    display: block;
    margin: 0 auto;
}
.article-content__inner figure.wp-block-image figcaption {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 0.6rem;
    font-style: italic;
}

/* Idézet (Gutenberg: <blockquote class="wp-block-quote">) */
.article-content__inner blockquote {
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    background: rgba(77, 163, 232, 0.04);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-style: italic;
}
.article-content__inner blockquote p {
    color: var(--color-text);
    margin-bottom: 0.5rem;
}
.article-content__inner blockquote p:last-child {
    margin-bottom: 0;
}
.article-content__inner blockquote cite {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-style: normal;
    display: block;
    margin-top: 0.5rem;
}

/* ---------- 20.9 Article note - "Pontosítás" típusú kiemelt box ---------- */
/* Használat: Custom HTML blokk <div class="article-note">...</div> tartalommal */
.article-content__inner .article-note {
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    background: rgba(77, 163, 232, 0.06);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
}
.article-content__inner .article-note p {
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.article-content__inner .article-note p strong {
    color: var(--color-text);
}
.article-content__inner .article-note__title {
    font-family: var(--font-mono);
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent) !important;
    margin-bottom: 0.5rem !important;
    font-weight: 700;
}

/* ---------- 20.10 Blog cikk FAQ - terminál-stílus ---------- */
/* A .terminal, .faq-prompt és kapcsolódó stílusok a 12. szakaszban vannak
   (a front-page FAQ-szekcióhoz definiálva, újrahasznosítva a blog cikkben).
   A blog-faq.js (egyszerű accordion, typewriter nélkül) kezeli a kattintást. */

/* ---------- 20.11 Related posts ("A sorozat további cikkei") ---------- */
.related-section {
    border-top: 1px solid var(--color-border);
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    background: var(--color-surface);
}
.related-section__title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: 2rem;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
}
.related-card {
    background: var(--glass-bg);
    border: 0.5px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    transition: transform 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    display: block;
    color: inherit;
}
.related-card:hover {
    transform: translateY(-3px);
    border-color: rgba(77, 163, 232, 0.35);
}
@media (prefers-reduced-motion: reduce) {
    .related-card,
    .related-card:hover { transition: none; transform: none; }
}
.related-card__cat {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
    display: block;
}
.related-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
    margin: 0;
}
.related-card__date {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    margin: 0.5rem 0 0;
}

/* ---------- 20.12 Light theme overrides ---------- */
[data-theme="light"] .blog-card__badge {
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .article-content__inner table {
    background: rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .article-content__inner tbody tr:hover {
    background: rgba(48, 139, 217, 0.05);
}
[data-theme="light"] .article-content__inner .article-note,
[data-theme="light"] .article-content__inner blockquote {
    background: rgba(48, 139, 217, 0.05);
}

/* ---------- 20.13 Stat-trio blokk (3-kártya egymás mellett, statikus) ---------- */
/* Használat: Custom HTML blokk <div class="stat-trio">...</div> tartalommal */
.article-content__inner .stat-trio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin: 1.75rem 0;
}
@media (max-width: 640px) {
    .article-content__inner .stat-trio {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}
.article-content__inner .stat-trio__card {
    background: var(--glass-bg);
    border: 0.5px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.4rem;
    min-width: 0;
    text-align: center;
}
.article-content__inner .stat-trio__label {
    font-family: var(--font-mono);
    font-size: 0.7rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin: 0 0 0.6rem !important;
}
.article-content__inner .stat-trio__value {
    display: block;
    font-family: var(--font-sans);
    font-size: clamp(1.15rem, 2.5vw, 1.4rem);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 0.4rem;
    white-space: nowrap;
}
.article-content__inner .stat-trio__hint {
    font-size: 0.78rem !important;
    color: var(--color-text-muted) !important;
    line-height: 1.5;
    margin: 0 !important;
}

/* ---------- 20.14 Comparison-duo blokk (2-oszlopos összehasonlítás) ---------- */
/* Használat: Custom HTML blokk <div class="comparison-duo">...</div> */
.article-content__inner .comparison-duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin: 1.75rem 0;
}
@media (max-width: 640px) {
    .article-content__inner .comparison-duo {
        grid-template-columns: 1fr;
    }
}
.article-content__inner .comparison-duo__card {
    background: var(--glass-bg);
    border: 0.5px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.4rem;
    min-width: 0;
}
.article-content__inner .comparison-duo__label {
    font-family: var(--font-mono);
    font-size: 0.68rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 0.5rem !important;
}
.article-content__inner .comparison-duo__title {
    font-size: 1rem !important;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem !important;
    line-height: 1.3;
}
.article-content__inner .comparison-duo__desc {
    font-size: 0.9rem !important;
    color: var(--color-text-muted) !important;
    line-height: 1.55;
    margin: 0 !important;
}

/* ---------- 20.15 Pull-quote (kiemelt idézet / filozófia-box) ---------- */
.article-content__inner .pull-quote {
    margin: 2rem auto;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(77, 163, 232, 0.08) 0%, rgba(26, 106, 173, 0.04) 100%);
    border: 1px solid rgba(77, 163, 232, 0.22);
    border-radius: var(--radius-lg);
    text-align: center;
    max-width: 600px;
    position: relative;
}
.article-content__inner .pull-quote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-accent), transparent);
}
.article-content__inner .pull-quote__title {
    font-family: var(--font-mono);
    font-size: 0.75rem !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 0.75rem !important;
}
.article-content__inner .pull-quote__text {
    font-size: 1.1rem !important;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0 !important;
    font-style: italic;
}

/* ---------- 20.16 Reading progress bar (blog single posts) ---------- */
/* A global.js dinamikusan injektálja a body-ba, ha body.single-post class van.
   Alapból rejtett (opacity: 0). Amikor a görgetés elindul (.site-header.is-scrolled),
   megjelenik a shrunk header alatt. Admin bar (body.admin-bar) esetén lejjebb. */
.reading-progress {
    position: fixed;
    top: var(--header-height); /* 84px - normál header alja, görgetés előtt rejtve */
    left: 0;
    right: 0;
    height: 3px;
    z-index: 49; /* a header (z-index: 50) alatt */
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, top 0.3s ease;
}

/* Görgetés után: header shrunk → progress megjelenik a shrunk header alatt */
.site-header.is-scrolled ~ .reading-progress {
    top: var(--header-height-shrunk); /* 64px */
    opacity: 1;
}

/* Logged-in user (WP admin bar 32px desktop / 46px mobile) */
body.admin-bar .reading-progress {
    top: calc(var(--header-height) + 32px);
}
body.admin-bar .site-header.is-scrolled ~ .reading-progress {
    top: calc(var(--header-height-shrunk) + 32px);
}
@media (max-width: 782px) {
    body.admin-bar .reading-progress {
        top: calc(var(--header-height) + 46px);
    }
    body.admin-bar .site-header.is-scrolled ~ .reading-progress {
        top: calc(var(--header-height-shrunk) + 46px);
    }
}

.reading-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--color-brand), var(--color-accent));
    transition: width 0.12s linear;
    box-shadow: 0 0 8px rgba(77, 163, 232, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .reading-progress,
    .reading-progress__bar { transition: none; }
}