/* ===========================
   GLITCH STUDIO — MAIN CSS
   =========================== */

/* --- Variables --- */
:root {
    --bg:        #080c10;
    --bg-dark:   #05080b;
    --bg-card:   rgba(8,12,16,0.7);
    --fg:        #e0e0e0;
    --cy-yellow: #cbc63b;
    --cy-pink:   #d1264c;
    --cy-cyan:   #459ac7;
    --cy-purple: #cd2abf;
    --muted:     #1a202c;
    --muted-fg:  #8892b0;
    --border:    rgba(203,198,59,0.2);
    --font-sans: 'Space Grotesk', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
    --font-disp: 'Orbitron', sans-serif;
    --radius:    0;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    overflow-x: hidden;
    position: relative;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-disp);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; background: none; border: none; font-family: inherit; }
::selection { background: var(--cy-cyan); color: var(--bg); }

/* --- Utility --- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-disp); }
.label-mono {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cy-cyan);
}
.neon-yellow { color: var(--cy-yellow); text-shadow: 0 0 8px rgba(203,198,59,0.6); }
.neon-pink   { color: var(--cy-pink);   text-shadow: 0 0 8px rgba(209,38,76,0.6); }
.neon-cyan   { color: var(--cy-cyan);   text-shadow: 0 0 8px rgba(69,154,199,0.6); }
.neon-purple { color: var(--cy-purple); text-shadow: 0 0 8px rgba(205,42,191,0.6); }

.neon-border-yellow { border: 1px solid var(--cy-yellow); box-shadow: 0 0 10px rgba(203,198,59,0.3), inset 0 0 10px rgba(203,198,59,0.1); }
.neon-border-cyan   { border: 1px solid var(--cy-cyan);   box-shadow: 0 0 10px rgba(69,154,199,0.3), inset 0 0 10px rgba(69,154,199,0.1); }

/* Scroll-in animation */
.fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }
.fade-in-left  { opacity: 0; transform: translateX(-30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in-left.visible { opacity: 1; transform: translateX(0); }
.fade-in-right { opacity: 0; transform: translateX(30px);  transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in-right.visible { opacity: 1; transform: translateX(0); }

/* Delay helpers */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 2rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--cy-yellow);
    box-shadow: 0 0 20px rgba(203,198,59,0.4);
    transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
    border: none;
}
.btn-primary:hover { background: #e8e36e; box-shadow: 0 0 30px rgba(203,198,59,0.8); color: var(--bg); transform: translateY(-1px); }

.btn-cyan {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 2rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--cy-cyan);
    box-shadow: 0 0 20px rgba(69,154,199,0.4);
    transition: background 0.3s, box-shadow 0.3s;
}
.btn-cyan:hover { background: #fff; box-shadow: 0 0 30px rgba(255,255,255,0.6); color: var(--bg); }

.btn-outline-cyan {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 2rem;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    background: var(--bg);
    border: 1px solid var(--cy-cyan);
    box-shadow: 0 0 15px rgba(69,154,199,0.2);
    transition: background 0.3s, color 0.3s;
}
.btn-outline-cyan::before,
.btn-outline-cyan::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--cy-cyan);
}
.btn-outline-cyan::before { top: -4px; left: -4px; }
.btn-outline-cyan::after  { bottom: -4px; right: -4px; }
.btn-outline-cyan:hover { background: rgba(69,154,199,0.1); }

/* Corner decorators */
.corner-tl::before,
.corner-br::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-style: solid;
    border-color: var(--cy-yellow);
}
.corner-tl::before { top: -8px; left: -8px; border-width: 2px 0 0 2px; }
.corner-br::after  { bottom: -8px; right: -8px; border-width: 0 2px 2px 0; }

/* Glitch Text */
.glitch-text {
    position: relative;
    display: inline-block;
}
.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0.8;
}
.glitch-text::before {
    left: 2px;
    text-shadow: -2px 0 red;
    animation: glitch-a 5s infinite linear alternate-reverse;
}
.glitch-text::after {
    left: -2px;
    text-shadow: -2px 0 cyan;
    animation: glitch-b 5s infinite linear alternate-reverse;
}

@keyframes glitch-a {
    0%   { clip-path: inset(13% 0 74% 0); }
    10%  { clip-path: inset(6% 0 90% 0); }
    20%  { clip-path: inset(45% 0 50% 0); }
    30%  { clip-path: inset(60% 0 30% 0); }
    40%  { clip-path: inset(78% 0 10% 0); }
    50%  { clip-path: inset(2% 0 85% 0); }
    60%  { clip-path: inset(14% 0 72% 0); }
    70%  { clip-path: inset(38% 0 55% 0); }
    80%  { clip-path: inset(2% 0 78% 0); }
    90%  { clip-path: inset(96% 0 2% 0); }
    100% { clip-path: inset(42% 0 50% 0); }
}
@keyframes glitch-b {
    0%   { clip-path: inset(23% 0 60% 0); }
    10%  { clip-path: inset(66% 0 25% 0); }
    20%  { clip-path: inset(26% 0 54% 0); }
    30%  { clip-path: inset(10% 0 78% 0); }
    40%  { clip-path: inset(48% 0 40% 0); }
    50%  { clip-path: inset(82% 0 10% 0); }
    60%  { clip-path: inset(64% 0 24% 0); }
    70%  { clip-path: inset(78% 0 8% 0); }
    80%  { clip-path: inset(12% 0 62% 0); }
    90%  { clip-path: inset(56% 0 30% 0); }
    100% { clip-path: inset(12% 0 60% 0); }
}

/* ===========================
   NAVBAR
   =========================== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.navbar-top {
    background: rgba(8,12,16,0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    gap: 1rem;
}
.navbar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    text-decoration: none;
}
.navbar-logo-icon {
    width: 24px;
    height: 24px;
    border: 2px solid var(--cy-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.navbar-logo-dot {
    width: 8px;
    height: 8px;
    background: var(--cy-pink);
}
.navbar-logo-text {
    font-family: var(--font-disp);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: #fff;
    text-transform: uppercase;
}
.navbar-nav {
    display: none;
    flex: 1;
    justify-content: center;
    gap: 0.25rem;
    list-style: none;
    overflow-x: auto;
    padding: 0 1rem;
}
@media (min-width: 1024px) { .navbar-nav { display: flex; } }

.navbar-nav a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s;
    white-space: nowrap;
    text-decoration: none;
}
.navbar-nav a:hover { color: #fff; }
.navbar-nav a.active { color: var(--cy-yellow); border-bottom: 2px solid var(--cy-yellow); text-shadow: 0 0 8px rgba(203,198,59,0.6); }
.navbar-nav-num { font-size: 0.625rem; color: var(--cy-cyan); opacity: 0.7; }

.navbar-cta {
    position: relative;
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    flex-shrink: 0;
    border: 1px solid var(--cy-yellow);
    box-shadow: 0 0 10px rgba(203,198,59,0.3), inset 0 0 10px rgba(203,198,59,0.1);
    background: var(--bg);
    transition: background 0.3s;
    display: flex; align-items: center; gap: 0.5rem;
}
.navbar-cta:hover { background: rgba(203,198,59,0.1); }
.navbar-cta-arrow { color: var(--cy-yellow); }

/* Mobile hamburger */
.navbar-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    flex-shrink: 0;
}
@media (min-width: 1024px) { .navbar-hamburger { display: none; } }
.navbar-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--cy-yellow);
    transition: transform 0.3s, opacity 0.3s;
}
.navbar-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-hamburger.open span:nth-child(2) { opacity: 0; }
.navbar-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.navbar-mobile {
    display: none;
    background: rgba(8,12,16,0.97);
    border-bottom: 1px solid var(--border);
    padding: 1rem;
}
.navbar-mobile.open { display: block; }
.navbar-mobile ul { list-style: none; }
.navbar-mobile ul li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s;
    text-decoration: none;
}
.navbar-mobile ul li a:hover { color: #fff; }

/* Ticker strip */
.navbar-ticker {
    background: var(--muted);
    border-bottom: 1px solid rgba(209,38,76,0.3);
    overflow: hidden;
    white-space: nowrap;
    padding: 2px 0;
}
.navbar-ticker-inner {
    display: inline-block;
    color: rgba(209,38,76,0.5);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    animation: ticker 20s linear infinite;
}
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ===========================
   HERO
   =========================== */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--bg);
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
.hero-slide.active { opacity: 1; pointer-events: auto; }

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
    mix-blend-mode: luminosity;
    opacity: 0.3;
    transition: background-image 0s;
}
.hero-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, var(--bg), rgba(8,12,16,0.8), transparent);
}

