/* ==========================================================================
   1x1 MEDIA — Unified Stylesheet
   ========================================================================== */

/* 1. CSS Custom Properties */
:root {
    --clr-bg:           #F4F4F4;
    --clr-surface:      #FFFFFF;
    --clr-surface-2:    #EEEEEE;
    --clr-accent:       #35B878;
    --clr-accent-dim:   #27A066;
    --clr-accent-light: #A8E4C8;
    --clr-text:         #111111;
    --clr-text-muted:   #555555;
    --clr-text-dim:     #888888;
    --clr-border:       #E0E0E0;
    --clr-danger:       #E53935;
    --font-main:        'Outfit', sans-serif;
    --radius-md:        12px;
    --radius-lg:        16px;
}

/* 2. Reset & Base */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: var(--font-main); background: var(--clr-bg); color: var(--clr-text); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* 3. Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* 4. Header & Navigation */
.header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(244,244,244,0.95); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--clr-border); padding: 18px 0;
    transition: padding 0.3s, box-shadow 0.3s;
}
.header.scrolled { padding: 14px 0; box-shadow: 0 2px 16px rgba(0,0,0,0.08); }
.header__inner { display: flex; align-items: center; justify-content: space-between; }
.header__logo img { height: 48px; display: block; }
.header__right { display: flex; align-items: center; gap: 24px; }
.header__nav { display: flex; align-items: center; gap: 28px; }
.header__nav a { font-size: 13px; color: var(--clr-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; transition: color 0.2s; }
.header__nav a:hover, .header__nav a.active { color: var(--clr-accent); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--clr-text); border-radius: 2px; transition: background 0.2s; }

/* Header for legal pages */
.header .container { display: flex; align-items: center; justify-content: space-between; }
.header__back { font-size: 14px; font-weight: 600; color: var(--clr-text-muted); transition: color 0.2s; display: flex; align-items: center; gap: 8px; }
.header__back:hover { color: var(--clr-accent); }

/* 5. Green Button Animation System */
@property --btn-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes btnAngle { to { --btn-angle: 360deg; } }
@keyframes btnShine {
    0%   { left: -80%; opacity: 0; }
    8%   { opacity: 1; }
    48%  { left: 130%; opacity: 1; }
    49%  { opacity: 0; }
    100% { left: 130%; opacity: 0; }
}

/* 6. Buttons & CTAs */
.header__cta { display: inline-block; padding: 10px 22px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 6px; white-space: nowrap; border: 2px solid transparent; background: linear-gradient(135deg, #1a7a4a 0%, #35B878 55%, #3dd982 100%) padding-box, conic-gradient(from var(--btn-angle), #1e8a56 0%, #35B878 30%, #A8E4C8 50%, #fff 55%, #A8E4C8 60%, #35B878 75%, #1e8a56 100%) border-box; color: #fff; position: relative; overflow: hidden; animation: btnAngle 2.8s linear infinite; transition: filter 0.25s, box-shadow 0.3s; }
.header__cta::after { content: ''; position: absolute; top: -60%; left: -80%; width: 45%; height: 220%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100%); transform: skewX(-18deg); animation: btnShine 3.2s ease-in-out infinite; pointer-events: none; }
.header__cta:hover { filter: brightness(1.12); box-shadow: 0 0 20px rgba(53,184,120,0.6), 0 0 40px rgba(53,184,120,0.2); }

.hero-cta-wrap { display: inline-block; flex-shrink: 0; }

.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; font-size: 15px; font-weight: 700; border-radius: var(--radius-md); border: 2px solid transparent; background: linear-gradient(135deg, #1a7a4a 0%, #35B878 55%, #3dd982 100%) padding-box, conic-gradient(from var(--btn-angle), #1e8a56 0%, #35B878 30%, #A8E4C8 50%, #fff 55%, #A8E4C8 60%, #35B878 75%, #1e8a56 100%) border-box; color: #fff; position: relative; overflow: hidden; animation: btnAngle 2.8s linear infinite; transition: filter 0.25s, transform 0.2s, box-shadow 0.3s; }
.btn-primary::after { content: ''; position: absolute; top: -60%; left: -80%; width: 45%; height: 220%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100%); transform: skewX(-18deg); animation: btnShine 3.2s ease-in-out infinite; pointer-events: none; }
.btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 0 28px rgba(53,184,120,0.65), 0 0 60px rgba(53,184,120,0.25); }

.btn-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: transparent; color: var(--clr-text-muted); font-size: 15px; font-weight: 600; border: 1px solid #DDDDDD; border-radius: var(--radius-md); transition: all 0.2s; font-family: var(--font-main); }
.btn-secondary:hover { border-color: #999; color: #111; }

.btn-cta-white { display: inline-block; padding: 16px 36px; background: #fff; color: var(--clr-accent-dim); font-size: 15px; font-weight: 700; border-radius: var(--radius-md); transition: all 0.2s; white-space: nowrap; }
.btn-cta-white:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); }

.btn-calendar { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; background: var(--clr-accent); color: #fff; border-radius: var(--radius-md); font-size: 15px; font-weight: 700; transition: background 0.2s, transform 0.2s; }
.btn-calendar:hover { background: var(--clr-accent-dim); transform: translateY(-2px); }
.btn-calendar.hidden { display: none; }

.btn-spontaneous { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--clr-accent); color: #fff; border-radius: var(--radius-md); font-size: 14px; font-weight: 700; transition: background 0.2s; }
.btn-spontaneous:hover { background: var(--clr-accent-dim); }

.arrow-link { font-size: 13px; color: var(--clr-accent); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s; }
.arrow-link:hover { gap: 10px; }

/* 7. Section Labels & Titles */
.section__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-accent); margin-bottom: 14px; display: block; }
.section__title { font-family: var(--font-main); font-size: clamp(28px, 4vw, 52px); font-weight: 900; text-transform: uppercase; line-height: 1.05; margin-bottom: 18px; }
.section__sub { font-size: 17px; color: var(--clr-text-muted); line-height: 1.7; }

.section-header { margin-bottom: 48px; }
.section-header .label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--clr-accent); margin-bottom: 12px; }
.section-header h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.section-header p { font-size: 16px; color: var(--clr-text-muted); max-width: 560px; line-height: 1.7; }

/* 8. Forms */
.form-notice { padding: 14px 18px; border-radius: var(--radius-md); font-size: 14px; margin-bottom: 20px; display: none; line-height: 1.5; }
.form-notice--success { background: rgba(53,184,120,0.12); border: 1px solid rgba(53,184,120,0.35); color: #2DCF7A; }
.form-notice--error { background: rgba(255,61,61,0.1); border: 1px solid rgba(255,61,61,0.3); color: #FF6B6B; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text); margin-bottom: 8px; }
.form-group label .req { color: var(--clr-accent); }
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%; padding: 12px 16px;
    background: var(--clr-bg); border: 1.5px solid var(--clr-border); border-radius: var(--radius-md);
    color: var(--clr-text); font-family: var(--font-main); font-size: 15px;
    transition: border-color 0.2s; outline: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--clr-accent); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; cursor: pointer; }

.form-submit { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; font-size: 15px; font-weight: 700; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-main); background: linear-gradient(135deg, #1a7a4a 0%, #35B878 55%, #3dd982 100%) padding-box, conic-gradient(from var(--btn-angle), #1e8a56 0%, #35B878 30%, #A8E4C8 50%, #fff 55%, #A8E4C8 60%, #35B878 75%, #1e8a56 100%) border-box; color: #fff; position: relative; overflow: hidden; animation: btnAngle 2.8s linear infinite; transition: filter 0.25s, transform 0.2s, box-shadow 0.3s; }
.form-submit::after { content: ''; position: absolute; top: -60%; left: -80%; width: 45%; height: 220%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100%); transform: skewX(-18deg); animation: btnShine 3.2s ease-in-out infinite; pointer-events: none; }
.form-submit:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 0 28px rgba(53,184,120,0.65), 0 0 60px rgba(53,184,120,0.25); }

