/* ---------------------------------------------------
   FONT — Space Grotesk (self-hosted, variable)
--------------------------------------------------- */

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
        U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/space-grotesk-latin.woff2') format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --primary: #0047ab;
    --primary-light: #3f7fd6;
    --primary-dark: #002f73;
}

body {
    font-family:
        'Space Grotesk',
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
    background-color: #f5f7fb;
    color: #111827;
}

/* ---------------------------------------------------
   HERO
--------------------------------------------------- */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: url('img/pexels-kindelmedia-8566473-blue.webp') center / cover no-repeat;
    padding: 3rem 1rem;
    overflow-x: hidden;
}

.hero-heading {
    position: relative;
    z-index: 2;
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 6px rgb(0 47 115 / 70%);
    text-align: center;

    /* Slide-in: jobbról balra */
    opacity: 0;
    transform: translateX(100%);
    transition:
        opacity 1.2s ease-out,
        transform 1.2s ease-out;
}

.hero-heading.slide-in {
    opacity: 1;
    transform: translateX(0);
}

@media (width >= 992px) {
    .hero-heading {
        text-align: left;
    }
}

.hero-cta-box {
    background: rgb(255 255 255 / 65%);
    backdrop-filter: blur(8px);
    border-radius: 1.25rem;
    padding: 2rem 2rem 2.25rem;

    /* Slide-in: balról jobbra */
    opacity: 0;
    transform: translateX(-100%);
    transition:
        opacity 1.2s ease-out,
        transform 1.2s ease-out;
}

.hero-cta-box.slide-in {
    opacity: 1;
    transform: translateX(0);
}

.hero-title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--primary-dark);
    text-align: center;
}

.hero-subtitle {
    font-size: 1.05rem;
    color: #4b5563;
    text-align: center;
}

.hero-cta-box .btn {
    align-self: center;
}

@media (width >= 992px) {
    .hero-title {
        text-align: left;
    }

    .hero-subtitle {
        text-align: left;
    }

    .hero-cta-box .btn {
        align-self: flex-start;
    }
}

.robot-column {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgb(63 127 214 / 45%), rgb(0 71 171 / 45%), rgb(0 47 115 / 45%));
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 45px rgb(15 23 42 / 18%);
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* Slide-in: fentről lefelé */
    opacity: 0;
    transform: translateY(-100%);
    transition:
        opacity 1.2s ease-out,
        transform 1.2s ease-out;
}

.robot-column.slide-in {
    opacity: 1;
    transform: translateY(0);
}

.robot-inner {
    position: relative;
    color: #f9fafb;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0;
}

.robot-inner img {
    max-width: 85%;
    max-height: 85%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgb(15 23 42 / 45%));
}

.robot-label {
    margin-top: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.85rem;
    opacity: 0.9;
}

.configure-btn {
    margin-top: 1.25rem;
    border-radius: 999px;
    padding: 0.6rem 1.4rem;
    border: none;
    background: #f9fafb;
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 10px 25px rgb(15 23 42 / 25%);
}

.configure-btn:hover {
    background: #e5efff;
}

/* ---------------------------------------------------
   CONTACT SECTION
--------------------------------------------------- */

.contact-section {
    padding: 3rem 1rem 4rem;
    background-color: #164ba0;
    color: #fff;
}

.contact-section .hero-title {
    color: #fff;
}

.contact-section .text-muted {
    color: #cce0ff !important;
}

.contact-section .form-label {
    color: #fff;
}

.contact-section .form-control {
    background-color: #d4eef8;
    border-color: #a8ddf0;
    color: #0a2540;
}

.contact-section .form-control::placeholder {
    color: #5a8ea8;
}

.contact-section .form-control:focus {
    background-color: #e4f4fb;
    border-color: #6ec1e4;
    box-shadow: 0 0 0 0.25rem rgb(110 193 228 / 35%);
}

.contact-section .form-check-label {
    color: #fff;
}

.contact-section .form-text {
    color: #a8cce0;
}

.contact-cta {
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff;
}

.contact-email {
    font-weight: 600;
    color: #fff;
}

.contact-email a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: 1.15rem;
    background-color: rgba(255 255 255 / 12%);
    border: 1px solid rgba(255 255 255 / 25%);
    border-radius: 999px;
    padding: 0.5rem 1.5rem;
    transition:
        background-color 0.2s,
        border-color 0.2s;
}

.contact-email a:hover,
.contact-email a:active {
    background-color: rgba(255 255 255 / 22%);
    border-color: rgba(255 255 255 / 45%);
    color: #fff;
}

.contact-section .small a,
.contact-section .form-check-label a {
    color: #a8cce0;
    text-decoration: none;
}

.contact-section .small a:hover,
.contact-section .small a:active,
.contact-section .form-check-label a:hover,
.contact-section .form-check-label a:active {
    color: #fff;
}

.contact-section hr.border-light {
    border-color: #fff;
}

/* ---------------------------------------------------
   POPUP BASE STYLES
--------------------------------------------------- */

.robot-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(15 23 42 / 65%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.robot-popup-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.robot-popup {
    background: var(--primary-dark);
    border-radius: 1.5rem;
    padding: 1.75rem;
    max-width: 720px;
    width: calc(100% - 2rem);
    margin: 1rem;
    color: #e5e7eb;
    position: relative;
    overflow: hidden;
}

.robot-popup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1.5rem;
    line-height: 1;
}