/* Cyber grid in hero */
.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
    mix-blend-mode: screen;
    opacity: 0.7;
}
.hero-perspective-grid {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(69,154,199,0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69,154,199,0.3) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);
    transform-origin: top center;
}
.hero-matrix {
    position: absolute;
    top: 0;
    right: 25%;
    width: 8rem;
    height: 200%;
    display: flex;
    align-items: center;
    opacity: 0.3;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--cy-cyan);
    writing-mode: vertical-rl;
    animation: matrix-scroll 40s linear infinite;
    white-space: nowrap;
    line-height: 3rem;
}
.hero-matrix-2 {
    position: absolute;
    top: 0;
    left: 25%;
    width: 8rem;
    height: 200%;
    display: flex;
    align-items: center;
    opacity: 0.1;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--cy-pink);
    writing-mode: vertical-rl;
    animation: matrix-scroll-rev 50s linear infinite;
    white-space: nowrap;
    line-height: 3rem;
}
@keyframes matrix-scroll     { 0% { transform: translateY(0); }    100% { transform: translateY(-50%); } }
@keyframes matrix-scroll-rev { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }

/* Hero content */
.hero-content {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem 6rem;
}
.hero-inner {
    max-width: 1280px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .hero-inner { grid-template-columns: 7fr 5fr; gap: 4rem; }
}

.hero-subtitle {
    font-family: var(--font-mono);
    color: var(--cy-cyan);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    border-left: 2px solid var(--cy-cyan);
    padding-left: 0.75rem;
    margin-bottom: 1rem;
    display: inline-block;
}
.hero-title {
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 900;
    line-height: 0.9;
    color: #fff;
    font-family: var(--font-disp);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.hero-title-highlight {
    background: linear-gradient(to right, var(--cy-yellow), var(--cy-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

/* Reference card */
.hero-card-wrap {
    position: relative;
    padding: 4px;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
}
@media (min-width: 1024px) { .hero-card-wrap { max-width: none; } }
.hero-card-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, var(--cy-yellow), var(--cy-pink));
    opacity: 0.2;
    filter: blur(24px);
    transition: opacity 0.5s;
}
.hero-card-wrap:hover .hero-card-glow { opacity: 0.4; }
.hero-card {
    background: rgba(8,12,16,0.8);
    backdrop-filter: blur(24px);
    border: 1px solid #374151;
    padding: 1.25rem;
    transition: border-color 0.5s;
}
.hero-card-wrap:hover .hero-card { border-color: var(--cy-yellow); }
.hero-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1f2937;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}
.hero-card-live {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--cy-cyan);
    letter-spacing: 0.2em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hero-card-live-dot {
    width: 6px;
    height: 6px;
    background: var(--cy-cyan);
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.hero-card-img {
    position: relative;
    aspect-ratio: 16/9;
    margin-bottom: 1.25rem;
    overflow: hidden;
    border: 1px solid #1f2937;
}
.hero-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.7s, opacity 0.7s, transform 0.7s;
}
.hero-card-wrap:hover .hero-card-img img {
    filter: none;
    opacity: 1;
    transform: scale(1.05);
}
.hero-card-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--cy-pink);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    box-shadow: 0 0 10px rgba(209,38,76,0.6);
    z-index: 10;
}
.hero-card-details {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.hero-card-client {
    font-family: var(--font-disp);
    font-size: 1.25rem;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
.hero-card-cat {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #9ca3af;
}
.hero-card-btn {
    width: 40px;
    height: 40px;
    background: var(--muted);
    border: 1px solid #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.3s, color 0.3s;
    flex-shrink: 0;
}
.hero-card-wrap:hover .hero-card-btn { background: var(--cy-yellow); color: var(--bg); }
.hero-card-corner-tl {
    position: absolute;
    top: -8px; left: -8px;
    width: 16px; height: 16px;
    border-top: 2px solid var(--cy-yellow);
    border-left: 2px solid var(--cy-yellow);
    z-index: 20;
}
.hero-card-corner-br {
    position: absolute;
    bottom: -8px; right: -8px;
    width: 16px; height: 16px;
    border-bottom: 2px solid var(--cy-yellow);
    border-right: 2px solid var(--cy-yellow);
    z-index: 20;
}

/* Hero controls */
.hero-controls {
    position: absolute;
    bottom: 2rem;
    right: 1.5rem;
    z-index: 30;
    display: flex;
    gap: 1rem;
}
@media (min-width: 768px) { .hero-controls { right: 4rem; } }
.hero-btn {
    padding: 0.75rem;
    border: 1px solid #4b5563;
    background: rgba(0,0,0,0.5);
    color: #fff;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s, color 0.3s;
}
.hero-btn:hover { border-color: var(--cy-yellow); color: var(--cy-yellow); }
.hero-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Hero indicators */
.hero-indicators {
    position: absolute;
    bottom: 2rem;
    left: 1.5rem;
    z-index: 30;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
@media (min-width: 768px) { .hero-indicators { left: 4rem; } }
.hero-dot {
    height: 4px;
    background: #374151;
    width: 16px;
    transition: width 0.5s, background 0.5s, box-shadow 0.5s;
}
.hero-dot.active { width: 48px; background: var(--cy-yellow); box-shadow: 0 0 8px var(--cy-yellow); }

/* ===========================
   TRUST PILLARS
   =========================== */
.trust-pillars {
    padding: 4rem 1rem;
    background: var(--bg-dark);
    border-bottom: 1px solid #1f2937;
    position: relative;
    z-index: 10;
}
.trust-pillars-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 3rem;
}
@media (min-width: 768px) { .trust-pillars-grid { grid-template-columns: repeat(4,1fr); } }

.pillar { text-align: center; }
.pillar-value {
    font-family: var(--font-disp);
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 900;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: transform 0.3s;
}
.pillar:hover .pillar-value { transform: scale(1.1); }
.pillar-bracket { color: rgba(55,65,81,0.5); font-family: var(--font-mono); font-weight: 300; font-size: 0.7em; }
.pillar-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: color 0.3s;
}
.pillar:hover .pillar-label { color: #fff; }
.pillar-line {
    width: 2rem;
    height: 4px;
    margin: 1rem auto 0;
    opacity: 0.5;
    transition: width 0.3s;
}
.pillar:hover .pillar-line { width: 4rem; }

/* ===========================
   MARQUEE
   =========================== */
.marquee {
    padding: 3rem 0;
    border-bottom: 1px solid #1f2937;
    background: var(--bg);
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.marquee-label {
    text-align: center;
    margin-bottom: 2rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    color: #6b7280;
    text-transform: uppercase;
}
.marquee-track {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
}
.marquee-inner {
    display: flex;
    align-items: center;
    gap: 4rem;
    animation: marquee-scroll 30s linear infinite;
    padding-right: 4rem;
    flex-shrink: 0;
}
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-item {
    font-family: var(--font-disp);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #4b5563;
    opacity: 0.4;
    transition: color 0.3s, opacity 0.3s;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 4rem;
}
.marquee-item:hover { color: var(--cy-yellow); opacity: 1; }
.marquee-sep {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    color: rgba(209,38,76,0.5);
    transition: color 0.3s, text-shadow 0.3s;
}
.marquee-item:hover .marquee-sep,
.marquee-sep.sep-active {
    color: var(--cy-yellow);
    text-shadow: 0 0 8px rgba(203,198,59,0.6);
}

/* ===========================
   MANIFESTO (ABOUT)
   =========================== */
.manifesto {
    padding: 6rem 1rem;
    background: var(--bg);
    position: relative;
    z-index: 10;
}
.manifesto-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}
@media (min-width: 1024px) { .manifesto-inner { grid-template-columns: 1fr 1fr; } }

.manifesto-img-wrap {
    position: relative;
    aspect-ratio: 3/4;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    border: 1px solid #1f2937;
    group: true;
}
@media (min-width: 1024px) { .manifesto-img-wrap { max-width: none; } }
.manifesto-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.7s, transform 0.7s;
}
.manifesto-img-wrap:hover img { filter: none; transform: scale(1.05); }
.manifesto-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s;
}
.manifesto-img-wrap:hover .manifesto-img-overlay { opacity: 1; }
.manifesto-img-overlay span {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    color: var(--cy-cyan);
    text-shadow: 0 0 8px rgba(69,154,199,0.6);
    font-weight: 700;
}
.manifesto-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--cy-cyan);
    border-style: solid;
    z-index: 10;
}
.manifesto-corner-tl { top: 16px; left: 16px; border-width: 2px 0 0 2px; }
.manifesto-corner-br { bottom: 16px; right: 16px; border-width: 0 2px 2px 0; }