.btn-submit { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; font-size: 15px; font-weight: 700; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-main); background: linear-gradient(135deg, #1a7a4a 0%, #35B878 55%, #3dd982 100%) padding-box, conic-gradient(from var(--btn-angle), #1e8a56 0%, #35B878 30%, #A8E4C8 50%, #fff 55%, #A8E4C8 60%, #35B878 75%, #1e8a56 100%) border-box; color: #fff; position: relative; overflow: hidden; animation: btnAngle 2.8s linear infinite; transition: filter 0.25s, transform 0.2s, box-shadow 0.3s; }
.btn-submit::after { content: ''; position: absolute; top: -60%; left: -80%; width: 45%; height: 220%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100%); transform: skewX(-18deg); animation: btnShine 3.2s ease-in-out infinite; pointer-events: none; }
.btn-submit:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 0 28px rgba(53,184,120,0.65), 0 0 60px rgba(53,184,120,0.25); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.form-note { font-size: 13px; color: var(--clr-text-dim); margin-top: 12px; }
.form-note a { color: var(--clr-accent); }
.form-gdpr { margin: 8px 0 16px; }
.gdpr-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; color: var(--clr-text-muted); line-height: 1.55; }
.gdpr-label input[type="checkbox"] { margin-top: 2px; width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--clr-accent); cursor: pointer; }
.gdpr-label a { color: var(--clr-accent); text-decoration: underline; }

.form-feedback { display: none; padding: 14px 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; margin-bottom: 20px; }
.form-feedback.success { background: rgba(53,184,120,0.1); color: var(--clr-accent-dim); border: 1px solid var(--clr-accent-light); display: block; }
.form-feedback.error { background: rgba(229,57,53,0.08); color: var(--clr-danger); border: 1px solid rgba(229,57,53,0.2); display: block; }

.form-card { background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 40px; }

/* 9. Hero (all variants) */

/* Hero — index.html (full viewport, centered) */
.hero {
    min-height: 100vh; display: flex; align-items: center;
    position: relative; overflow: hidden;
}
.hero__bg {
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(53,184,120,0.07) 0%, transparent 70%);
}
.hero__spotlight {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(circle 400px at var(--mx,50%) var(--my,40%), rgba(53,184,120,0.04) 0%, transparent 70%);
}
.hero__canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__canvas svg { width: 100%; height: 100%; }
.hero__spotlight-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(circle 200px at var(--mx, 70%) var(--my, 45%),
            rgba(53,184,120,0.13) 0%,
            transparent 70%
        ),
        radial-gradient(circle 440px at var(--mx, 70%) var(--my, 45%),
            rgba(244,244,244,0) 0%,
            rgba(244,244,244,0.84) 65%
        );
}
.hero > .container { width: 100%; }
.hero__inner { width: 100%; position: relative; z-index: 2; }
.hero__content { position: relative; z-index: 2; text-align: center; padding: 120px 0 80px; width: 100%; }
.hero__label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--clr-accent); margin-bottom: 24px; border: 1px solid rgba(53,184,120,0.35); padding: 6px 16px; border-radius: 20px; }
.hero__title {
    font-family: var(--font-main); font-weight: 900; text-transform: uppercase;
    line-height: 1.0; margin-bottom: 24px;
    font-size: clamp(44px, 6vw, 88px);
    animation: heroBreathe 4s ease-in-out infinite;
}
.hero__title .accent { color: var(--clr-accent); animation: glowPulse 4s ease-in-out infinite; }
.hero__sub { font-size: clamp(16px, 2vw, 21px); color: var(--clr-text-muted); max-width: 620px; margin: 0 auto 40px; line-height: 1.6; }
.hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--clr-text-dim); font-size: 12px; text-align: center; animation: heroScrollBounce 2s ease-in-out infinite; }
.hero__scroll i { display: block; font-size: 18px; margin-top: 6px; }

@keyframes heroBreathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.88; } }
@keyframes glowPulse { 0%, 100% { text-shadow: 0 0 40px rgba(53,184,120,0.3); } 50% { text-shadow: 0 0 80px rgba(53,184,120,0.5); } }
@keyframes heroScrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

/* Hero — referenciak/kapcsolat/jelentkezes (simple, padded) */
.hero .label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--clr-accent); background: rgba(53,184,120,0.1); padding: 6px 14px; border-radius: 20px; margin-bottom: 20px; }
.hero h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; }
.hero h1 span { color: var(--clr-accent); }
.hero p { font-size: 18px; color: var(--clr-text-muted); max-width: 600px; margin: 0 auto; line-height: 1.7; }

/* ── Belső oldal kompakt hero (kapcsolat, referenciák — nem teljes képernyő) ─ */
.page-hero { min-height: unset; display: block; padding: 140px 0 80px; text-align: center; }

/* Hero — jelentkezes (two column) */
.hero-values { display: flex; flex-direction: column; gap: 12px; }
.hero-value { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--clr-text-muted); }
.hero-value i { color: var(--clr-accent); width: 16px; }
.hero__visual { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 36px; }
.team-stat { text-align: center; padding: 20px 0; border-bottom: 1px solid var(--clr-border); }
.team-stat:last-child { border-bottom: none; }
.team-stat-val { font-size: 40px; font-weight: 900; color: var(--clr-accent); line-height: 1; }
.team-stat-label { font-size: 13px; color: var(--clr-text-muted); margin-top: 6px; }

/* 10. Trust Marquee (index) */
.trust { padding: 40px 0; background: var(--clr-bg); }
.trust__label { font-size: 11px; color: var(--clr-text); text-transform: uppercase; letter-spacing: 0.12em; text-align: center; margin-bottom: 28px; font-weight: 700; }
.trust__marquee { position: relative; overflow: hidden; }
.trust__marquee::before,
.trust__marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.trust__marquee::before { left: 0; background: linear-gradient(to right, var(--clr-bg), transparent); }
.trust__marquee::after  { right: 0; background: linear-gradient(to left, var(--clr-bg), transparent); }
.trust__track { display: flex; gap: 0; width: max-content; animation: trustScroll 22s linear infinite; }
.trust__track:hover { animation-play-state: paused; }
@keyframes trustScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.trust__item { display: flex; align-items: center; justify-content: center; width: calc(100vw / 4); max-width: 280px; min-width: 200px; padding: 0 32px; flex-shrink: 0; }
.trust__item img { height: 38px; width: auto; max-width: 160px; opacity: 0.45; transition: opacity 0.3s, transform 0.25s; display: block; object-fit: contain; }
.trust__item:hover img { opacity: 0.85; transform: translateY(-2px); }