.robot-popup-close:hover {
    color: #f9fafb;
}

.robot-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;

    /* nagyobb alap */
    position: relative;
}

.robot-carousel img {
    cursor: pointer;
    max-height: 300px;

    /* nagyobb alap */
    width: auto;
    filter: drop-shadow(0 18px 30px rgb(0 0 0 / 60%));
    position: relative;
    z-index: 2;
}

/* Méretváltozatok (S, M, L, XL) */

/* S – Small (kisebb robotokhoz) */
.robot-size-s img {
    max-height: 220px;
}

.robot-size-s {
    min-height: 240px;
}

/* M – Medium (alapértelmezett) */
.robot-size-m img {
    max-height: 300px;
}

.robot-size-m {
    min-height: 300px;
}

/* L – Large (nagyobb, látványosabb) */
.robot-size-l img {
    max-height: 360px;
}

.robot-size-l {
    min-height: 360px;
}

/* XL – Extra Large (nagyon látványos, hero‑méret) */
.robot-size-xl img {
    max-height: 420px;
}

.robot-size-xl {
    min-height: 420px;
}

.robot-caption {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.95rem;
    color: #d1d5db;
}

.robot-popup-hint {
    font-size: 0.8rem;
    color: #9ca3af;
    text-align: center;
    margin-top: 0.5rem;
}

/* ---------------------------------------------------
   OPTIONAL EFFECT #1 — PULZÁLÓ FÉNYGYŰRŰ
--------------------------------------------------- */

.pulse-ring::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgb(0 71 171 / 55%), rgb(0 71 171 / 15%), transparent 70%);
    filter: blur(18px);
    animation: pulse-ring 3.5s ease-in-out infinite;
    z-index: 0;
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0.6;
    }
}

/* ---------------------------------------------------
   OPTIONAL EFFECT #2 — CYBERPUNK KÉK HÁTTÉRANIMÁCIÓ
--------------------------------------------------- */

.cyberpunk-bg {
    background:
        radial-gradient(circle at 30% 30%, rgb(0 71 171 / 25%), rgb(0 0 0 / 85%)),
        linear-gradient(120deg, rgb(0 71 171 / 15%), rgb(63 127 214 / 15%), rgb(0 47 115 / 15%));
    background-size: 200% 200%;
    animation: cyber-glow 14s ease-in-out infinite alternate;
}

@keyframes cyber-glow {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 100%;
    }
}

/* ---------------------------------------------------
   OPTIONAL EFFECT #3 — HOLOGRAFIKUS RÁCS
--------------------------------------------------- */

.holo-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgb(0 71 171 / 15%) 1px, transparent 1px),
        linear-gradient(0deg, rgb(0 71 171 / 15%) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: grid-move 20s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes grid-move {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-200px);
    }
}

/* ---------------------------------------------------
   OPTIONAL EFFECT #4 — NEON PULZÁLÁS
--------------------------------------------------- */

.neon-pulse.show {
    animation: neon-pulse 4s ease-in-out infinite;
}

@keyframes neon-pulse {
    0% {
        background-color: rgb(0 47 115 / 55%);
    }

    50% {
        background-color: rgb(0 71 171 / 75%);
    }

    100% {
        background-color: rgb(0 47 115 / 55%);
    }
}

/* ---------------------------------------------------
   OPTIONAL EFFECT #5 — ROTATE + ZOOM + EXPLOSION INTRO
--------------------------------------------------- */

.rotate-zoom img {
    animation:
        explosion-intro 0.6s ease-out forwards,
        rotate-zoom 6s ease-in-out infinite 0.6s;
    transform-origin: center;
}

/* A kép szinte pontszerű méretből nő fel */
@keyframes explosion-intro {
    0% {
        opacity: 0;
        transform: scale(0.05) rotate(-15deg);
        filter: blur(6px);
    }

    60% {
        opacity: 1;
        transform: scale(1.15) rotate(3deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* A folyamatos rotate + zoom animáció */
@keyframes rotate-zoom {
    0% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.05) rotate(2deg);
    }

    50% {
        transform: scale(1.1) rotate(0deg);
    }

    75% {
        transform: scale(1.05) rotate(-2deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ---------------------------------------------------
   RESPONSIVE
--------------------------------------------------- */

@media (width >= 992px) {
    .robot-popup {
        max-width: 960px;
        padding: 2.5rem;
    }

    .robot-carousel {
        min-height: 420px;
    }

    .robot-carousel img {
        max-height: 420px;
    }
}

@media (width <= 767.98px) {
    .hero {
        padding-top: 2rem;
    }
}

/* Language switcher (top-right of hero / next to back-link on legal pages) */
.lang-switcher {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    line-height: 1;
}

.lang-switcher .lang-current {
    font-weight: 600;
    color: #0047ab;
}

.lang-switcher .lang-divider {
    color: #9ca3af;
    margin: 0 0.25rem;
}

/* stylelint-disable-next-line no-descending-specificity */
.lang-switcher a {
    color: #0047ab;
    text-decoration: none;
}

/* stylelint-disable-next-line no-descending-specificity */
.lang-switcher a:hover {
    text-decoration: underline;
}

@media (width <= 575px) {
    .lang-switcher {
        font-size: 0.8rem;
        top: 0.75rem;
        right: 0.75rem;
    }
}

/* Legal pages: switcher floats inline opposite the back-link */
.legal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.legal-header-row .lang-switcher {
    position: static;
}