.manifesto-content { font-family: var(--font-sans); }
.manifesto-desc { font-size: 1.0625rem; line-height: 1.7; color: #9ca3af; margin-bottom: 2.5rem; max-width: 38rem; }
.manifesto-label { color: var(--cy-pink); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.5rem; }
.manifesto-title {
    font-size: clamp(2rem, 4vw, 3.75rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 3rem;
    font-family: var(--font-disp);
    text-transform: uppercase;
}
.manifesto-points { display: flex; flex-direction: column; gap: 2.5rem; }
.manifesto-point { position: relative; padding-left: 3rem; }
.manifesto-point-num {
    position: absolute;
    left: 0; top: 0.25rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.875rem;
}
.manifesto-point p { font-size: 1.125rem; line-height: 1.6; color: #d1d5db; font-family: var(--font-sans); }

/* ===========================
   SERVICES
   =========================== */
.services {
    padding: 6rem 1rem;
    background: var(--bg);
    position: relative;
    z-index: 10;
}
.services-header {
    max-width: 1280px;
    margin: 0 auto 4rem;
    text-align: center;
}
.services-header-label {
    display: inline-block;
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cy-cyan);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid rgba(69,154,199,0.3);
    padding: 0.25rem 0.5rem;
    margin-bottom: 1rem;
}
.services-header-label::before {
    content: "XX";
    position: absolute;
    top: -8px; left: -4px;
    font-size: 0.5rem;
    color: var(--cy-yellow);
}
.services-title { font-size: clamp(1.75rem, 4vw, 3rem); color: #fff; margin-bottom: 1rem; }
.services-desc { font-family: var(--font-mono); color: #9ca3af; font-size: 0.875rem; }

.services-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px)  { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(4,1fr); } }

.service-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid #1f2937;
    padding: 1.5rem;
    transition: border-color 0.3s;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}
.service-card:hover { border-color: #4b5563; }
.service-card-bar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    transition: width 0.3s;
}
.service-card:hover .service-card-bar { width: 8px; }
.service-badge-ai {
    position: absolute;
    top: 1rem; right: 1rem;
    background: #d4183d;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    letter-spacing: 0.1em;
    box-shadow: 0 0 8px rgba(212,24,61,0.6);
    z-index: 10;
}
.service-badge-num {
    position: absolute;
    top: 1rem; right: 1rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: #4b5563;
    transition: color 0.3s;
}
.service-card:hover .service-badge-num { color: #fff; }
.service-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 1.5rem;
    margin-left: 0.5rem;
    opacity: 0.8;
    transition: opacity 0.3s, transform 0.3s;
}
.service-card:hover .service-icon { opacity: 1; transform: scale(1.1); }
.service-name {
    font-family: var(--font-disp);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    padding-left: 0.5rem;
}
.service-desc {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: auto;
    line-height: 1.6;
    padding-left: 0.5rem;
}
.services-cta { margin-top: 4rem; text-align: center; }

/* ===========================
   PORTFOLIO
   =========================== */
.portfolio {
    padding: 6rem 1rem;
    background: var(--bg-dark);
    position: relative;
    z-index: 10;
}
.portfolio-header {
    max-width: 1280px;
    margin: 0 auto 3rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}
.portfolio-header-left .label-mono { color: var(--cy-pink); margin-bottom: 0.5rem; }
.portfolio-header-title { font-size: clamp(1.75rem, 4vw, 3rem); color: #fff; }
.portfolio-header-link {
    display: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cy-yellow);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-bottom: 1px solid var(--cy-yellow);
    padding-bottom: 0.25rem;
    transition: color 0.3s, border-color 0.3s;
    cursor: pointer;
}
@media (min-width: 768px) { .portfolio-header-link { display: block; } }
.portfolio-header-link:hover { color: #fff; border-color: #fff; }

.portfolio-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .portfolio-grid { grid-template-columns: repeat(3,1fr); } }

.portfolio-item {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: #000;
    border: 1px solid #1f2937;
    cursor: pointer;
}
.portfolio-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.5;
    transition: filter 0.7s, opacity 0.7s, transform 0.7s;
}
.portfolio-item:hover img { filter: none; opacity: 0.8; transform: scale(1.1); }
.portfolio-item-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    width: 0;
    z-index: 20;
    transition: width 0.5s;
}
.portfolio-item:hover .portfolio-item-accent { width: 100%; }
.portfolio-item-panel {
    position: absolute;
    inset-x: 0;
    bottom: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, var(--bg), rgba(8,12,16,0.9), transparent);
    transform: translateY(8px);
    transition: transform 0.5s;
}
.portfolio-item:hover .portfolio-item-panel { transform: translateY(0); }
.portfolio-item-type {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border: 1px solid #4b5563;
    padding: 0.125rem 0.375rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.portfolio-item-cat {
    font-family: var(--font-disp);
    font-size: 1.25rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.portfolio-item-result {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.5s 0.1s;
    margin-top: 0.5rem;
}
.portfolio-item:hover .portfolio-item-result { opacity: 1; }
.portfolio-item-result-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
}
.portfolio-item-result-value {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 700;
}
/* crosshairs */
.portfolio-item-crosshair {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.7s 0.2s;
}
.portfolio-item:hover .portfolio-item-crosshair { opacity: 1; }
.portfolio-item-crosshair span {
    position: absolute;
    background: rgba(255,255,255,0.3);
}
.portfolio-item-crosshair .ch-l { top: 50%; left: 0; width: 16px; height: 1px; }
.portfolio-item-crosshair .ch-r { top: 50%; right: 0; width: 16px; height: 1px; }
.portfolio-item-crosshair .ch-t { left: 50%; top: 0; width: 1px; height: 16px; }
.portfolio-item-crosshair .ch-b { left: 50%; bottom: 0; width: 1px; height: 16px; }

.portfolio-mobile-cta { display: flex; justify-content: center; margin-top: 2rem; }
@media (min-width: 768px) { .portfolio-mobile-cta { display: none; } }

/* ===========================
   PROCESS
   =========================== */
.process {
    padding: 6rem 1rem;
    background: var(--bg);
    position: relative;
    z-index: 10;
    overflow: hidden;
}
.process-header { text-align: center; margin-bottom: 5rem; }
.process-header .label-mono { color: var(--cy-pink); margin-bottom: 1rem; }
.process-title { font-size: clamp(1.75rem, 4vw, 3rem); color: #fff; font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; }
.process-inner {
    max-width: 56rem;
    margin: 0 auto;
    position: relative;
}
.process-line {
    display: none;
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 1px;
    background: #1f2937;
    transform: translateX(-50%);
}
@media (min-width: 768px) { .process-line { display: block; } }
.process-steps { display: flex; flex-direction: column; gap: 4rem; }
@media (min-width: 768px) { .process-steps { gap: 6rem; } }

.process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
@media (min-width: 768px) { .process-step { flex-direction: row; gap: 4rem; } }
.process-step.even { }
@media (min-width: 768px) { .process-step.even { flex-direction: row-reverse; } }

.process-step-content {
    flex: 1;
    text-align: left;
}
@media (min-width: 768px) { .process-step.even .process-step-content { text-align: right; } }
.process-step-id {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    opacity: 0.3;
    margin-bottom: 0.5rem;
    letter-spacing: 0.2em;
}
.process-step-title {
    font-family: var(--font-disp);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.process-step-desc { font-size: 0.9375rem; color: #9ca3af; line-height: 1.6; font-family: var(--font-sans); }
.process-step-node {
    display: none;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-dark);
    border: 2px solid;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) { .process-step-node { display: flex; } }
.process-step-node svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.process-step-node::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid currentColor;
    animation: process-ping 2s cubic-bezier(0,0,0.2,1) infinite;
    opacity: 0;
}
@keyframes process-ping {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(2);   opacity: 0; }
}
/* Ikon maga is lélegzik */
.process-step-node svg,
.process-step-mobile-node svg {
    animation: process-breathe 3s ease-in-out infinite;
}
@keyframes process-breathe {
    0%,100% { opacity: 0.7; filter: drop-shadow(0 0 0px currentColor); }
    50%      { opacity: 1;   filter: drop-shadow(0 0 6px currentColor); }
}
.process-step-spacer { flex: 1; display: none; }
@media (min-width: 768px) { .process-step-spacer { display: block; } }

/* Mobile node */
.process-step-mobile-node {
    position: absolute;
    top: 0; right: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--bg-dark);
    border: 2px solid;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.2;
}
@media (min-width: 768px) { .process-step-mobile-node { display: none; } }
.process-step-mobile-node svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ===========================
   CASE STUDIES
   =========================== */