/* 11. Problem Cards (index) */
.problems { padding: 96px 0; position: relative; }
.problems__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }
.problem-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 32px; position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.3s; }
.problem-card:hover { border-color: rgba(53,184,120,0.3); transform: translateY(-2px); }
.problem-card__num { font-family: var(--font-main); font-size: 72px; font-weight: 900; color: #E0E0E0; position: absolute; top: 12px; right: 20px; line-height: 1; pointer-events: none; user-select: none; }
.problem-card__icon { width: 44px; height: 44px; background: rgba(180,180,180,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #E53935; font-size: 18px; margin-bottom: 20px; }
.problem-card h3 { font-family: var(--font-main); font-size: 24px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; line-height: 1.1; }
.problem-card p { font-size: 15px; color: var(--clr-text-muted); line-height: 1.7; margin-bottom: 20px; }
.problem-card .hl { transition: color 0.35s; }
.problem-card:hover .hl { color: #E53935; }

/* Problems — marketing-rendszer-epites variant */
.problems__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.problems__list { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.problem-item { display: flex; align-items: flex-start; gap: 14px; background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 18px 20px; }
.problem-item i { color: #E53935; margin-top: 2px; flex-shrink: 0; width: 16px; }
.problem-item p { font-size: 15px; color: var(--clr-text-muted); line-height: 1.5; }
.problems__visual { display: flex; align-items: center; justify-content: center; }
.problems__visual svg { width: 100%; max-width: 480px; overflow: visible; }

/* 12. Chaos Visualization (index + marketing-strategia) */
.problems-chaos { padding: 0 0 80px; }
.why__chaos-wrap { margin-top: 64px; }
.why__chaos-intro { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-text-dim); text-align: center; margin-bottom: 18px; }
.why__chaos { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid #E8E8E8; background: var(--clr-surface); padding: 18px 0; display: flex; flex-direction: column; gap: 10px; }
.why__chaos::before, .why__chaos::after { content: ''; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none; }
.why__chaos::before { left: 0; background: linear-gradient(to right, var(--clr-surface), transparent); }
.why__chaos::after  { right: 0; background: linear-gradient(to left,  var(--clr-surface), transparent); }
.chaos-row { display: flex; gap: 10px; width: max-content; align-items: center; padding: 0 10px; }
.chaos-row--fwd  { animation: chaosRollFwd 34s linear infinite; }
.chaos-row--rev  { animation: chaosRollRev 28s linear infinite; }
.chaos-row--slow { animation-duration: 46s !important; }
@keyframes chaosRollFwd { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes chaosRollRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.ct { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ct--platform { background: rgba(17,17,17,0.05); color: #666; border: 1px solid #DCDCDC; }
.ct--advice   { background: rgba(200,60,60,0.06); color: #B03838; border: 1px solid rgba(200,60,60,0.2); font-style: italic; }
.ct--tool     { background: rgba(53,184,120,0.07); color: #2A9060; border: 1px solid rgba(53,184,120,0.25); }
.why__chaos-note { font-size: 15px; color: var(--clr-text-muted); text-align: center; margin-top: 22px; line-height: 1.65; max-width: 680px; margin-left: auto; margin-right: auto; }
.why__chaos-note strong { color: var(--clr-accent-dim); font-weight: 700; }

/* 13. Process/Steps */

/* Process — index.html */
.process { padding: 96px 0; background: var(--clr-surface); }
.process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin-top: 56px; }
.process__steps::before { content: ''; position: absolute; top: 35px; left: calc(12.5%); right: calc(12.5%); height: 2px; background: linear-gradient(90deg, var(--clr-accent-dim), var(--clr-accent), var(--clr-accent-dim)); background-size: 200% 100%; z-index: 0; animation: processFlow 3s ease-in-out infinite; }
@keyframes processFlow { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.process__step { text-align: center; padding: 0 16px; position: relative; z-index: 1; }
.process__num { width: 70px; height: 70px; border-radius: 50%; background: var(--clr-bg); border: 2px solid var(--clr-accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-family: var(--font-main); font-size: 26px; font-weight: 900; color: var(--clr-accent); }
.process__step h3 { font-family: var(--font-main); font-size: 18px; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
.process__step p { font-size: 14px; color: var(--clr-text-muted); line-height: 1.6; }

/* Steps — marketing-strategia.html */
.steps { padding: 96px 0; }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; margin-top: 56px; }
.steps__grid::before { content: ''; position: absolute; top: 36px; left: calc(16.7%); right: calc(16.7%); height: 2px; background: linear-gradient(90deg, var(--clr-accent-dim), var(--clr-accent), var(--clr-accent-dim)); background-size: 200% 100%; z-index: 0; animation: processFlow 3s ease-in-out infinite; }
.step { text-align: center; padding: 0 24px; position: relative; z-index: 1; }
.step__num { width: 72px; height: 72px; border-radius: 50%; background: var(--clr-bg); border: 2px solid var(--clr-accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-family: var(--font-main); font-size: 28px; font-weight: 900; color: var(--clr-accent); }
.step h3 { font-family: var(--font-main); font-size: 20px; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
.step p { font-size: 14px; color: var(--clr-text-muted); line-height: 1.6; }
.step__badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-accent); background: rgba(53,184,120,0.1); padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; }

/* 14. Featured Reference (index) */
.featured-ref { padding: 96px 0; }
.featured-ref__card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; }
.featured-ref__img { background: #E0E0E0; position: relative; overflow: hidden; }
.featured-ref__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-ref__placeholder { width: 100%; height: 100%; min-height: 280px; display: flex; align-items: center; justify-content: center; color: #333; font-size: 48px; }
.featured-ref__body { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.featured-ref__tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-accent); margin-bottom: 12px; }
.featured-ref__body h3 { font-family: var(--font-main); font-size: 30px; font-weight: 900; text-transform: uppercase; line-height: 1.1; margin-bottom: 16px; }
.featured-ref__body p { font-size: 15px; color: var(--clr-text-muted); line-height: 1.7; margin-bottom: 24px; }
.featured-ref__empty { padding: 48px; display: flex; align-items: center; justify-content: center; color: var(--clr-text-dim); grid-column: 1 / -1; text-align: center; flex-direction: column; gap: 12px; }

/* 15. For Whom */
.forwhom { padding: 96px 0; background: var(--clr-surface); }

/* For Whom — index (grid cards) */
.forwhom__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.forwhom__card { background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 32px; text-align: center; transition: border-color 0.3s, transform 0.3s; }
.forwhom__card:hover { border-color: rgba(53,184,120,0.35); transform: translateY(-2px); }
.forwhom__icon { width: 60px; height: 60px; border-radius: 14px; background: rgba(53,184,120,0.12); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--clr-accent); font-size: 22px; }
.forwhom__card h3 { font-family: var(--font-main); font-size: 22px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
.forwhom__card p { font-size: 14px; color: var(--clr-text-muted); line-height: 1.7; }

/* For Whom — marketing-strategia (list items) */
.forwhom__list { display: flex; flex-direction: column; gap: 12px; max-width: 680px; margin: 40px auto 0; }
.forwhom__item { display: flex; align-items: flex-start; gap: 14px; background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 18px 20px; transition: border-color 0.2s; }
.forwhom__item:hover { border-color: rgba(53,184,120,0.35); }
.forwhom__item i { color: var(--clr-accent); margin-top: 2px; flex-shrink: 0; width: 16px; }
.forwhom__item p { font-size: 15px; color: var(--clr-text-muted); line-height: 1.5; }

/* 16. FAQ */
.faq { padding: 96px 0; }
.faq__list { max-width: 760px; margin: 56px auto 0; }
.faq__item { border-bottom: 1px solid var(--clr-border); }
.faq__q { width: 100%; background: none; border: none; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; color: var(--clr-text); gap: 16px; font-family: var(--font-main); }
.faq__q span { font-size: 17px; font-weight: 600; line-height: 1.4; }
.faq__q i { color: var(--clr-accent); font-size: 14px; flex-shrink: 0; transition: transform 0.3s; }
.faq__item.open .faq__q i { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq__a p { font-size: 15px; color: var(--clr-text-muted); line-height: 1.7; padding-bottom: 22px; }

/* 17. Consultation Form Section */
.konsult { padding: 96px 0; background: var(--clr-surface); }
.konsult__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.konsult__left h2 { font-family: var(--font-main); font-size: clamp(28px, 4vw, 52px); font-weight: 900; text-transform: uppercase; line-height: 1.0; margin-bottom: 20px; }
.konsult__left p { font-size: 16px; color: var(--clr-text-muted); line-height: 1.7; margin-bottom: 32px; }
.konsult__contacts { display: flex; flex-direction: column; gap: 14px; }
.konsult__contact-item { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--clr-text-muted); }
.konsult__contact-item i { color: var(--clr-accent); width: 18px; flex-shrink: 0; }
.konsult__contact-item a { color: var(--clr-text-muted); transition: color 0.2s; }
.konsult__contact-item a:hover { color: var(--clr-accent); }

/* 18. Why Strategy (marketing-strategia) */
.why { padding: 96px 0; background: var(--clr-surface); border-top: 1px solid var(--clr-border); }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.why__card { background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 32px; }
.why__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(53,184,120,0.12); display: flex; align-items: center; justify-content: center; color: var(--clr-accent); font-size: 20px; margin-bottom: 20px; }
.why__card h3 { font-family: var(--font-main); font-size: 22px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
.why__card p { font-size: 15px; color: var(--clr-text-muted); line-height: 1.7; }
.why__lead { font-size: 18px; color: var(--clr-text-muted); line-height: 1.75; margin-top: 24px; max-width: 740px; margin-left: auto; margin-right: auto; }
.why__lead strong { color: var(--clr-text); font-weight: 700; }
.why__bridge { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--clr-accent); text-align: center; margin-top: 56px; margin-bottom: -20px; }

/* 19. Deliverable (marketing-strategia) */
.deliverable { padding: 96px 0; }
.deliverable__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; margin-top: 56px; }
.deliverable__doc { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 36px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.deliverable__doc-header { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--clr-border); margin-bottom: 24px; }
.deliverable__doc-icon { width: 44px; height: 44px; background: rgba(53,184,120,0.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--clr-accent); font-size: 18px; flex-shrink: 0; }
.deliverable__doc-title { font-family: var(--font-main); font-size: 18px; font-weight: 800; text-transform: uppercase; line-height: 1.2; }
.deliverable__doc-sub { font-size: 13px; color: var(--clr-text-dim); }
.doc-section { margin-bottom: 20px; }
.doc-section:last-child { margin-bottom: 0; }
.doc-section__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-accent); margin-bottom: 10px; }
.doc-section__items { display: flex; flex-direction: column; gap: 6px; }
.doc-section__item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--clr-text-muted); }
.doc-section__item i { color: var(--clr-accent); margin-top: 3px; flex-shrink: 0; font-size: 11px; }
.deliverable__text h3 { font-family: var(--font-main); font-size: 32px; font-weight: 900; text-transform: uppercase; line-height: 1.1; margin-bottom: 20px; }
.deliverable__text p { font-size: 16px; color: var(--clr-text-muted); line-height: 1.7; margin-bottom: 16px; }

/* 20. Methodology (marketing-strategia) */
.method { padding: 96px 0; background: var(--clr-surface); }
.method__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }
.method__card { background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 28px 32px; display: flex; gap: 20px; align-items: flex-start; transition: border-color 0.3s, transform 0.3s; }
.method__card:hover { border-color: rgba(53,184,120,0.35); transform: translateY(-2px); }
.method__icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(53,184,120,0.12); display: flex; align-items: center; justify-content: center; color: var(--clr-accent); font-size: 18px; flex-shrink: 0; }
.method__body h3 { font-family: var(--font-main); font-size: 20px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.method__body p { font-size: 14px; color: var(--clr-text-muted); line-height: 1.7; }

/* 21. Service Diagram (marketing-rendszer-epites) */
.system { padding: 96px 0; }
.system__diagram { margin: 56px auto 0; max-width: 700px; }
.mrd-svg { width: 100%; max-width: 680px; display: block; margin: 0 auto; }
.mrd-node { fill: #F0F0F0; stroke: var(--clr-border); stroke-width: 1.5; rx: 10; }
.mrd-node-accent { fill: rgba(53,184,120,0.12); stroke: var(--clr-accent); stroke-width: 1.5; }
.mrd-node-center { fill: rgba(53,184,120,0.2); stroke: var(--clr-accent); stroke-width: 2; }
.mrd-text { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; fill: #111111; text-anchor: middle; dominant-baseline: middle; text-transform: uppercase; }
.mrd-text-center { font-size: 17px; fill: var(--clr-accent); }
.mrd-text-result { font-size: 18px; fill: var(--clr-accent); }
.mrd-text-small { font-family: 'Outfit', sans-serif; font-size: 11px; fill: #888888; text-anchor: middle; }
.mrd-line { stroke: #CCCCCC; stroke-width: 1.5; fill: none; }
.mrd-line-accent { stroke: var(--clr-accent); stroke-width: 2; fill: none; stroke-dasharray: 6 4; animation: dashFlow 2s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -20; } }
.mrd-arrow { fill: var(--clr-accent); }

/* 22. Phases (marketing-rendszer-epites) */
.phases { padding: 96px 0; background: var(--clr-surface); }
.phases__grid { display: flex; flex-direction: column; gap: 0; margin-top: 56px; }
.phase { display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--clr-border); position: relative; }
.phase:last-child { border-bottom: none; }
.phase__num { font-family: var(--font-main); font-size: 80px; font-weight: 900; color: #E0E0E0; line-height: 1; align-self: center; text-align: center; }
.phase__body {}
.phase__badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-accent); margin-bottom: 10px; }
.phase__body h3 { font-family: var(--font-main); font-size: 28px; font-weight: 900; text-transform: uppercase; margin-bottom: 14px; }
.phase__body p { font-size: 15px; color: var(--clr-text-muted); line-height: 1.7; margin-bottom: 16px; }
.phase__items { display: flex; flex-direction: column; gap: 8px; }
.phase__item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--clr-text-muted); }
.phase__item i { color: var(--clr-accent); margin-top: 3px; flex-shrink: 0; font-size: 12px; }
.phase__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--clr-accent); font-weight: 600; margin-top: 16px; transition: gap 0.2s; }
.phase__link:hover { gap: 10px; }

/* 23. Comparison Table (marketing-rendszer-epites) */
.compare { padding: 96px 0; }
.compare__table { margin-top: 56px; border: 1px solid var(--clr-border); border-radius: var(--radius-lg); overflow: hidden; }
.compare__head { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.compare__head-cell { padding: 18px 24px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-dim); }
.compare__head-cell.highlight { color: var(--clr-accent); }
.compare__row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--clr-border); transition: background 0.2s; }
.compare__row:last-child { border-bottom: none; }
.compare__row:hover { background: rgba(255,255,255,0.02); }
.compare__cell { padding: 16px 24px; font-size: 14px; color: var(--clr-text-muted); line-height: 1.5; }
.compare__cell.label { font-weight: 600; color: var(--clr-text-dim); font-size: 13px; }
.compare__cell.highlight { color: var(--clr-accent); font-weight: 600; }

