@font-face {
    font-family: 'VT323';
    src: url('font/vt323-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'VT323';
    src: url('font/vt323-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020;
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

:root {
    --dd-cyan: #2de2e6;
    --dd-magenta: #ff2bd6;
}

html.dd-boot-lock, html.dd-boot-lock body {
    overflow: hidden;
}

#ddyboot {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility .45s ease;
}
#ddyboot.dd-out {
    opacity: 0;
    visibility: hidden;
}
#ddyboot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 2px, transparent 3px);
    mix-blend-mode: overlay;
    pointer-events: none;
}
#ddyboot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.7) 100%);
    pointer-events: none;
}
#ddyboot, #ddyboot * {
    font-family: 'VT323', 'Consolas', monospace;
}
.ddyboot__crt {
    position: relative;
    width: min(720px, 92vw);
    color: #FCDF08;
    text-shadow: 0 0 4px rgba(252,223,8,.45);
}
.ddyboot__log {
    margin: 0;
    white-space: pre-wrap;
    font-size: clamp(15px, 2.8vw, 21px);
    line-height: 1.35;
    min-height: 8em;
}
.ddyboot__log .cy { color: var(--dd-cyan); text-shadow: 0 0 4px rgba(45,226,230,.55); }
.ddyboot__log .mg { color: var(--dd-magenta); text-shadow: 0 0 4px rgba(255,43,214,.55); }
.ddyboot__bar {
    margin-top: 14px;
    height: 10px;
    border: 1px solid #FCDF08;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(252,223,8,.08);
}
.ddyboot__barfill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--dd-magenta), #FCDF08, var(--dd-cyan));
    transition-property: width;
    transition-timing-function: linear;
}
.ddyboot__press {
    margin-top: 18px;
    text-align: center;
    font-size: clamp(16px, 3vw, 22px);
    letter-spacing: 2px;
    opacity: 0;
}
.ddyboot__press.show {
    opacity: 1;
    animation: dd-blink 1s steps(2) infinite;
}
@keyframes dd-blink { 50% { opacity: .15; } }

.ddyboot__duckwrap {
    position: absolute;
    left: 0;
    bottom: -58px;
    width: 100%;
    height: 60px;
    overflow: visible;
    pointer-events: none;
}
.ddyboot__duck {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.05;
    color: #FCDF08;
    white-space: pre;
    transition-property: left;
    transition-timing-function: linear;
}

@media (max-width: 640px) {
    .ddyboot__crt { width: 94vw; }
    .ddyboot__log { font-size: 15px; min-height: 6em; }
}

@media (prefers-reduced-motion: reduce) {
    #ddyboot { transition: opacity .15s linear; }
    .ddyboot__barfill, .ddyboot__duck { transition: none; }
    .ddyboot__press.show { animation: none; opacity: 1; }
}

.dd-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
.dd-reveal.dd-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .dd-reveal { opacity: 1; transform: none; transition: none; }
}

body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: -20%;
    height: 18%;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.05), transparent);
    pointer-events: none;
    z-index: 9998;
    mix-blend-mode: screen;
    display: none;
    animation: dd-sweep 17s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
    body::after { display: block; }
}
@keyframes dd-sweep {
    0% { top: -20%; }
    100% { top: 120%; }
}
@media (prefers-reduced-motion: reduce) {
    body::after { display: none; }
}

@media (hover: hover) and (pointer: fine) {
    .btn, .open-footer-modal-btn {
        transition: all .5s, transform .15s;
    }
    .btn:hover, .open-footer-modal-btn:hover {
        animation: dd-glitch .3s steps(2) 1;
    }
    .h1-62 {
        cursor: default;
        transition: text-shadow .2s;
    }
    .h1-62:hover {
        animation: dd-glitch-text .4s steps(3) 1;
    }
}
@keyframes dd-glitch {
    0% { transform: none; }
    25% { transform: translate(-2px,1px); text-shadow: -2px 0 var(--dd-magenta), 2px 0 var(--dd-cyan); }
    50% { transform: translate(2px,-1px); text-shadow: 2px 0 var(--dd-cyan), -2px 0 var(--dd-magenta); }
    75% { transform: translate(-1px,0); text-shadow: none; }
    100% { transform: none; }
}
@keyframes dd-glitch-text {
    0%, 100% { text-shadow: 4px 4px 8px #000; }
    30% { text-shadow: -3px 0 var(--dd-magenta), 3px 0 var(--dd-cyan), 4px 4px 8px #000; transform: translate(-1px,0); }
    60% { text-shadow: 3px 0 var(--dd-cyan), -3px 0 var(--dd-magenta), 4px 4px 8px #000; transform: translate(1px,0); }
}

.szolgdiv_elem, .negyes_kartya, .rolam_kartya, .case-study-box, .google-review-card, .blog-post-card {
    transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.szolgdiv_elem:hover, .negyes_kartya:hover, .rolam_kartya:hover {
    box-shadow: 0 0 0 1px rgba(45,226,230,.4), 0 0 24px rgba(45,226,230,.22), 2px 2px 10px #000;
}
.google-review-card:hover {
    box-shadow: 0 0 0 1px rgba(255,43,214,.35), 0 0 20px rgba(255,43,214,.18), 2px 2px 10px #000;
}