.case-studies {
    padding: 6rem 1rem;
    background: var(--bg-dark);
    position: relative;
    z-index: 10;
}
.case-studies-header {
    max-width: 1280px;
    margin: 0 auto 4rem;
}
.case-studies-header .label-mono { color: var(--cy-yellow); margin-bottom: 1rem; }
.case-studies-title { font-size: clamp(1.75rem, 4vw, 3rem); color: #fff; font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; }

.case-studies-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 5rem; }
@media (min-width: 768px) { .case-studies-inner { gap: 8rem; } }

.case-study-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 1024px) { .case-study-row { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.case-study-img {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border: 1px solid #1f2937;
}
.case-study-row.reverse .case-study-img { order: 1; }
@media (min-width: 1024px) { .case-study-row.reverse .case-study-img { order: 2; } }
.case-study-row.reverse .case-study-content { order: 2; }
@media (min-width: 1024px) { .case-study-row.reverse .case-study-content { order: 1; } }
.case-study-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000, transparent, transparent);
    opacity: 0.6;
    z-index: 10;
}
.case-study-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.7s, opacity 0.7s, transform 0.7s;
}
.case-study-img:hover img { filter: none; opacity: 1; transform: scale(1.05); }
.case-study-img-label {
    position: absolute;
    bottom: 1.5rem; left: 1.5rem;
    z-index: 20;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    padding: 0.25rem 0.5rem;
    border-left: 2px solid;
}
.case-study-img-corner {
    position: absolute;
    top: 16px; right: 16px;
    width: 48px; height: 48px;
    border-top: 2px solid; border-right: 2px solid;
    z-index: 20;
    opacity: 0.5;
}
.case-study-title { font-size: clamp(1.5rem, 3vw, 2.5rem); color: #fff; margin-bottom: 2rem; font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; }
.case-study-blocks { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; }
.case-study-block {
    background: var(--bg);
    padding: 1.5rem;
    border-left: 2px solid #1f2937;
    transition: border-color 0.3s;
}
.case-study-block:hover { border-color: #4b5563; }
.case-study-block.highlight { }
.case-study-block-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
}
.case-study-block.highlight .case-study-block-label { }
.case-study-block p { font-size: 0.9375rem; line-height: 1.6; color: #d1d5db; font-family: var(--font-sans); }
.case-study-block.highlight p { color: #fff; }
.case-study-results { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.case-study-result-value {
    font-family: var(--font-disp);
    font-size: clamp(1.25rem, 2vw, 1.875rem);
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.case-study-result-label {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.case-study-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    transition: color 0.3s;
    margin-top: 2.5rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.case-study-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.3s; }
.case-study-link:hover svg { transform: translate(2px,-2px); }

/* ===========================
   MAP SECTION
   =========================== */
.map-section {
    padding: 6rem 1rem;
    background: var(--bg);
    position: relative;
    z-index: 10;
    overflow: hidden;
}
.map-bg-circle {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.1;
    pointer-events: none;
}
.map-bg-circle-ring {
    width: 800px; height: 800px;
    border: 1px dashed #374151;
    border-radius: 50%;
    animation: spin-slow 60s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.map-inner {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
}
.map-inner .label-mono { color: var(--cy-cyan); margin-bottom: 1rem; }
.map-title { font-size: clamp(1.75rem, 4vw, 3rem); color: #fff; margin-bottom: 1.5rem; }
.map-desc { font-size: 0.9375rem; color: #9ca3af; max-width: 42rem; margin: 0 auto 4rem; line-height: 1.6; }

.map-ui {
    position: relative;
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    aspect-ratio: 4/3;
    border: 1px solid rgba(69,154,199,0.2);
    background: rgba(5,8,11,0.5);
    backdrop-filter: blur(8px);
    overflow: hidden;
    box-shadow: 0 0 30px rgba(69,154,199,0.1);
}
@media (min-width: 768px) { .map-ui { aspect-ratio: 21/9; } }
.map-ui:hover .map-corner { margin: 0.5rem; }

.map-corner {
    position: absolute;
    width: 32px; height: 32px;
    border-color: var(--cy-cyan);
    border-style: solid;
    opacity: 0.5;
    margin: 1rem;
    transition: margin 0.5s;
    z-index: 20;
}
.map-corner-tl { top: 0; left: 0;   border-width: 2px 0 0 2px; }
.map-corner-tr { top: 0; right: 0;  border-width: 2px 2px 0 0; }
.map-corner-bl { bottom: 0; left: 0;  border-width: 0 0 2px 2px; }
.map-corner-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.map-hud-tl {
    position: absolute; top: 1.5rem; left: 2rem;
    font-family: var(--font-mono); font-size: 0.5625rem;
    color: var(--cy-cyan); opacity: 0.7; z-index: 30;
    text-align: left; line-height: 1.6;
}
@media (min-width: 768px) { .map-hud-tl { font-size: 0.75rem; } }
.map-hud-br {
    display: none;
    position: absolute; bottom: 1.5rem; right: 2rem;
    font-family: var(--font-mono); font-size: 0.75rem;
    color: var(--cy-yellow); opacity: 0.7; z-index: 30;
    text-align: right; line-height: 1.6;
}
@media (min-width: 768px) { .map-hud-br { display: block; } }

.map-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.map-shape {
    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 1.57;
}
.map-mask {
    position: absolute;
    inset: 0;
    -webkit-mask-image: url('https://raw.githubusercontent.com/djaiss/mapsicon/master/all/hu/vector.svg');
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('https://raw.githubusercontent.com/djaiss/mapsicon/master/all/hu/vector.svg');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
}
.map-base { position: absolute; inset: 0; background: #08121a; }
.map-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(69,154,199,0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69,154,199,0.25) 1px, transparent 1px);
    background-size: 20px 20px;
}
.map-glow-grad { position: absolute; inset: 0; background: linear-gradient(to top right, rgba(69,154,199,0.1), transparent, rgba(203,198,59,0.1)); }
.map-glow-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%; height: 80%; background: rgba(69,154,199,0.2); filter: blur(60px); }
.map-radar-wrap {
    position: absolute; top: 50%; left: 50%;
    width: 200%; height: 200%;
    transform: translate(-50%,-50%);
    pointer-events: none;
}
.map-radar {
    width: 100%; height: 100%;
    border-radius: 50%;
    mix-blend-mode: screen;
    background: conic-gradient(from 0deg, transparent 70%, rgba(69,154,199,0.1) 95%, rgba(69,154,199,0.8) 100%);
    animation: radar-spin 5s linear infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }

.map-city {
    position: absolute;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transform: translate(-50%,-50%);
    cursor: crosshair;
}
.map-city-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-city-dot {
    width: 6px; height: 6px;
    background: var(--cy-yellow);
    box-shadow: 0 0 10px var(--cy-yellow);
    z-index: 10;
    transition: transform 0.3s;
}
.map-city:hover .map-city-dot { transform: scale(1.5); }
.map-city-ping {
    position: absolute;
    width: 24px; height: 24px;
    border: 1px solid var(--cy-yellow);
    border-radius: 50%;
    animation: city-ping 2s ease-in-out infinite;
    opacity: 0.4;
}
@keyframes city-ping { 0%,100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.5); opacity: 0.1; } }
.map-city-label {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: #fff;
    letter-spacing: 0.2em;
    background: rgba(5,8,11,0.8);
    border: 1px solid rgba(203,198,59,0.3);
    padding: 0.125rem 0.375rem;
    backdrop-filter: blur(4px);
    opacity: 0.5;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(203,198,59,0.2);
    transition: opacity 0.3s, border-color 0.3s, color 0.3s;
}
@media (min-width: 768px) { .map-city-label { font-size: 0.625rem; } }
.map-city:hover .map-city-label { opacity: 1; border-color: var(--cy-yellow); color: var(--cy-yellow); }

.map-scan-line {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: rgba(69,154,199,0.3);
    box-shadow: 0 0 15px var(--cy-cyan);
    z-index: 40;
    animation: map-scan 3s ease-in-out infinite;
}
@keyframes map-scan {
    0%   { top: 0; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
.map-cta { margin-top: 3rem; }

/* ===========================
   TESTIMONIALS
   =========================== */
.testimonials {
    padding: 6rem 1rem;
    background: var(--bg-dark);
    border-top: 1px solid #1f2937;
    position: relative;
    z-index: 10;
}
.testimonials-header { text-align: center; margin-bottom: 4rem; }
.testimonials-header .label-mono { color: var(--cy-purple); margin-bottom: 1rem; }
.testimonials-title { font-size: clamp(1.75rem, 4vw, 3rem); color: #fff; }
.testimonials-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3,1fr); } }

.testimonial-card {
    background: var(--bg);
    border: 1px solid #1f2937;
    padding: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.3s;
}
.testimonial-card:hover { border-color: #374151; }
.testimonial-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    width: 0;
    transition: width 0.5s;
}
.testimonial-card:hover .testimonial-accent { width: 100%; }
.testimonial-quote-icon { width: 40px; height: 40px; margin-bottom: 1.5rem; opacity: 0.2; transition: opacity 0.3s; }
.testimonial-card:hover .testimonial-quote-icon { opacity: 0.4; }
.testimonial-text { color: #d1d5db; line-height: 1.7; font-size: 0.9375rem; margin-bottom: 2rem; flex-grow: 1; font-family: var(--font-sans); }
.testimonial-author { display: flex; align-items: center; gap: 1rem; margin-top: auto; }
.testimonial-avatar {
    width: 40px; height: 40px;
    border: 1px solid #374151;
    background: var(--bg-dark);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-disp);
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}
.testimonial-name { font-weight: 700; color: #fff; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.testimonial-company { font-family: var(--font-mono); font-size: 0.625rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.2em; margin-top: 0.125rem; }

/* ===========================
   CONTACT
   =========================== */
.contact {
    padding: 8rem 1rem;
    background: var(--bg);
    position: relative;
    z-index: 10;
    overflow: hidden;
}
.contact-glow-1,
.contact-glow-2 {
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
}
.contact-glow-1 { top: 50%; left: 25%; transform: translate(-50%,-50%); background: var(--cy-cyan); opacity: 0.1; }
.contact-glow-2 { top: 50%; right: 25%; transform: translate(50%,-50%); background: var(--cy-pink); opacity: 0.1; }
.contact-inner {
    max-width: 72rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    position: relative;
    z-index: 10;
}
@media (min-width: 1024px) { .contact-inner { grid-template-columns: 1fr 1fr; } }

.contact-info { position: relative; }
.contact-bg-xx {
    position: absolute;
    left: -3rem; top: 0;
    font-family: var(--font-mono);
    font-size: 6rem;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 2px var(--cy-pink);
    opacity: 0.1;
    user-select: none;
    pointer-events: none;
    line-height: 1;
}
.contact-label { font-family: var(--font-mono); color: var(--cy-cyan); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem; position: relative; z-index: 10; }
.contact-title { font-size: clamp(2rem, 4vw, 3.75rem); color: #fff; line-height: 1.1; margin-bottom: 1.5rem; position: relative; z-index: 10; }
.contact-desc { color: #9ca3af; font-size: 1.125rem; line-height: 1.6; max-width: 28rem; margin-bottom: 3rem; position: relative; z-index: 10; }
.contact-desc strong { color: #fff; }
.contact-links { display: flex; flex-direction: column; gap: 2rem; font-family: var(--font-mono); }
.contact-link { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; }
.contact-link-icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #374151;
    background: rgba(0,0,0,0.5);
    transition: border-color 0.3s;
    flex-shrink: 0;
}
.contact-link:hover .contact-link-icon { border-color: var(--cy-cyan); }
.contact-link-icon svg { width: 20px; height: 20px; fill: none; stroke: #9ca3af; stroke-width: 2; transition: stroke 0.3s; }
.contact-link:hover .contact-link-icon svg { stroke: var(--cy-cyan); }
.contact-link-type { font-size: 0.625rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 0.25rem; }
.contact-link-value { font-size: 1.125rem; color: #fff; transition: color 0.3s; }
.contact-link:hover .contact-link-value { color: var(--cy-cyan); }

/* Contact form */
.contact-form-wrap {
    background: rgba(26,32,44,0.3);
    backdrop-filter: blur(24px);
    border: 1px solid #1f2937;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) { .contact-form-wrap { padding: 3rem; } }
.contact-form-corner-tl { position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-top: 2px solid var(--cy-pink); border-left: 2px solid var(--cy-pink); }
.contact-form-corner-br { position: absolute; bottom: 0; right: 0; width: 32px; height: 32px; border-bottom: 2px solid var(--cy-cyan); border-right: 2px solid var(--cy-cyan); }

.form-field { position: relative; margin-bottom: 1.5rem; }
.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}
.form-field:focus-within .form-label { color: var(--cy-cyan); }
.form-input,
.form-textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #374151;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 1rem;
    padding: 0.75rem 0;
    outline: none;
    transition: border-color 0.3s;
    resize: none;
    display: block;
}
.form-input:focus,
.form-textarea:focus { border-bottom-color: var(--cy-cyan); }
.form-optional { opacity: 0.5; }

.form-submit-wrap { position: relative; margin-top: 2rem; }
.form-message { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.75rem; padding: 0.5rem; display: none; }
.form-message.success { color: var(--cy-cyan); border: 1px solid rgba(69,154,199,0.3); display: block; }
.form-message.error   { color: var(--cy-pink); border: 1px solid rgba(209,38,76,0.3); display: block; }

/* ===========================
   FAQ
   =========================== */
.faq {
    padding: 6rem 1rem;
    background: var(--bg);
    position: relative;
    z-index: 10;
}
.faq-header { text-align: center; margin-bottom: 4rem; }
.faq-header .label-mono { color: var(--cy-cyan); margin-bottom: 1rem; }
.faq-title { font-size: clamp(1.75rem, 4vw, 3rem); color: #fff; }
.faq-inner { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }

.faq-item {
    background: var(--bg-dark);
    border: 1px solid #1f2937;
    overflow: hidden;
    transition: border-color 0.3s;
}
.faq-item.open { border-color: var(--cy-yellow); }
.faq-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.5rem;
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    transition: background 0.3s;
    gap: 1rem;
}
.faq-trigger:hover { background: rgba(255,255,255,0.02); }
.faq-trigger-left { display: flex; align-items: center; gap: 1rem; }
.faq-trigger-num { font-family: var(--font-mono); font-size: 0.75rem; color: #6b7280; opacity: 0.5; }
.faq-trigger-question {
    font-family: var(--font-disp);
    font-weight: 700;
    font-size: 1rem;
    color: #d1d5db;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s;
    line-height: 1.3;
}
.faq-item.open .faq-trigger-question { color: var(--cy-yellow); }
.faq-trigger:hover .faq-trigger-question { color: #fff; }
.faq-chevron {
    width: 20px; height: 20px;
    flex-shrink: 0;
    stroke: #6b7280;
    fill: none;
    transition: transform 0.3s ease, stroke 0.3s;
    stroke-width: 2;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); stroke: var(--cy-yellow); }
.faq-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.87,0,0.13,1);
}
.faq-item.open .faq-body { max-height: 500px; }
.faq-body-inner {
    padding: 0 1.5rem 1.5rem;
    padding-right: 3rem;
    border-top: 1px solid rgba(31,41,55,0.5);
    margin: 0 1.5rem;
}
.faq-answer { font-size: 0.9375rem; color: #d1d5db; line-height: 1.6; padding-top: 1rem; }

/* Anchor scroll offset (sticky navbar magassága) */
section[id], [id].elementor-section { scroll-margin-top: 80px; }

/* ===========================
   FOOTER WIDGET
   =========================== */
.gse-footer {
    border-top: 1px solid #1f2937;
    background: var(--bg-dark);
    padding: 2.5rem 1rem 1.5rem;
    position: relative;
    z-index: 10;
}
.gse-footer .footer-inner { padding-bottom: 1.5rem; border-bottom: 1px solid #1f2937; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .gse-footer .footer-inner { grid-template-columns: 2fr 1fr 1fr; } }
.footer-tagline { font-family: var(--font-sans); font-size: 0.8125rem; color: #6b7280; margin-top: 0.5rem; line-height: 1.5; max-width: 260px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; justify-content: center; }
@media (min-width: 768px) { .footer-social { justify-content: flex-start; } }
.footer-social-link {
    width: 34px; height: 34px;
    border: 1px solid #374151;
    display: flex; align-items: center; justify-content: center;
    color: #6b7280;
    text-decoration: none;
    transition: border-color 0.3s, color 0.3s;
    font-size: 0.75rem;
    font-family: var(--font-mono);
}
.footer-social-link:hover { border-color: var(--cy-cyan); color: var(--cy-cyan); }
.footer-social-link svg { width: 16px; height: 16px; }
.footer-col-title { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--cy-yellow); text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 1rem; }
.footer-col-links { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col-links a { font-family: var(--font-mono); font-size: 0.625rem; color: #6b7280; text-decoration: none; text-transform: uppercase; letter-spacing: 0.15em; transition: color 0.3s; }
.footer-col-links a:hover { color: #fff; }
.footer-bottom { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; text-align: center; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-copyright { font-family: var(--font-mono); font-size: 0.5625rem; color: #4b5563; letter-spacing: 0.1em; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; }
@media (min-width: 768px) { .footer-legal-links { justify-content: flex-end; } }
.footer-legal-links a { font-family: var(--font-mono); font-size: 0.5625rem; color: #4b5563; text-decoration: none; text-transform: uppercase; letter-spacing: 0.15em; transition: color 0.3s, border-color 0.3s; border-bottom: 1px solid #1f2937; }
.footer-legal-links a:hover { color: var(--cy-cyan); border-color: var(--cy-cyan); }

/* ===========================
   FOOTER
   =========================== */
.site-footer {
    border-top: 1px solid #1f2937;
    background: var(--bg-dark);
    position: relative;
    z-index: 10;
    padding: 2rem 1rem;
}
.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    text-align: center;
}
@media (min-width: 768px) { .footer-inner { grid-template-columns: 1fr 1fr 1fr; text-align: left; } }
.footer-logo { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
@media (min-width: 768px) { .footer-logo { justify-content: flex-start; } }
.footer-logo-icon { width: 24px; height: 24px; border: 2px solid var(--cy-yellow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer-logo-dot { width: 8px; height: 8px; background: var(--cy-pink); }
.footer-logo-text { font-family: var(--font-disp); font-weight: 700; font-size: 1rem; letter-spacing: 0.2em; color: #fff; text-transform: uppercase; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; font-family: var(--font-mono); font-size: 0.625rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.2em; }
@media (min-width: 768px) { .footer-nav { justify-content: center; } }
.footer-nav a { transition: color 0.3s; text-decoration: none; }
.footer-nav a:hover { color: #fff; }
.footer-legal { display: flex; flex-direction: column; align-items: center; gap: 1rem; font-family: var(--font-mono); font-size: 0.625rem; color: #4b5563; }
@media (min-width: 768px) { .footer-legal { flex-direction: row; justify-content: flex-end; align-items: center; } }
.footer-legal a { transition: color 0.3s; text-transform: uppercase; letter-spacing: 0.2em; border-bottom: 1px solid #1f2937; text-decoration: none; }
.footer-legal a:hover { color: var(--cy-cyan); border-color: var(--cy-cyan); }

/* ===========================
   PAGE CONTENT
   =========================== */
.page-content {
    padding: 8rem 1rem 4rem;
    min-height: 80vh;
}
.page-content .container { max-width: 48rem; }
.page-content h1 { font-size: 2.5rem; color: #fff; margin-bottom: 2rem; }
.page-content p { color: #9ca3af; line-height: 1.7; margin-bottom: 1rem; }

/* ===========================
   HERO SLIDE ANIMATION
   =========================== */
.hero-text-col {
    display: grid;
    grid-template-areas: 'stack';
    align-items: center;
}
.hero-card-col {
    display: grid;
    grid-template-areas: 'stack';
    align-items: start;
}
/* Bal oldal: balról úszik be */
.hero-slide-text {
    grid-area: stack;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-60px);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
                transform 0.65s cubic-bezier(0.22,1,0.36,1),
                visibility 0s linear 0.65s;
    pointer-events: none;
    z-index: 1;
}
.hero-slide-text.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
                transform 0.65s cubic-bezier(0.22,1,0.36,1),
                visibility 0s linear 0s;
    pointer-events: auto;
    z-index: 2;
}
/* Jobb oldal (kártya): alulról úszik be */
.hero-slide-card {
    grid-area: stack;
    opacity: 0;
    visibility: hidden;
    transform: translateY(48px);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1) 0.12s,
                transform 0.65s cubic-bezier(0.22,1,0.36,1) 0.12s,
                visibility 0s linear 0.77s;
    pointer-events: none;
    z-index: 1;
}
.hero-slide-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1) 0.12s,
                transform 0.65s cubic-bezier(0.22,1,0.36,1) 0.12s,
                visibility 0s linear 0s;
    pointer-events: auto;
    z-index: 2;
}

/* ===========================
   HERO CARD REF BUTTON
   =========================== */
.hero-card-ref-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.625rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cy-yellow);
    border: 1px solid rgba(203,198,59,0.35);
    text-decoration: none;
    transition: background 0.3s, border-color 0.3s;
}
.hero-card-ref-btn:hover {
    background: rgba(203,198,59,0.08);
    border-color: var(--cy-yellow);
    color: var(--cy-yellow);
}

/* ===========================
   HERO VIDEO CARD
   =========================== */
.hero-card-video {
    position: relative;
    margin-bottom: 1.25rem;
    overflow: hidden;
    border: 1px solid #1f2937;
    background: #000;
}
.hero-card-video iframe,
.hero-card-video video {
    width: 100%; height: 100%;
    display: block;
}
.hero-card-video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: #4b5563;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

/* ===========================
   HERO GOOGLE CARD
   =========================== */
.hero-card-google { margin-bottom: 0.25rem; }

.hero-card-google-name {
    font-family: var(--font-disp);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}
.hero-card-google-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid #1f2937;
    margin-bottom: 0.875rem;
}
.hero-google-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}
.hero-google-label {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: #6b7280;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.gse-stars { display: flex; gap: 1px; }
.gse-star { font-size: 1rem; line-height: 1; }
.gse-star--full  { color: #FBBC04; text-shadow: 0 0 6px rgba(251,188,4,0.4); }
.gse-star--empty { color: #374151; }
.hero-google-num {
    font-family: var(--font-disp);
    font-size: 1.375rem;
    font-weight: 900;
    color: #9ca3af;
}
.hero-google-num--after {
    color: #FBBC04;
    text-shadow: 0 0 10px rgba(251,188,4,0.5);
}
.hero-google-count {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    color: #6b7280;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.hero-google-count-num {
    color: #fff;
    font-size: 0.6875rem;
    margin-right: 0.25rem;
}

/* ===========================
   MARQUEE IMAGE LOGOS
   =========================== */
.marquee-logo-img {
    display: flex;
    align-items: center;
    height: 32px;
}
.marquee-logo-img img {
    max-height: 32px;
    width: auto;
    max-width: 110px;
    filter: grayscale(1) brightness(0.4);
    transition: filter 0.3s, transform 0.3s;
    object-fit: contain;
    display: block;
}
.marquee-item:hover .marquee-logo-img img {
    filter: grayscale(0) brightness(1);
    transform: scale(1.05);
}

/* ===========================
   SERVICE CARD BUTTON
   =========================== */
.service-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1.25rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid;
    text-decoration: none;
    background: transparent;
    opacity: 0.35;
    transition: opacity 0.3s, box-shadow 0.3s, background 0.3s;
    align-self: flex-start;
}
.service-card-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 0 10px currentColor, inset 0 0 6px rgba(255,255,255,0.05);
}

/* ===========================
   TESTIMONIALS LOAD MORE
   =========================== */
.testimonials-load-more {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}
/* !important szükséges: WordPress témák felülírják a button stílusát */
.gse-load-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem;
    padding: 0.875rem 2.5rem !important;
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--cy-cyan) !important;
    border: 1px solid var(--cy-cyan) !important;
    box-shadow: 0 0 10px rgba(69,154,199,0.2), inset 0 0 10px rgba(69,154,199,0.05) !important;
    background: transparent !important;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s;
    outline: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
}
.gse-load-more-btn:hover {
    background: rgba(69,154,199,0.1) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(69,154,199,0.4), inset 0 0 15px rgba(69,154,199,0.1) !important;
}
.gse-load-more-btn::after { content: '→'; margin-left: 0.25rem; }
.gse-load-more-btn.expanded {
    color: var(--cy-pink) !important;
    border-color: var(--cy-pink) !important;
    box-shadow: 0 0 10px rgba(205,42,191,0.2), inset 0 0 10px rgba(205,42,191,0.05) !important;
}
.gse-load-more-btn.expanded:hover {
    background: rgba(205,42,191,0.1) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(205,42,191,0.4), inset 0 0 15px rgba(205,42,191,0.1);
}
.gse-load-more-btn.expanded::after { content: '↑'; }

/* Testimonial kártya lenyíló animáció */
@keyframes testi-reveal {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.testimonial-card.revealing {
    animation: testi-reveal 0.48s cubic-bezier(0.22,1,0.36,1) both;
}

/* ===========================
   MAP HOTSPOTS
   =========================== */
.gse-map-hotspots {
    width: 100%;
    border: 1px solid rgba(204,21,65,0.2);
    box-shadow: 0 0 30px rgba(204,21,65,0.08);
    overflow: hidden;
}
.gse-map-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Interaktív térkép (pan + zoom) */
.gse-map-hotspots.is-interactive { cursor: grab; user-select: none; -webkit-user-select: none; }
.gse-map-hotspots.is-interactive.is-dragging { cursor: grabbing; }
.gse-map-hotspots.is-interactive .gse-map-container {
    overflow: visible;
    transition: transform 0.05s linear;
    will-change: transform;
    transform-origin: center center;
}
.gse-map-hotspots.is-interactive { overflow: hidden; }
.gse-map-zoom-controls {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 20;
}
.gse-map-zoom-btn {
    width: 32px; height: 32px;
    background: rgba(5,8,11,0.85);
    border: 1px solid rgba(204,21,65,0.4);
    color: #cc1541;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.3s, background 0.3s;
    font-family: var(--font-mono);
}
.gse-map-zoom-btn:hover { background: rgba(204,21,65,0.15); border-color: #cc1541; }
.gse-map-reset-btn {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    padding: 0 0.25rem;
    height: 24px;
    width: 32px;
}
.gse-map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(204,21,65,0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(204,21,65,0.15) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 1;
}
.gse-map-spot {
    position: absolute;
    transform: translate(-50%,-50%);
    z-index: 10;
    cursor: crosshair;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gse-map-dot {
    border-radius: 50%;
    position: relative;
    z-index: 3;
    transition: transform 0.3s;
}
.gse-map-spot:hover .gse-map-dot { transform: scale(3); }
.gse-map-ping {
    position: absolute;
    border-radius: 50%;
    border: 1px solid;
    animation: gse-ping 2s ease-in-out infinite;
    opacity: 0.4;
    z-index: 2;
}
@keyframes gse-ping {
    0%,100% { transform: scale(1); opacity: 0.4; }
    50%      { transform: scale(1.6); opacity: 0.1; }
}
.gse-map-tooltip {
    position: absolute;
    background: rgba(5,8,11,0.92);
    backdrop-filter: blur(8px);
    border: 1px solid;
    padding: 0.375rem 0.75rem;
    white-space: nowrap;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    min-width: 80px;
    text-align: center;
}
.gse-map-spot:hover .gse-map-tooltip { opacity: 1; }

.gse-map-tooltip--top    { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); }
.gse-map-tooltip--bottom { top:    calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px); }
.gse-map-tooltip--left   { right:  calc(100% + 10px); top: 50%;  transform: translateY(-50%) translateX(4px); }
.gse-map-tooltip--right  { left:   calc(100% + 10px); top: 50%;  transform: translateY(-50%) translateX(-4px); }

.gse-map-spot:hover .gse-map-tooltip--top    { transform: translateX(-50%) translateY(0); }
.gse-map-spot:hover .gse-map-tooltip--bottom { transform: translateX(-50%) translateY(0); }
.gse-map-spot:hover .gse-map-tooltip--left   { transform: translateY(-50%) translateX(0); }
.gse-map-spot:hover .gse-map-tooltip--right  { transform: translateY(-50%) translateX(0); }

.gse-map-tooltip-label {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
}
.gse-map-tooltip-desc {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: #9ca3af;
    letter-spacing: 0.05em;
}

/* ===========================
   RESPONSIVE — LAPTOP (≤ 1279px)
   =========================== */
@media (max-width: 1279px) {
    .hero-content  { padding-left: 2.5rem; padding-right: 2.5rem; }
    .hero-title    { font-size: clamp(2.75rem, 7vw, 5.5rem); }
    .process-inner { max-width: 52rem; }
    .case-studies-inner { gap: 6rem; }
    .manifesto-inner    { gap: 3rem; }
}

/* ===========================
   RESPONSIVE — TABLET (≤ 1023px)
   =========================== */
@media (max-width: 1023px) {
    /* Hero */
    .hero-card-col { display: none; }
    .hero-inner    { grid-template-columns: 1fr; }
    .hero-title    { font-size: clamp(2.5rem, 7vw, 4.5rem); }
    .hero-content  { padding: 5rem 2rem 7rem; }
    .hero-controls { right: 2rem; }
    .hero-indicators { left: 2rem; }

    /* Pillars */
    .trust-pillars { padding: 3rem 1.5rem; }
    .trust-pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

    /* Marquee */
    .marquee { padding: 2.5rem 0; }

    /* Services */
    .services      { padding: 4rem 1.5rem; }
    .services-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Process */
    .process       { padding: 4rem 1.5rem; }
    .process-header { margin-bottom: 3rem; }
    .process-inner { max-width: 100%; }
    .process-steps { gap: 3rem; }
    .process-line  { display: none; }
    .process-step  { flex-direction: column !important; gap: 1.5rem; align-items: flex-start; }
    .process-step.even { flex-direction: column !important; }
    .process-step-content { text-align: left !important; }
    .process-step-node    { display: none !important; }
    .process-step-spacer  { display: none !important; }

    /* Manifesto */
    .manifesto       { padding: 4rem 1.5rem; }
    .manifesto-inner { grid-template-columns: 1fr; gap: 3rem; }
    .manifesto-img-wrap { max-width: 480px; aspect-ratio: 4/3; }
    .manifesto-title { font-size: clamp(1.75rem, 5vw, 3rem); }

    /* Case Studies */
    .case-studies        { padding: 4rem 1.5rem; }
    .case-studies-inner  { gap: 4rem; }
    .case-study-row      { grid-template-columns: 1fr; gap: 2rem; }
    .case-study-row.reverse .case-study-img     { order: unset !important; }
    .case-study-row.reverse .case-study-content { order: unset !important; }

    /* Testimonials */
    .testimonials      { padding: 4rem 1.5rem; }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Contact */
    .contact        { padding: 4rem 1.5rem; }
    .contact-inner  { grid-template-columns: 1fr; gap: 2.5rem; }
    .contact-bg-xx  { display: none; }

    /* FAQ */
    .faq { padding: 4rem 1.5rem; }

    /* Footer (widget + hagyományos) */
    .footer-inner { grid-template-columns: 1fr; text-align: center; }
    .footer-logo  { justify-content: center; }
    .footer-nav   { justify-content: center; }
    .footer-legal { justify-content: center; flex-direction: column; align-items: center; }
    /* Footer widget tablet: 2 col */
    .gse-footer .footer-inner { grid-template-columns: repeat(2, 1fr) !important; }
    .gse-footer .footer-nav-col { text-align: left; }
}

/* ===========================
   RESPONSIVE — MOBILE (≤ 767px)
   =========================== */
@media (max-width: 767px) {
    /* Hero */
    .hero-title      { font-size: clamp(2.25rem, 9vw, 3.5rem); }
    /* Hero kártya mobil nézeten: megjelenik a szöveg alatt */
    .hero-card-col {
        display: grid;
        grid-template-areas: 'stack';
        align-items: start;
        padding: 0 0 2.5rem;
    }
    .hero-card-wrap  { max-width: 360px; margin: 0 auto; }
    .hero-card-img   { height: 180px; overflow: hidden; }
    .hero-card-img img { height: 100%; width: 100%; object-fit: cover; }
    .hero-card-video { max-height: 200px; }
    .hero-controls   { bottom: auto; top: calc(100vh - 3.5rem); right: 1rem; gap: 0.5rem; }
    .hero-indicators { bottom: auto; top: calc(100vh - 3.5rem); left: 1rem; }
    .hero-btn        { padding: 0.5rem; }
    .hero-btn svg    { width: 18px; height: 18px; }
    .hero-inner      { grid-template-columns: 1fr; }
    .hero-content    { padding: 4rem 1rem 3rem; }

    /* Navbar */
    .navbar-cta { font-size: 0.5625rem; padding: 0.375rem 0.75rem; }
    .navbar-cta-arrow { display: none; }

    /* Buttons */
    .btn-primary, .btn-cyan, .btn-outline-cyan {
        font-size: 0.75rem;
        padding: 0.75rem 1.25rem;
        letter-spacing: 0.1em;
    }

    /* Trust Pillars */
    .trust-pillars-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
    .pillar-value { font-size: 2rem; }

    /* Services */
    .services        { padding: 3rem 1rem; }
    .services-grid   { grid-template-columns: 1fr !important; }
    .services-header { margin-bottom: 2rem; }

    /* Process */
    .process         { padding: 3rem 1rem; }
    .process-header  { margin-bottom: 2.5rem; }
    .process-steps   { gap: 2.5rem; }
    .process-line    { display: none; }
    .process-step    { flex-direction: column !important; gap: 1rem; align-items: flex-start; }
    .process-step.even { flex-direction: column !important; }
    .process-step-content { text-align: left !important; }
    .process-step-node    { display: none !important; }
    .process-step-spacer  { display: none !important; }

    /* Manifesto */
    .manifesto       { padding: 3rem 1rem; }
    .manifesto-inner { grid-template-columns: 1fr; gap: 2rem; }
    .manifesto-img-wrap { max-width: 100%; aspect-ratio: 4/3; }
    .manifesto-points { gap: 1.75rem; }

    /* Case Studies */
    .case-studies        { padding: 3rem 1rem; }
    .case-studies-inner  { gap: 3rem; }
    .case-study-row      { grid-template-columns: 1fr; gap: 1.5rem; }
    .case-study-row.reverse .case-study-img     { order: unset !important; }
    .case-study-row.reverse .case-study-content { order: unset !important; }
    .case-study-results  { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .case-study-blocks   { gap: 1rem; }
    .case-study-block    { padding: 1rem; }

    /* Testimonials */
    .testimonials      { padding: 3rem 1rem; }
    .testimonials-grid { grid-template-columns: 1fr !important; }

    /* Contact */
    .contact        { padding: 3rem 1rem; }
    .contact-inner  { grid-template-columns: 1fr; gap: 2rem; }
    .contact-bg-xx  { display: none; }
    .contact-form-wrap { padding: 1.5rem; }

    /* Map */
    .gse-map-tooltip { display: none; }
    .gse-map-hotspots { border: none; }

    /* FAQ */
    .faq             { padding: 3rem 1rem; }
    .faq-trigger-question { font-size: 0.875rem; }
    .faq-trigger     { padding: 1rem; }

    /* Marquee */
    .marquee-item  { font-size: 1.25rem; gap: 2rem; }
    .marquee-inner { gap: 2rem; }
    .marquee       { padding: 2rem 0; }

    /* Footer (hagyományos + widget) */
    .footer-inner { grid-template-columns: 1fr; text-align: center; }
    .footer-logo  { justify-content: center; }
    .footer-nav   { justify-content: center; flex-wrap: wrap; gap: 1rem; }
    .footer-legal { justify-content: center; flex-direction: column; align-items: center; }
    /* Footer widget mobil: 1 col */
    .gse-footer { padding: 2rem 1rem 1.5rem; }
    .gse-footer .footer-inner { grid-template-columns: 1fr !important; text-align: center; gap: 2rem; }
    .gse-footer .footer-brand { display: flex; flex-direction: column; align-items: center; }
    .gse-footer .footer-logo  { justify-content: center; }
    .gse-footer .footer-tagline { max-width: 100%; text-align: center; }
    .gse-footer .footer-social { justify-content: center; }
    .gse-footer .footer-nav-col { text-align: center; }
    .gse-footer .footer-col-links { align-items: center; }
    .gse-footer .footer-bottom { flex-direction: column; text-align: center; }
    .gse-footer .footer-legal-links { justify-content: center; }
}

/* ===========================
   RESPONSIVE — SMALL MOBILE (≤ 479px)
   =========================== */
@media (max-width: 479px) {
    /* Base */
    html { font-size: 15px; }

    /* Hero */
    .hero-title    { font-size: 1.875rem; }
    .hero-subtitle { font-size: 0.5625rem; letter-spacing: 0.12em; }
    .hero-content  { padding: 3.5rem 0.75rem 5rem; }

    /* Pillars */
    .trust-pillars      { padding: 2rem 0.75rem; }
    .trust-pillars-grid { grid-template-columns: 1fr 1fr; }
    .pillar-value       { font-size: 1.75rem; }

    /* Sections */
    .services     { padding: 2.5rem 0.75rem; }
    .testimonials { padding: 2.5rem 0.75rem; }
    .faq          { padding: 2.5rem 0.75rem; }
    .process      { padding: 2.5rem 0.75rem; }
    .case-studies { padding: 2.5rem 0.75rem; }
    .manifesto    { padding: 2.5rem 0.75rem; }
    .contact      { padding: 2.5rem 0.75rem; }
    .marquee      { padding: 1.5rem 0; }

    /* Case Studies */
    .case-study-results { grid-template-columns: 1fr; }
    .case-study-result-value { font-size: 1.25rem; }

    /* Google card stats vertikálisan */
    .hero-card-google-stats { flex-direction: column; gap: 0.75rem; align-items: center; }
    .hero-google-arrow { transform: rotate(90deg); }

    /* Navbar */
    .navbar-top { padding: 0.5rem 0.75rem; }
    .navbar-ticker { display: none; }

    /* Contact */
    .contact-form-wrap { padding: 1rem; }

    /* Buttons */
    .btn-primary, .btn-cyan, .btn-outline-cyan {
        padding: 0.625rem 1rem;
        font-size: 0.6875rem;
        width: 100%;
        justify-content: center;
    }
}

/* ===========================
   WIDGET LABEL ALIASES
   =========================== */
.process-label,
.case-studies-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.process-label     { color: var(--cy-cyan); }
.case-studies-label { color: var(--cy-yellow); }

/* ===========================
   MANIFESTO FLIP
   =========================== */
@media (min-width: 1024px) {
    .manifesto-flipped .manifesto-inner { direction: rtl; }
    .manifesto-flipped .manifesto-inner > * { direction: ltr; }
}

/* ===========================
   PROCESS STEP ANIMATION DELAY
   =========================== */
.process-step { animation-delay: var(--step-delay, 0s); }

/* ===========================
   HUNGARY MAP – RADAR + SCAN
   =========================== */
.gse-map-hun-radar {
    position: absolute;
    inset: -75%;
    z-index: 1;
    pointer-events: none;
    background: conic-gradient(
        from 0deg,
        transparent 68%,
        rgba(204,21,65,0.03) 80%,
        rgba(204,21,65,0.12) 93%,
        rgba(204,21,65,0.75) 99.5%,
        transparent 100%
    );
    animation: gse-hun-radar-rot 5s linear infinite;
}
@keyframes gse-hun-radar-rot {
    to { transform: rotate(360deg); }
}

.gse-map-hun-scan {
    position: absolute;
    left: -10%;
    right: -10%;
    top: 0;
    height: 2px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(204,21,65,0.9) 10%, rgba(204,21,65,0.9) 90%, transparent 100%);
    box-shadow: 0 0 12px 4px rgba(204,21,65,0.5);
    animation: gse-hun-scan-drop 3s linear infinite;
}
@keyframes gse-hun-scan-drop {
    0%   { top: 0%;   opacity: 0; }
    6%   { opacity: 1; }
    94%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Spotok és tooltipek a radar/scan FELETT */
.gse-map-container .gse-map-spot {
    z-index: 4;
}
.gse-map-container .gse-map-tooltip {
    z-index: 10;
}