/* 24. Chaos vs System (marketing-rendszer-epites) */
.cvs-section { padding: 72px 0; background: var(--clr-bg); }
.cvs-header { text-align: center; margin-bottom: 48px; }
.cvs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 820px;
    margin: 0 auto;
}
.cvs-card {
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid var(--clr-border);
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}
.cvs-card__head {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
}
.cvs-card--chaos .cvs-card__head {
    background: #FFF3F3;
    color: #C0392B;
    border-bottom: 1.5px solid #FFD5D5;
}
.cvs-card--system .cvs-card__head {
    background: #F0FBF4;
    color: #27A066;
    border-bottom: 1.5px solid #B8E8CC;
}
.cvs-viz { padding: 16px 12px 8px; }
.cvs-viz svg { width: 100%; height: auto; display: block; }
.cvs-footer {
    padding: 12px 20px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid #F0F0F0;
}
.cvs-stat {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}
.cvs-stat--bad  { background: #FFE5E5; color: #C0392B; }
.cvs-stat--good { background: #E0F5EA; color: #27A066; }
.cvs-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
}
.cvs-tag--bad  { background: #F5F5F5; color: #888888; }
.cvs-tag--good { background: #E8F8EF; color: #35B878; }

/* Chaos dot animations */
.chaos-dot { transform-box: fill-box; transform-origin: center; }
@keyframes chaos1 { 0%{transform:translate(0,0);opacity:.9} 65%{opacity:.25} 100%{transform:translate(0px,-72px);opacity:0} }
@keyframes chaos2 { 0%{transform:translate(0,0);opacity:.9} 65%{opacity:.25} 100%{transform:translate(68px,-52px);opacity:0} }
@keyframes chaos3 { 0%{transform:translate(0,0);opacity:.9} 65%{opacity:.25} 100%{transform:translate(82px,0px);opacity:0} }
@keyframes chaos4 { 0%{transform:translate(0,0);opacity:.9} 65%{opacity:.25} 100%{transform:translate(60px,60px);opacity:0} }
@keyframes chaos5 { 0%{transform:translate(0,0);opacity:.9} 65%{opacity:.25} 100%{transform:translate(0px,72px);opacity:0} }
@keyframes chaos6 { 0%{transform:translate(0,0);opacity:.9} 65%{opacity:.25} 100%{transform:translate(-60px,60px);opacity:0} }
@keyframes chaos7 { 0%{transform:translate(0,0);opacity:.9} 65%{opacity:.25} 100%{transform:translate(-82px,0px);opacity:0} }
@keyframes chaos8 { 0%{transform:translate(0,0);opacity:.9} 65%{opacity:.25} 100%{transform:translate(-68px,-52px);opacity:0} }
.chaos-dot-1 { animation: chaos1 2.4s ease-out infinite 0s; }
.chaos-dot-2 { animation: chaos2 2.4s ease-out infinite 0.3s; }
.chaos-dot-3 { animation: chaos3 2.4s ease-out infinite 0.6s; }
.chaos-dot-4 { animation: chaos4 2.4s ease-out infinite 0.9s; }
.chaos-dot-5 { animation: chaos5 2.4s ease-out infinite 1.2s; }
.chaos-dot-6 { animation: chaos6 2.4s ease-out infinite 1.5s; }
.chaos-dot-7 { animation: chaos7 2.4s ease-out infinite 1.8s; }
.chaos-dot-8 { animation: chaos8 2.4s ease-out infinite 2.1s; }

/* 25. Portal Dashboard Mockup (marketing-rendszer-epites) */
.portal-section { padding: 80px 0; background: var(--clr-surface); }
.portal-intro { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.portal-features-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
.portal-feat {
    background: var(--clr-bg);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--clr-border);
}
.portal-feat__icon {
    width: 38px; height: 38px;
    border-radius: 9px;
    background: #E8F8EF;
    color: #35B878;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.portal-feat__title { font-size: 14px; font-weight: 700; color: var(--clr-text); margin-bottom: 6px; }
.portal-feat__text  { font-size: 13px; color: var(--clr-text-muted); line-height: 1.5; }

/* Mock wrapper with fade */
.portal-mock-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    max-height: 400px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.08);
}
.portal-mock-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 170px;
    background: linear-gradient(to bottom, transparent, var(--clr-surface));
    pointer-events: none;
    z-index: 2;
}

/* Dashboard chrome — light theme */
.portal-mock { background: #F4F6F8; font-family: 'Outfit', sans-serif; color: #111111; }
.pm-titlebar {
    background: #FFFFFF;
    padding: 9px 16px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid #E8EBF0;
}
.pm-win-dots { display: flex; gap: 6px; align-items: center; }
.pm-dot-r { width:11px; height:11px; border-radius:50%; background:#FF5F57; }
.pm-dot-y { width:11px; height:11px; border-radius:50%; background:#FEBC2E; }
.pm-dot-g { width:11px; height:11px; border-radius:50%; background:#28C840; }
.pm-win-title { color: #AAAAAA; font-size: 12px; margin-left: 8px; }
.pm-topbar {
    background: #FFFFFF;
    padding: 10px 16px;
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid #E8EBF0; flex-wrap: wrap;
}
.pm-brand-name { font-size: 14px; font-weight: 800; color: #111; }
.pm-brand-name span { color: #35B878; }
.pm-client-name { font-size: 12px; color: #888; }
.pm-client-tag { font-size: 10px; color: #666; background: #F0F2F5; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--clr-border); }
.pm-live-btn {
    margin-left: auto; background: #35B878; color: #fff;
    font-size: 11px; font-weight: 700; padding: 5px 12px;
    border-radius: 6px; display: flex; align-items: center; gap: 6px;
}
.pm-live-dot {
    width: 7px; height: 7px; background: #28C840;
    border-radius: 50%;
    animation: pmLivePulse 2s ease-in-out infinite;
}
@keyframes pmLivePulse {
    0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(40,200,64,.6); }
    50%    { opacity:.7; box-shadow:0 0 0 4px rgba(40,200,64,0); }
}
.pm-months {
    background: #F4F6F8;
    padding: 7px 16px;
    display: flex; align-items: center; gap: 3px;
    border-bottom: 1px solid #E8EBF0; overflow: hidden;
}
.pm-month { padding: 3px 9px; border-radius: 20px; font-size: 11px; color: #AAAAAA; font-weight: 500; white-space: nowrap; }
.pm-month.active { background: #35B878; color: #fff; font-weight: 700; }
.pm-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; padding: 12px 16px;
}
.pm-kpi { border-radius: 8px; padding: 10px 12px; }
.pm-kpi-label { font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin-bottom: 5px; }
.pm-kpi-val   { font-size: 21px; font-weight: 800; line-height: 1.1; opacity: 0; }
.pm-kpi-sub   { font-size: 9px; opacity: .65; margin-top: 3px; }
.pm-kpi--green  { background: #E8F8EF; border: 1px solid #C2EDD7; }
.pm-kpi--green  .pm-kpi-label{ color:#27A066; } .pm-kpi--green  .pm-kpi-val{ color:#1A7A4E; }
.pm-kpi--blue   { background: #E8F2FF; border: 1px solid #C2D8F5; }
.pm-kpi--blue   .pm-kpi-label{ color:#2A6FCC; } .pm-kpi--blue   .pm-kpi-val{ color:#1A4E99; }
.pm-kpi--purple { background: #F0E8FF; border: 1px solid #D8C2F5; }
.pm-kpi--purple .pm-kpi-label{ color:#7733CC; } .pm-kpi--purple .pm-kpi-val{ color:#5A1FA8; }
.pm-kpi--orange { background: #FFF3E8; border: 1px solid #F5D8B0; }
.pm-kpi--orange .pm-kpi-label{ color:#CC6600; } .pm-kpi--orange .pm-kpi-val{ color:#A84E00; }

/* Portal dashboard animations — triggered by JS IntersectionObserver */
@keyframes pmPopIn { 0%{opacity:0;transform:translateY(5px)} 100%{opacity:1;transform:translateY(0)} }
.portal-section.anim-on .pm-kpi:nth-child(1) .pm-kpi-val { animation: pmPopIn .4s ease forwards .10s; }
.portal-section.anim-on .pm-kpi:nth-child(2) .pm-kpi-val { animation: pmPopIn .4s ease forwards .25s; }
.portal-section.anim-on .pm-kpi:nth-child(3) .pm-kpi-val { animation: pmPopIn .4s ease forwards .40s; }
.portal-section.anim-on .pm-kpi:nth-child(4) .pm-kpi-val { animation: pmPopIn .4s ease forwards .55s; }

.pm-chart-area-fill { fill: url(#portalChartGrad); opacity: .32; }
.pm-chart-line-path { stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.portal-section.anim-on .pm-chart-line-path { animation: pmDrawLine 2.4s ease forwards .35s; }
@keyframes pmDrawLine { to { stroke-dashoffset: 0; } }

.pm-chart { background: #FFFFFF; border-radius: 8px; margin: 0 12px 12px; padding: 12px 12px 6px; }
.pm-chart-header { color: #888; font-size: 11px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }

/* Widget grid */
.pm-widgets-label { text-align: center; margin: 40px 0 20px; }
.pm-widgets-label span { font-size: 12px; font-weight: 700; color: var(--clr-text-muted); letter-spacing: .08em; text-transform: uppercase; }
.pm-widgets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.pm-widget {
    background: #FFFFFF;
    border: 1px solid #E8EBF0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.pm-widget__head {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 13px;
}
.pm-widget__icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: #E8F8EF; color: #35B878;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.pm-widget__title { font-size: 13px; font-weight: 700; color: var(--clr-text); line-height: 1.2; }

/* Platform list (Widget 1) */
.pm-platlist { display: flex; flex-direction: column; gap: 7px; }
.pm-plat { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--clr-text); }
.pm-plat i { width: 16px; text-align: center; font-size: 13px; }
.pm-plat-dot { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.pm-plat-dot.on  { background: #35B878; }
.pm-plat-dot.off { background: #DDDDDD; }
.pm-plat.muted   { opacity: .5; }

/* Bar chart (Widget 2) */
.pm-barchart { display: flex; align-items: flex-end; gap: 5px; height: 56px; }
.pm-bar-col { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.pm-bar-rev { background: #35B878; border-radius: 3px 3px 0 0; width: 100%; min-height: 2px; }
.pm-bar-day { font-size: 8px; color: #BBBBBB; margin-top: 3px; }

/* Sync widget (Widget 3) */
.pm-sync-rows { display: flex; flex-direction: column; gap: 8px; }
.pm-sync-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--clr-text-muted); }
.pm-sync-row i { color: #35B878; width: 14px; text-align: center; }
.pm-sync-tag { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--clr-text); background: #F0F2F5; padding: 2px 7px; border-radius: 10px; }
.pm-sync-divider { height: 1px; background: #F0F0F0; margin: 2px 0; }

/* Todos (Widget 4) */
.pm-todos { display: flex; flex-direction: column; gap: 7px; }
.pm-todo { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.3; }
.pm-todo i { font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.pm-todo.done { color: var(--clr-text-muted); }
.pm-todo.done i { color: #35B878; }
.pm-todo.pending { color: var(--clr-text); }
.pm-todo.pending i { color: #CCCCCC; }

/* Services (Widget 5) */
.pm-services { display: flex; flex-wrap: wrap; gap: 7px; }
.pm-svc {
    font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 20px;
    display: flex; align-items: center; gap: 5px;
}
.pm-svc.on  { background: #E8F8EF; color: #27A066; border: 1px solid #C2EDD7; }
.pm-svc.off { background: #F5F5F5; color: #AAAAAA; border: 1px solid var(--clr-border); }
.pm-svc-dot { width: 5px; height: 5px; border-radius: 50%; }
.pm-svc.on  .pm-svc-dot { background: #35B878; }
.pm-svc.off .pm-svc-dot { background: #CCCCCC; }

/* Team (Widget 6) */
.pm-team { display: flex; flex-direction: column; gap: 9px; }
.pm-member { display: flex; align-items: center; gap: 10px; }
.pm-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.pm-member-name { font-size: 12px; font-weight: 700; color: var(--clr-text); line-height: 1.2; }
.pm-member-role { font-size: 10px; color: var(--clr-text-muted); }

/* 26. Contact Page */
.contact-main { padding: 80px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-form-wrap { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 40px; }
.contact-form-wrap h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.contact-form-wrap p { font-size: 15px; color: var(--clr-text-muted); margin-bottom: 32px; line-height: 1.6; }

.contact-info { display: flex; flex-direction: column; gap: 24px; }
.info-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 28px; }
.info-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.info-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.info-item:last-child { margin-bottom: 0; }
.info-icon { width: 36px; height: 36px; background: rgba(53,184,120,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--clr-accent); font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.info-item__text { flex: 1; }
.info-item__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-text-dim); margin-bottom: 3px; }
.info-item__val { font-size: 15px; font-weight: 600; color: var(--clr-text); }
.info-item__val a { color: var(--clr-accent); }
.info-item__val a:hover { text-decoration: underline; }

/* Hungary Map */
.map-section { padding: 80px 0; background: var(--clr-surface); border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); }
.map-section__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.map-section__text .label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--clr-accent); margin-bottom: 12px; }
.map-section__text h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }
.map-section__text p { font-size: 15px; color: var(--clr-text-muted); line-height: 1.7; margin-bottom: 24px; }
.coverage-list { display: flex; flex-direction: column; gap: 12px; }
.coverage-item { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--clr-text-muted); }
.coverage-item i { color: var(--clr-accent); width: 16px; }
.map-wrap { position: relative; }
.europe-map { width: 100%; height: auto; display: block; }

/* CTA Section (contact + references) */
.cta-section { padding: 80px 0; background: var(--clr-accent); }
.cta-section__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-section__text h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: #fff; letter-spacing: -0.02em; margin-bottom: 12px; }
.cta-section__text p { font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.6; }

/* 27. References Page */
.featured { padding: 80px 0; }
.featured-grid { display: grid; gap: 32px; }
.featured-card { background: var(--clr-surface); border-radius: var(--radius-lg); border: 1px solid var(--clr-border); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; transition: transform 0.3s, box-shadow 0.3s; }
.featured-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.08); }
.featured-card:nth-child(even) { direction: rtl; }
.featured-card:nth-child(even) > * { direction: ltr; }
.featured-card__image { position: relative; overflow: hidden; min-height: 300px; background: var(--clr-surface-2); }
.featured-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.featured-card:hover .featured-card__image img { transform: scale(1.04); }
.featured-card__image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--clr-surface-2) 0%, var(--clr-accent-light) 100%); min-height: 300px; }
.featured-card__image-placeholder i { font-size: 64px; color: var(--clr-accent); opacity: 0.5; }
.featured-card__body { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.featured-card__cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-accent); }
.featured-card__title { font-size: 24px; font-weight: 800; line-height: 1.2; }
.featured-card__desc { font-size: 15px; color: var(--clr-text-muted); line-height: 1.7; }
.featured-card__quote { padding: 16px; background: rgba(53,184,120,0.06); border-left: 3px solid var(--clr-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.featured-card__quote p { font-size: 14px; color: var(--clr-text-muted); font-style: italic; line-height: 1.6; }
.featured-card__quote strong { display: block; margin-top: 8px; font-size: 13px; color: var(--clr-text); font-style: normal; }
.featured-card__results { display: flex; gap: 24px; flex-wrap: wrap; }
.featured-card__stat { display: flex; flex-direction: column; }
.featured-card__stat-val { font-size: 28px; font-weight: 800; color: var(--clr-accent); line-height: 1; }
.featured-card__stat-label { font-size: 12px; color: var(--clr-text-dim); margin-top: 4px; }
.featured-empty { text-align: center; padding: 64px 32px; background: var(--clr-surface); border-radius: var(--radius-lg); border: 2px dashed var(--clr-border); }
.featured-empty i { font-size: 48px; color: var(--clr-accent-light); display: block; margin-bottom: 16px; }
.featured-empty p { color: var(--clr-text-muted); }

/* Portfolio Gallery */
.portfolio { padding: 80px 0; background: var(--clr-surface); border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-btn { padding: 9px 20px; border-radius: 100px; border: 1.5px solid var(--clr-border); background: transparent; font-family: var(--font-main); font-size: 13px; font-weight: 600; color: var(--clr-text-muted); cursor: pointer; transition: all 0.2s; }
.filter-btn:hover { border-color: var(--clr-accent); color: var(--clr-accent); }
.filter-btn.active { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; }
.masonry-grid { columns: 3; column-gap: 20px; }
.masonry-item { break-inside: avoid; margin-bottom: 20px; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; position: relative; display: block; background: var(--clr-surface-2); }
.masonry-item img { width: 100%; display: block; transition: transform 0.3s; }
.masonry-item:hover img { transform: scale(1.04); }
.masonry-item__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s; display: flex; align-items: flex-end; padding: 20px; }
.masonry-item:hover .masonry-item__overlay { opacity: 1; }
.masonry-item__info { color: #fff; }
.masonry-item__info .cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-accent-light); margin-bottom: 4px; }
.masonry-item__info .title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.masonry-item__placeholder { padding-bottom: 75%; background: linear-gradient(135deg, var(--clr-surface-2) 0%, var(--clr-accent-light) 100%); position: relative; }
.masonry-item__placeholder i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--clr-accent); opacity: 0.4; }
.portfolio-empty { text-align: center; padding: 64px 32px; }
.portfolio-empty i { font-size: 48px; color: var(--clr-accent-light); display: block; margin-bottom: 16px; }
.portfolio-empty p { color: var(--clr-text-muted); }

/* Lightbox */
.lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox__inner { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; }
.lightbox__img-wrap { position: relative; }
.lightbox__img { max-width: 90vw; max-height: 80vh; border-radius: var(--radius-md); display: block; object-fit: contain; }
.lightbox__caption { margin-top: 16px; text-align: center; }
.lightbox__caption .cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-accent); }
.lightbox__caption .title { font-size: 16px; font-weight: 700; color: #fff; margin-top: 4px; }
.lightbox__caption .desc { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.lightbox__close { position: fixed; top: 20px; right: 24px; font-size: 28px; color: rgba(255,255,255,0.7); cursor: pointer; transition: color 0.2s; z-index: 10; line-height: 1; }
.lightbox__close:hover { color: #fff; }
.lightbox__arrow { position: fixed; top: 50%; transform: translateY(-50%); font-size: 24px; color: rgba(255,255,255,0.6); cursor: pointer; transition: color 0.2s; z-index: 10; background: rgba(0,0,0,0.3); border: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lightbox__arrow:hover { color: #fff; background: rgba(0,0,0,0.6); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }

/* Social CTA */
.social-cta { padding: 80px 0; }
.social-cta__inner { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 64px; text-align: center; }
.social-cta .label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--clr-accent); margin-bottom: 16px; }
.social-cta h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.social-cta p { font-size: 16px; color: var(--clr-text-muted); margin-bottom: 32px; max-width: 480px; margin-left: auto; margin-right: auto; }
.social-icons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.social-icon-link { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1.5px solid var(--clr-border); border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--clr-text); transition: all 0.2s; }
.social-icon-link i { font-size: 18px; }
.social-icon-link:hover { border-color: var(--clr-accent); color: var(--clr-accent); background: rgba(53,184,120,0.04); transform: translateY(-2px); }
.social-icon-link.hidden { display: none; }

/* 28. Careers Page */
.positions { padding: 80px 0; }
.positions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; }
.position-card { background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: var(--radius-lg); padding: 28px; cursor: pointer; transition: all 0.2s; }
.position-card:hover { border-color: var(--clr-accent); box-shadow: 0 4px 20px rgba(53,184,120,0.1); transform: translateY(-2px); }
.position-card.selected { border-color: var(--clr-accent); background: rgba(53,184,120,0.04); }
.position-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.position-card__icon { width: 44px; height: 44px; background: rgba(53,184,120,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--clr-accent); font-size: 18px; flex-shrink: 0; }
.position-card__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-type { background: rgba(53,184,120,0.1); color: var(--clr-accent); }
.badge-loc { background: var(--clr-surface-2); color: var(--clr-text-muted); }
.position-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.position-card p { font-size: 14px; color: var(--clr-text-muted); line-height: 1.6; }
.position-card__footer { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--clr-accent); display: flex; align-items: center; gap: 6px; }

.spontaneous { background: var(--clr-surface); border: 2px dashed var(--clr-border); border-radius: var(--radius-lg); padding: 32px; text-align: center; }
.spontaneous i { font-size: 32px; color: var(--clr-accent-light); margin-bottom: 12px; display: block; }
.spontaneous h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.spontaneous p { font-size: 14px; color: var(--clr-text-muted); margin-bottom: 20px; line-height: 1.6; }

.application { padding: 80px 0; background: var(--clr-surface); border-top: 1px solid var(--clr-border); }
.application__inner { max-width: 760px; margin: 0 auto; }
.application__inner .section-header { text-align: center; }

/* Why Us (careers) */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 28px; }
.why-card i { font-size: 24px; color: var(--clr-accent); margin-bottom: 16px; display: block; }
.why-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.why-card p { font-size: 14px; color: var(--clr-text-muted); line-height: 1.6; }

/* 29. Legal Pages */
.legal-page { max-width: 800px; margin: 0 auto; padding: 120px 24px 80px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--clr-accent); margin-bottom: 32px; transition: opacity 0.2s; }
.back-link:hover { opacity: 0.7; }

#legal-content { color: var(--clr-text-muted); }
#legal-content h1 { font-size: 36px; font-weight: 800; color: var(--clr-text); margin-bottom: 24px; line-height: 1.2; }
#legal-content h2 { font-size: 22px; font-weight: 700; color: var(--clr-text); margin-top: 40px; margin-bottom: 16px; }
#legal-content h3 { font-size: 18px; font-weight: 600; color: var(--clr-text); margin-top: 28px; margin-bottom: 12px; }
#legal-content p { margin-bottom: 16px; line-height: 1.7; }
#legal-content ul, #legal-content ol { margin-bottom: 16px; padding-left: 24px; }
#legal-content li { margin-bottom: 8px; line-height: 1.6; }
#legal-content strong { color: var(--clr-text); }
#legal-content a { color: var(--clr-accent); text-decoration: underline; }
#legal-content a:hover { color: var(--clr-accent-dim); }
#legal-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
#legal-content th, #legal-content td { padding: 10px 14px; text-align: left; border: 1px solid var(--clr-border); font-size: 14px; }
#legal-content th { background: var(--clr-surface); color: var(--clr-text); font-weight: 700; }

.placeholder-text { text-align: center; padding: 60px 0; color: var(--clr-text-dim); font-size: 15px; }
.placeholder-text i { display: block; font-size: 32px; margin-bottom: 16px; color: var(--clr-border); }

/* 30. Footer */

/* Footer — Group A (index, marketing-rendszer-epites, marketing-strategia) */
.footer { background: var(--clr-surface); border-top: 1px solid var(--clr-border); padding: 72px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; }
.footer__logo { margin-bottom: 14px; }
.footer__logo img { height: 150px; }
.footer__desc { font-size: 14px; color: var(--clr-text-dim); line-height: 1.6; margin-bottom: 20px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #DDDDDD; display: none; align-items: center; justify-content: center; color: var(--clr-text-muted); font-size: 14px; transition: all 0.2s; }
.footer__social a.visible { display: flex; }
.footer__social a:hover { color: var(--clr-accent); border-color: var(--clr-accent); }
.footer__social a.hidden { display: none; }
.footer h4 { font-family: var(--font-main); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-text); margin-bottom: 18px; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 10px; }
.footer li a { font-size: 14px; color: var(--clr-text-dim); transition: color 0.2s; }
.footer li a:hover { color: var(--clr-accent); }
.footer__contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer__contact i { color: var(--clr-accent); margin-top: 2px; font-size: 13px; flex-shrink: 0; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--clr-border); font-size: 13px; color: var(--clr-text-dim); flex-wrap: wrap; gap: 8px; }
.footer__bottom a { color: var(--clr-text-dim); transition: color 0.2s; }
.footer__bottom a:hover { color: var(--clr-accent); }
.footer__bottom p { font-size: 13px; color: var(--clr-text-dim); }
.footer__credit { opacity: 0.72; font-size: 0.85rem; }
.footer__credit a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); transition: border-color 0.2s, opacity 0.2s; }
.footer__credit a:hover { border-bottom-color: var(--clr-accent); opacity: 1; }

/* Footer — Group B (referenciak, kapcsolat, jelentkezes) */
.footer__brand img { height: 72px; margin-bottom: 16px; }
.footer__brand p { font-size: 14px; color: var(--clr-text-muted); line-height: 1.7; max-width: 260px; }
.footer__col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-text); margin-bottom: 16px; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__col ul li a { font-size: 14px; color: var(--clr-text-muted); transition: color 0.2s; }
.footer__col ul li a:hover { color: var(--clr-accent); }
.footer__powered { font-size: 12px; color: var(--clr-text-dim); }

/* Footer — Legal pages */
.footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer span { font-size: 13px; color: var(--clr-text-dim); }
.footer a { font-size: 13px; color: var(--clr-text-muted); transition: color 0.2s; }
.footer a:hover { color: var(--clr-accent); }
.footer__links { display: flex; gap: 16px; flex-wrap: wrap; }

/* Footer portal button (safe version with !important) */
.footer__portal {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; border-radius: 50px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    color: #fff !important; text-decoration: none;
    background: linear-gradient(135deg, var(--clr-accent), #2DD4A0, var(--clr-accent));
    background-size: 200% 200%;
    animation: portalShimmer 3s ease infinite;
    transition: transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 2px 12px rgba(53,184,120,0.25);
}
.footer__portal:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(53,184,120,0.4);
    color: #fff !important;
}
.footer__portal i { font-size: 14px; }
@keyframes portalShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 31. Mobile Nav Overlay */

/* Group A: header__nav.active (index, marketing-rendszer-epites, marketing-strategia) */
/* Handled within responsive section below */

/* Group B: mobile-nav.open (referenciak, kapcsolat, jelentkezes) */
.mobile-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--clr-surface); padding: 24px; flex-direction: column; }
.mobile-nav.open { display: flex; }
.mobile-nav__close { align-self: flex-end; font-size: 24px; cursor: pointer; color: var(--clr-text-muted); margin-bottom: 32px; }
.mobile-nav__links { display: flex; flex-direction: column; gap: 24px; }
.mobile-nav__links a { font-size: 20px; font-weight: 700; color: var(--clr-text); border-bottom: 1px solid var(--clr-border); padding-bottom: 20px; }
.mobile-nav__cta { display: block; margin-top: 32px; padding: 16px; background: var(--clr-accent); color: #fff; text-align: center; font-weight: 700; border-radius: var(--radius-md); font-size: 15px; }

/* 32. Mobile Sticky CTA */
.mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; background: var(--clr-accent); padding: 14px 24px; text-align: center; }
.mobile-cta a { color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

/* 33. Scroll Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* 34. Responsive */

@media (max-width: 1024px) {
    .process__steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .process__steps::before { display: none; }
    .why__grid { grid-template-columns: 1fr; }
    .deliverable__inner { grid-template-columns: 1fr; }
    .method__grid { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .problems__inner { grid-template-columns: 1fr; }
    .problems__visual { display: none; }
    .featured-card { grid-template-columns: 1fr; }
    .featured-card:nth-child(even) { direction: ltr; }
    .featured-card__image { min-height: 240px; }
    .masonry-grid { columns: 2; }
    .contact-grid { grid-template-columns: 1fr; }
    .map-section__inner { grid-template-columns: 1fr; }
    .cta-section__inner { flex-direction: column; text-align: center; }
    .hero__inner { grid-template-columns: 1fr; }
    .positions-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .portal-features-row { grid-template-columns: 1fr 1fr; }
    .pm-widgets-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    /* Group A mobile nav */
    .header__nav { display: none; position: fixed; top: 84px; left: 0; right: 0; background: rgba(244,244,244,0.98); flex-direction: column; padding: 24px; gap: 16px; border-bottom: 1px solid var(--clr-border); }
    .header__nav.active { display: flex; }
    .hamburger { display: flex; margin-left: auto; padding: 4px 0; }
    .header__right { gap: 0; }
    .header__cta { display: none; }
    .mobile-cta { display: block; }
    .problems__grid { grid-template-columns: 1fr; }
    .process__steps { grid-template-columns: 1fr; }
    .forwhom__grid { grid-template-columns: 1fr; }
    .konsult__inner { grid-template-columns: 1fr; gap: 40px; }
    .form-row { grid-template-columns: 1fr; }
    .featured-ref__card { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .footer__bottom { flex-direction: column; text-align: center; }
    body { padding-bottom: 52px; }
    .phase { grid-template-columns: 1fr; gap: 8px; }
    .phase__num { font-size: 48px; text-align: left; }
    .compare__head, .compare__row { grid-template-columns: 1fr; }
    .compare__head-cell:first-child, .compare__cell.label { display: none; }
    .why__grid { grid-template-columns: 1fr; }
    .steps__grid { grid-template-columns: 1fr; }
    .steps__grid::before { display: none; }
}

@media (max-width: 640px) {
    .header__nav, .header__cta { display: none; }
    .hamburger { display: flex; }
    .hero { padding: 120px 0 60px; }
    .page-hero { padding: 120px 0 60px; }
    .masonry-grid { columns: 1; }
    .social-cta__inner { padding: 40px 24px; }
    .featured-card__body { padding: 24px; }
    .contact-form-wrap { padding: 24px; }
    .why-grid { grid-template-columns: 1fr; }
    .form-card { padding: 24px; }
    .cvs-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .portal-features-row { grid-template-columns: 1fr 1fr; gap: 12px; }
    .pm-kpis { grid-template-columns: 1fr 1fr; }
    .pm-months, .pm-client-tag { display: none; }
    .pm-widgets-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .hero__title { font-size: 34px; }
    .hero__actions { flex-direction: column; align-items: center; }
}

@media (max-width: 600px) {
    .footer .container { flex-direction: column; text-align: center; }
    .footer__links { justify-content: center; }
}