@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Rajdhani:wght@500;600;700&display=swap');

:root {
    /* Alapszínek */
    --bg-base: #102442; /* A Te mélykéked */
    --bg-left: rgba(255, 69, 0, 0.18);
    --bg-right: rgba(0, 242, 255, 0.22);
    --bg-gradient-split: linear-gradient(90deg, rgba(255, 69, 0, 0.18) 0%, transparent 40%, transparent 60%, rgba(0, 242, 255, 0.22) 100%);
    --bg-global-wash: radial-gradient(circle at 15% 40%, rgba(255, 69, 0, 0.20) 0%, transparent 30%), radial-gradient(circle at 85% 35%, rgba(0, 242, 255, 0.22) 0%, transparent 30%);
    --bg-hero: linear-gradient(135deg, rgba(255, 69, 0, 0.08) 0%, rgba(0, 242, 255, 0.10) 100%);
    --bg-about: linear-gradient(120deg, rgba(255, 69, 0, 0.09) 0%, rgba(16, 36, 66, 0.88) 45%, rgba(0, 242, 255, 0.09) 100%);
    --bg-contact: linear-gradient(225deg, rgba(0, 242, 255, 0.12) 0%, transparent 55%), linear-gradient(45deg, rgba(255, 69, 0, 0.10) 0%, rgba(16, 36, 66, 0.92) 100%);
    --bg-partners: linear-gradient(135deg, rgba(0, 242, 255, 0.10) 0%, rgba(16, 36, 66, 0.92) 50%, rgba(255, 69, 0, 0.10) 100%);
    --bg-footer: linear-gradient(to right, rgba(0, 242, 255, 0.06), rgba(255, 69, 0, 0.08));
    --primary-orange: #FF4500;
    --primary-cyan: #00f2ff;
    --text-white: #f8fafc;
    --text-muted: #94a3b8;
    --color-bg-base: #102442;
    --color-bg-darker: #0c1b33;
    --wash-1: radial-gradient(circle at 10% 10%, rgba(0, 242, 255, 0.12) 0%, transparent 60%),
              radial-gradient(circle at 90% 90%, rgba(255, 69, 0, 0.10) 0%, transparent 60%),
              radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.08) 0%, transparent 65%),
              radial-gradient(circle at 25% 75%, rgba(0, 242, 255, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 75% 25%, rgba(255, 69, 0, 0.06) 0%, transparent 50%);
    --wash-2: radial-gradient(circle at 85% 15%, rgba(0, 242, 255, 0.10) 0%, transparent 65%),
              radial-gradient(circle at 15% 85%, rgba(255, 69, 0, 0.09) 0%, transparent 65%),
              radial-gradient(circle at 0% 40%, rgba(59, 130, 246, 0.07) 0%, transparent 55%),
              radial-gradient(circle at 50% 20%, rgba(0, 242, 255, 0.06) 0%, transparent 45%),
              radial-gradient(circle at 30% 80%, rgba(255, 69, 0, 0.05) 0%, transparent 45%);
    --wash-3: radial-gradient(circle at 50% 100%, rgba(0, 242, 255, 0.10) 0%, transparent 65%),
              radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.08) 0%, transparent 60%),
              radial-gradient(circle at 90% 50%, rgba(255, 69, 0, 0.06) 0%, transparent 65%),
              radial-gradient(circle at 10% 50%, rgba(0, 242, 255, 0.07) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, rgba(255, 69, 0, 0.04) 0%, transparent 50%);
    --wash-4: radial-gradient(circle at 0% 100%, rgba(255, 69, 0, 0.11) 0%, transparent 65%),
              radial-gradient(circle at 100% 0%, rgba(0, 242, 255, 0.10) 0%, transparent 65%),
              radial-gradient(circle at 50% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 55%),
              radial-gradient(circle at 20% 20%, rgba(0, 242, 255, 0.06) 0%, transparent 45%),
              radial-gradient(circle at 80% 80%, rgba(255, 69, 0, 0.05) 0%, transparent 45%);
    
    /* Üveg és Gradiens elemek */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --gradient-orange: linear-gradient(135deg, #FF4500 0%, #ff8c00 100%);
    --gradient-cyan: linear-gradient(135deg, #00f2ff 0%, #0088ff 100%);
    --main-gradient: linear-gradient(to right, #FF4500, #00f2ff);
    --color-accent: #00f2ff;
    --color-accent-bright: #8cfff7;
    --color-accent-glow: rgba(0, 242, 255, 0.32);
    --color-text-primary: #f8fafc;
    --color-card-glass: rgba(255, 255, 255, 0.06);
    --border-color: rgba(255, 255, 255, 0.12);
    --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.20);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
    background-color: var(--bg-base); /* A mélykéked */
    background-image: var(--bg-gradient-split);
    background-attachment: fixed;
    background-size: cover;
    color: var(--text-white); 
    font-family: 'Outfit', sans-serif; 
    overflow-x: hidden;
    line-height: 1.6; 
    position: relative; 
    width: 100%;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--bg-global-wash);
    filter: blur(96px);
    opacity: 0.95;
    pointer-events: none;
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.08), transparent 45%, transparent 55%, rgba(0, 242, 255, 0.08));
    filter: blur(54px);
    opacity: 0.8;
    pointer-events: none;
}

/* ========================================================================== */
/* DARK THEME / AMBIENT WASH OVERRIDES */
/* ========================================================================== */
body, html {
    background-color: var(--color-bg-base) !important;
    color: var(--color-text-primary) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary) !important;
}

p, span:not(.text-accent):not(.req), small {
    color: var(--color-text-muted) !important;
}

.hero-section {
    background-color: var(--color-bg-base) !important;
    background-image: var(--wash-1) !important;
    background-blend-mode: screen !important;
}

#services, #about {
    background-color: var(--color-bg-darker) !important;
    background-image: var(--wash-2) !important;
    background-blend-mode: screen !important;
}

#process {
    background-color: var(--color-bg-base) !important;
    background-image: var(--wash-3) !important;
    background-blend-mode: screen !important;
}

#geometric {
    background-color: var(--color-bg-base) !important;
    background-image: var(--wash-1) !important;
    background-blend-mode: screen !important;
}

#contact, #partners {
    background-color: var(--color-bg-darker) !important;
    background-image: var(--wash-4) !important;
    background-blend-mode: screen !important;
}

.main-footer {
    background-color: #081224 !important;
    background-image: var(--wash-3) !important;
    background-blend-mode: screen !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.feature-box.tech-card, .service-card-pro, .geometric-desc-box, .geo-feature-card, .holo-card, .scanner-interface, .info-item.tech-card, .tech-card-advanced, .partner-card-extra, .cat-header, .cat-body, .service-cat-item, .video-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

.service-card-pro:hover, .geo-feature-card:hover, .holo-card:hover, .info-item.tech-card:hover, .partner-card-extra:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(0, 242, 255, 0.4) !important;
}

.tech-input input, .tech-input textarea {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--color-text-primary) !important;
}

.tech-input input:focus, .tech-input textarea:focus {
    border-color: #00f2ff !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

.tech-input label {
    color: var(--color-text-primary) !important;
}

.navbar {
    background: rgba(16, 36, 66, 0.8) !important;
}

.navbar.scrolled {
    background: rgba(16, 36, 66, 0.98) !important;
}

.nav-menu a {
    color: var(--color-text-primary) !important;
}

.nav-menu a:hover, .nav-menu a.active {
    color: #00f2ff !important;
}

.hamburger span {
    background: var(--color-text-primary) !important;
}

.section-title, .form-header h3, .contact-section h2 {
    color: var(--color-text-primary) !important;
}

.text-accent {
    color: #00f2ff !important;
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.4) !important;
}

/* Drón alakú háttér elemek minden szekcióban */
.hero-section::after {
    content: '';
    position: absolute;
    top: 25%;
    right: 15%;
    width: 150px;
    height: 75px;
    background: linear-gradient(45deg, rgba(0, 242, 255, 0.18), rgba(255, 69, 0, 0.12));
    border-radius: 50% 50% 30% 30%;
    filter: blur(20px);
    opacity: 0.5;
    z-index: -1;
    transform: rotate(10deg);
    pointer-events: none;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 60% 40%, rgba(255, 69, 0, 0.12) 0%, transparent 40%);
    filter: blur(110px);
    z-index: -2;
    pointer-events: none;
}

#services::after {
    content: '';
    position: absolute;
    bottom: 20%;
    left: 10%;
    width: 100px;
    height: 50px;
    background: linear-gradient(-30deg, rgba(255, 69, 0, 0.15), rgba(0, 242, 255, 0.10));
    border-radius: 50% 50% 20% 20%;
    filter: blur(25px);
    opacity: 0.4;
    z-index: -1;
    transform: rotate(-20deg);
    pointer-events: none;
}

#services::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 70%, rgba(0, 242, 255, 0.10) 0%, transparent 35%);
    filter: blur(85px);
    z-index: -2;
    pointer-events: none;
}

#about::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 20%;
    width: 120px;
    height: 60px;
    background: linear-gradient(60deg, rgba(0, 242, 255, 0.16), rgba(168, 85, 247, 0.10));
    border-radius: 50% 50% 25% 25%;
    filter: blur(18px);
    opacity: 0.45;
    z-index: -1;
    transform: rotate(25deg);
    pointer-events: none;
}

#about::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.08) 0%, transparent 45%);
    filter: blur(95px);
    z-index: -2;
    pointer-events: none;
}

#process::after {
    content: '';
    position: absolute;
    bottom: 30%;
    right: 20%;
    width: 140px;
    height: 70px;
    background: linear-gradient(-45deg, rgba(255, 69, 0, 0.14), rgba(0, 242, 255, 0.11));
    border-radius: 50% 50% 28% 28%;
    filter: blur(22px);
    opacity: 0.5;
    z-index: -1;
    transform: rotate(-15deg);
    pointer-events: none;
}

#process::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 69, 0, 0.09) 0%, transparent 50%);
    filter: blur(75px);
    z-index: -2;
    pointer-events: none;
}

#contact::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 15%;
    width: 110px;
    height: 55px;
    background: linear-gradient(30deg, rgba(0, 242, 255, 0.17), rgba(59, 130, 246, 0.12));
    border-radius: 50% 50% 22% 22%;
    filter: blur(16px);
    opacity: 0.4;
    z-index: -1;
    transform: rotate(35deg);
    pointer-events: none;
}

#contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(0, 242, 255, 0.11) 0%, transparent 40%);
    filter: blur(100px);
    z-index: -2;
    pointer-events: none;
}

#partners::after {
    content: '';
    position: absolute;
    bottom: 25%;
    right: 10%;
    width: 130px;
    height: 65px;
    background: linear-gradient(-60deg, rgba(255, 69, 0, 0.16), rgba(0, 242, 255, 0.13));
    border-radius: 50% 50% 26% 26%;
    filter: blur(19px);
    opacity: 0.45;
    z-index: -1;
    transform: rotate(-25deg);
    pointer-events: none;
}

#partners::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 60%, rgba(255, 69, 0, 0.10) 0%, transparent 45%);
    filter: blur(90px);
    z-index: -2;
    pointer-events: none;
}

#geometric::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 25%;
    width: 90px;
    height: 45px;
    background: linear-gradient(75deg, rgba(168, 85, 247, 0.14), rgba(0, 242, 255, 0.09));
    border-radius: 50% 50% 18% 18%;
    filter: blur(14px);
    opacity: 0.4;
    z-index: -1;
    transform: rotate(40deg);
    pointer-events: none;
}

#geometric::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 40% 60%, rgba(0, 242, 255, 0.08) 0%, transparent 35%);
    filter: blur(105px);
    z-index: -2;
    pointer-events: none;
}

.main-footer::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 30%;
    width: 160px;
    height: 80px;
    background: linear-gradient(90deg, rgba(0, 242, 255, 0.15), rgba(255, 69, 0, 0.10));
    border-radius: 50% 50% 32% 32%;
    filter: blur(24px);
    opacity: 0.5;
    z-index: -1;
    transform: rotate(5deg);
    pointer-events: none;
}

.main-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 75%, rgba(255, 69, 0, 0.09) 0%, transparent 50%);
    filter: blur(115px);
    z-index: -2;
    pointer-events: none;
}

/* ==========================================================================
   HÁTTÉRBEN LEBEGŐ TECH SZIMBÓLUMOK (Premium Vízjel Hatás)
   ========================================================================== */

/* Komplex animáció: Véletlenszerű 8-as alakzatú sodródás a háttérben */
@keyframes abstractFloat {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(12vw, 8vh) rotate(15deg) scale(1.05); }
    50% { transform: translate(5vw, -12vh) rotate(-10deg) scale(0.95); }
    75% { transform: translate(-10vw, 6vh) rotate(20deg) scale(1.02); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* Alap stílus minden szimbólumra */
.section > .container::before, 
.hero-section > .container::before, 
.main-footer > .container::before {
    font-family: "bootstrap-icons";
    position: absolute;
    font-size: 35rem; /* Hatalmas, szinte absztrakt méret */
    color: rgba(255, 255, 255, 0.015); /* Nagyon finom, alig látható (1.5% opacity) */
    z-index: -1; /* Tartalom mögé, de a glow-ok elé */
    pointer-events: none; /* Ne zavarjon a kattintásokban */
    animation: abstractFloat 25s ease-in-out infinite alternate;
    top: 10%;
    left: 10%;
    line-height: 1;
}

/* SZEKCIÓ-SPECIFIKUS IKONOK ÉS POZÍCIÓK (Bootstrap Unicode kódok) */

/* Hero: Drón */
.hero-section > .container::before { 
    content: '\F330'; /* bi-drone */
    top: -5%; left: 40%; 
    animation-duration: 30s; 
    color: rgba(0, 242, 255, 0.02); /* Finom cián beütés */
}

/* Szolgáltatások: 3D Rétegek / Modellezés */
#services > .container::before { 
    content: '\F44F'; /* bi-layers-fill */
    top: 20%; left: -10%; 
    animation-duration: 25s; 
    animation-direction: alternate-reverse; 
}

/* Folyamat: Fogaskerekek / Feldolgozás */
#process > .container::before { 
    content: '\F3E5'; /* bi-gear-fill */
    top: 10%; left: 60%; 
    animation-duration: 35s; 
    color: rgba(255, 69, 0, 0.015); /* Finom narancs beütés */
}

/* Referenciák: Kamera */
#references > .container::before { 
    content: '\F22A'; /* bi-camera-video-fill */
    top: -5%; left: 20%; 
    animation-duration: 20s; 
}

/* Geometric: Bounding Box (Mérés/Geometria) */
#geometric > .container::before { 
    content: '\F1C6'; /* bi-bounding-box-circles */
    top: 30%; left: 50%; 
    animation-duration: 28s; 
    animation-direction: alternate-reverse;
    color: rgba(0, 242, 255, 0.02);
}

/* Rólunk: CPU / Mesterséges Intelligencia */
#about > .container::before { 
    content: '\F7F9'; /* bi-cpu-fill */
    top: 15%; left: 0%; 
    animation-duration: 40s; 
}

/* Kapcsolat: Papírrepülő / Küldés */
#contact > .container::before { 
    content: '\F51A'; /* bi-send-fill */
    top: 20%; left: 50%; 
    animation-duration: 22s; 
    color: rgba(255, 69, 0, 0.02);
}

/* Partnerek: Hálózat / Diagram */
#partners > .container::before { 
    content: '\F313'; /* bi-diagram-3-fill */
    top: -10%; left: -5%; 
    animation-duration: 32s; 
    animation-direction: alternate-reverse;
}

/* Footer: Földgömb / Globális */
.main-footer > .container::before { 
    content: '\F412'; /* bi-globe */
    top: -30%; left: 60%; 
    animation-duration: 26s; 
    color: rgba(0, 242, 255, 0.015);
}

/* --- MOBIL OPTIMALIZÁCIÓ --- */
/* Mobilon lekicsinyítjük a szimbólumokat, hogy ne foglalják el az egész kijelzőt */
@media screen and (max-width: 768px) {
    .section > .container::before, 
    .hero-section > .container::before, 
    .main-footer > .container::before {
        font-size: 20rem;
    }
}
/* Scroll To Top Button */
#scrollTopBtn {
    display: none; /* Alapból rejtett */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    border: none;
    outline: none;
    background-color: var(--color-accent);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 1.2rem;
    box-shadow: 0 0 15px var(--color-accent-glow);
    transition: 0.3s;
}

#scrollTopBtn:hover {
    background-color: var(--color-accent-bright);
    transform: translateY(-5px);
    box-shadow: 0 0 25px var(--color-accent-glow);
}

/* Navigáció Logo & Szlogen */
.logo-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.logo-main {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}
.logo-slogan {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    letter-spacing: 1px;
    margin-top: 4px;
    text-transform: uppercase;
    font-family: var(--font-body);
}

/* Szolgáltatás Kártyák Színes Keretei */


/*KÁRTYA SZÍNEK (Keretek) */
.service-card-pro.industry { border-top: 4px solid #00e5ff; }
.service-card-pro.forestry { border-top: 4px solid #00c853; }
.service-card-pro.damage { border-top: 4px solid #ff3d00; }
.service-card-pro.media { border-top: 4px solid #aa00ff; }
/* IPAR (Cián/Tech Kék) */
.service-card-pro.industry { border-top: 3px solid #00e5ff; }
.service-card-pro.industry .icon-wrapper { color: #00e5ff; border-color: rgba(0, 229, 255, 0.3); }
.service-card-pro.industry .card-corner { border-color: #00e5ff; }
.service-card-pro.industry:hover { box-shadow: 0 15px 40px rgba(0, 229, 255, 0.2); border-color: #00e5ff; }

/* ERDŐ (Zöld) */
.service-card-pro.forestry { border-top: 3px solid #00ff88; }
.service-card-pro.forestry .icon-wrapper { color: #00ff88; border-color: rgba(0, 255, 136, 0.3); }
.service-card-pro.forestry .card-corner { border-color: #00ff88; }
.service-card-pro.forestry:hover { box-shadow: 0 15px 40px rgba(0, 255, 136, 0.2); border-color: #00ff88; }

/* KÁR (Piros) */
.service-card-pro.damage { border-top: 3px solid #ff3333; }
.service-card-pro.damage .icon-wrapper { color: #ff3333; border-color: rgba(255, 51, 51, 0.3); }
.service-card-pro.damage .card-corner { border-color: #ff3333; }
.service-card-pro.damage:hover { box-shadow: 0 15px 40px rgba(255, 51, 51, 0.2); border-color: #ff3333; }

/* MÉDIA (Lila) */
.service-card-pro.media { border-top: 3px solid #bf00ff; }
.service-card-pro.media .icon-wrapper { color: #bf00ff; border-color: rgba(191, 0, 255, 0.3); }
.service-card-pro.media .card-corner { border-color: #bf00ff; }
.service-card-pro.media:hover { box-shadow: 0 15px 40px rgba(191, 0, 255, 0.2); border-color: #bf00ff; }

/* Drón ikon mérete a hologramban */
.drone-shape {
    font-size: 8rem;
    display: block;
    /* ITT A VÁLTOZÁS: Fehéres-kékből indul (#e0efff) és a mély elektromos kékbe tart */
    background: linear-gradient(to bottom, #e0efff 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 1; /* Teljes láthatóság */
    filter: drop-shadow(0 0 20px var(--color-accent)); /* Erősebb ragyogás */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body { 
    background-color: var(--bg-dark); /* Ez a közös, nagyon sötétkék alap */
    color: var(--text-white); 
    font-family: 'Outfit', sans-serif; 
    overflow-x: hidden;
    line-height: 1.6; 
    position: relative; 
    width: 100%;
}

/* Háttér Tech Grid - SÖTÉT RÁCS VILÁGOS ALAPON */
.tech-grid-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background-image: 
        linear-gradient(rgba(0, 102, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 102, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}
h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-primary); }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* Kiemelt szöveg */
.text-accent { 
    color: var(--color-accent); 
    text-shadow: none; /* Világos háttéren nem kell glow a szövegnek */
    font-weight: 800;
}
/* --- Tech Dekorációs Elemek --- */
.tech-divider { width: 60px; height: 3px; background: var(--color-accent); margin-top: 15px; position: relative; }
.tech-divider::after { content: ''; position: absolute; right: -10px; top: -3px; width: 10px; height: 10px; background: var(--color-accent); }
.tech-divider.center { margin-left: auto; margin-right: auto; }

.corner-bracket { border-color: var(--color-accent); opacity: 0.5; }
.corner-bracket.top-left { top: 0; left: 0; border-right: none; border-bottom: none; }
.corner-bracket.bottom-right { bottom: 0; right: 0; border-left: none; border-top: none; }

/* --- Navigáció (Javított) --- */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px; /* Fix magasság, hogy ne ugráljon */
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95); /* Erősebb fedés */
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-color);
    transition: 0.3s;
    display: flex; /* Biztosítjuk, hogy a tartalma középre rendezhető legyen */
    align-items: center;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.nav-container {
    display: flex; /* Ez tartja a Logót és a Menüt egymás mellett */
    justify-content: space-between; /* Széttolja őket a két szélre */
    align-items: center; /* Függőlegesen középre igazít */
    width: 100%;
    height: 100%;
}

/* --- Logo Stílusok --- */
.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    /* Fontos: megakadályozza, hogy összenyomódjon */
    flex-shrink: 0; 
}

.logo-wrapper {
    display: flex;
    flex-direction: column; /* Egymás alá rakja a nevet és a szlogent */
    justify-content: center;
    line-height: 1.2; /* Szorosabb sorköz a név és szlogen közt */
}

.logo-main {
    display: flex;
    align-items: center;
    gap: 10px; /* Távolság az ikon és a szöveg között */
}

.logo-text {
    font-size: 1.8rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1; /* Hogy ne tolja el a magasságot */
}

.logo-icon {
    font-size: 1.8rem;
    color: var(--color-accent);
    display: flex; /* Hogy pontosan középen legyen */
}

.logo-slogan {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: var(--font-body);
    font-weight: 600;
    margin-top: 2px;
}

/* --- Menü Stílusok (Desktop) --- */
.nav-menu {
    display: flex; /* Ez rakja a menüpontokat egymás mellé */
    gap: 30px; /* Távolság a menüpontok között */
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    display: flex;
    align-items: center;
}

.nav-menu a {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap; /* Ne törjön sorba a szöveg */
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--color-accent);
}

/* Gomb a menüben */
.nav-btn {
    background: var(--color-accent);
    color: white !important;
    padding: 10px 25px;
    border-radius: 4px;
    box-shadow: 0 5px 15px var(--color-accent-glow);
    transition: 0.3s;
}

.nav-btn:hover {
    background: var(--color-accent-bright);
    transform: translateY(-2px);
}

/* Hamburger (Desktopon rejtve) */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--color-text-primary);
    border-radius: 2px;
    transition: 0.3s;
}

/* --- RESPONSIVE JAVÍTÁS (Mobil) --- */
@media screen and (max-width: 992px) {
    /* Mobilon a logó és a hamburger egymás mellett, a menü eltűnik */
    .nav-container {
        padding: 0 20px;
    }

    .hamburger {
        display: flex; /* Mobilon megjelenik */
        z-index: 1100;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Képernyőn kívül */
        width: 100%; /* Vagy 80% */
        height: 100vh;
        background: #ffffff; /* Fehér háttér mobilon */
        flex-direction: column; /* Egymás alá */
        justify-content: center;
        transition: 0.4s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }

    .nav-menu.active {
        right: 0; /* Beúszik */
    }

    .nav-menu li {
        margin: 20px 0;
    }
    
    .nav-menu a {
        font-size: 1.2rem;
        color: #0f172a;
    }
}
/* Hamburger (Sötét színű legyen a világos navon) */
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 6px; }
.hamburger span { width: 25px; height: 2px; background: var(--color-text-primary); transition: 0.3s; }
/* --- Hero Section (Dark & Tech) --- */
/* --- Hero Section (Dark & Tech) --- */
.hero-section {
    min-height: 100vh; display: flex; align-items: center; padding-top: 80px;
    position: relative; overflow: hidden;
    background-color: var(--color-bg-base);
    background-image: var(--wash-1);
    background-blend-mode: screen;
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.35);
} 
/* Hero HUD Overlay */
.hero-hud-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.hud-line { position: absolute; left: 50%; width: 80%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-accent-glow), transparent); transform: translateX(-50%); }
.hud-line.top { top: 15%; } .hud-line.bottom { bottom: 15%; }
.hud-crosshair { position: absolute; color: var(--color-accent); opacity: 0.3; font-size: 1.5rem; }
.top-left { top: 5%; left: 5%; } .bottom-right { bottom: 5%; right: 5%; }

.hero-content { display: flex; align-items: center; justify-content: space-between; gap: 50px; position: relative; z-index: 2; }
.hero-text { max-width: 600px; }
.hero-text h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 20px; color: var(--text-white); text-shadow: 0 0 22px rgba(0, 242, 255, 0.16); }
.hero-text p { font-size: 1.2rem; color: rgba(248, 250, 252, 0.82); margin-bottom: 30px; max-width: 500px; }
/* Badge Tech - Világos verzió */
.badge-tech {
    display: inline-flex; align-items: center; gap: 10px; padding: 5px 15px; 
    background: rgba(0, 102, 255, 0.05); border: 1px solid var(--color-accent);
    color: var(--color-accent); font-weight: 700; font-size: 0.8rem;
    text-transform: uppercase; margin-bottom: 25px; border-radius: 20px;
}

/* --- HERO VISUAL (DRÓN & HOLOGRAM VILÁGOS ALAPON) --- */
.hero-visual {
    flex: 1; display: flex; justify-content: center; align-items: center; height: 500px; perspective: 1000px;
}
.hologram-projector { position: relative; width: 400px; height: 400px; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; }

/* Gyűrűk - Sötétebbek kellenek, hogy látsszanak */
.holo-base-ring {
    position: absolute; border-radius: 50%;
    border: 2px solid var(--color-accent); /* Kék keret */
    opacity: 0.3; transform: rotateX(75deg);
}
.holo-base-ring.outer { width: 80%; height: 80%; border-style: dashed; animation: holoRotateRight 25s linear infinite; }
.holo-base-ring.inner { width: 50%; height: 50%; border-color: #0f172a; opacity: 0.2; animation: holoRotateLeft 15s linear infinite; }

/* DRÓN IKON - SÖTÉT/FÉMES SZÍNŰRE VÁLTVA */
.floating-holo-drone {
    position: absolute; transform: translateY(-80px);
    animation: holoFloat 5s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(0, 50, 100, 0.2)); /* Lágy árnyék a földön */
    z-index: 10;
}
.drone-shape {
    font-size: 9rem; display: block;
    /* Fentről (Kék) -> Lefelé (Sötétkék) Gradiens */
    background: linear-gradient(to bottom, #0066ff, #002244);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    opacity: 1;
}

.holo-scanline {
    position: absolute; top: 0; left: 0; width: 100%; height: 5px;
    background: var(--color-accent); /* Kék lézer */
    opacity: 0.5; animation: droneScan 3s ease-in-out infinite;
    box-shadow: 0 0 15px var(--color-accent);
}

/* Felfelé szálló részecske effekt */
.holo-particles {
    position: absolute;
    bottom: 20%;
    width: 100px;
    height: 150px;
    background-image: 
        radial-gradient(circle, var(--color-accent-bright) 2px, transparent 2px),
        radial-gradient(circle, var(--color-accent) 1px, transparent 1px);
    background-size: 20px 20px, 15px 15px;
    background-position: 0 0, 10px 10px;
    opacity: 0.3;
    mask-image: linear-gradient(to top, white, transparent);
    animation: particlesUp 5s linear infinite;
}

/* --- ANIMÁCIÓK --- */
@keyframes holoRotateRight {
    from { transform: rotateX(75deg) rotateZ(0deg); }
    to { transform: rotateX(75deg) rotateZ(360deg); }
}

@keyframes holoRotateLeft {
    from { transform: rotateX(75deg) rotateZ(360deg); }
    to { transform: rotateX(75deg) rotateZ(0deg); }
}

@keyframes holoFloat {
    0%, 100% { transform: translateY(-80px); opacity: 0.8; }
    50% { transform: translateY(-110px); opacity: 1; } /* Feljebb megy és kifényesedik */
}

@keyframes droneScan {
    0%, 100% { top: 0%; opacity: 0; }
    50% { opacity: 1; }
    90% { top: 100%; opacity: 0; }
}

@keyframes particlesUp {
    from { background-position: 0 0, 10px 10px; }
    to { background-position: 0 -100px, 10px -90px; }
}.drone-hud-visual {
    width: 450px; height: 450px; border: 2px solid var(--color-accent-glow);
    border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, rgba(74, 111, 165, 0.05) 0%, transparent 60%);
    box-shadow: 0 0 50px rgba(74, 111, 165, 0.1);
    animation: hudRotate 20s linear infinite;
}
.drone-hud-visual::before, .drone-hud-visual::after {
    content: ''; position: absolute; border: 1px dashed var(--color-accent-glow); border-radius: 50%;
}
.drone-hud-visual::before { width: 70%; height: 70%; animation: hudRotate 15s linear infinite reverse; }
.drone-hud-visual::after { width: 40%; height: 40%; }

.drone-model-container { z-index: 5; animation: hoverDrone 4s infinite ease-in-out; }
.drone-icon-main { font-size: 6rem; color: var(--color-text-primary); filter: drop-shadow(0 0 15px var(--color-accent)); }

.radar-sweep {
    position: absolute; width: 50%; height: 2px; background: var(--color-accent-bright);
    top: 50%; left: 50%; transform-origin: left center;
    animation: radarSweep 4s infinite linear; opacity: 0.7;
    box-shadow: 0 0 15px var(--color-accent-bright);
}
.hud-data-points span.hp {
    position: absolute; font-family: monospace; font-size: 0.85rem; color: var(--color-accent-bright); font-weight: 700;
    background: rgba(0,0,0,0.5); padding: 2px 5px; border: 1px solid var(--color-accent-glow);
}
.hp-1 { top: 20%; left: 15%; } .hp-2 { top: 25%; right: 10%; } .hp-3 { bottom: 20%; left: 10%; } .hp-4 { bottom: 15%; right: 20%; }
.hp.mode { color: #22c55e; border-color: #22c55e; }

@keyframes hoverDrone { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-15px) scale(1.05); } }
@keyframes radarSweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes hudRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Sections Common --- */
.section { padding: 100px 0; position: relative; }
/* Ezt keresd: .bg-darker */
.bg-darker { 
    background-color: rgba(16, 36, 66, 0.86);
    background-image: var(--bg-about);
    background-blend-mode: screen;
}
.section-header { margin-bottom: 70px; max-width: 700px; margin-left: auto; margin-right: auto; }
.section-header h2 { font-size: 2.5rem; margin-bottom: 15px; color: var(--text-white); }
.section-header p { color: rgba(248, 250, 252, 0.75); font-size: 1.1rem; }
.feature-box.tech-card {
    background: white; /* Fehér kártyák */
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow-soft);
    padding: 30px; border-radius: 8px; position: relative; transition: 0.3s;
}
.feature-box.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 60, 150, 0.15);
    border-color: var(--color-accent);
}
/* --- Tech Cards (Általános kártya stílus) --- */
.tech-card {
    background: var(--color-card-glass); border: 1px solid var(--border-color);
    backdrop-filter: blur(10px); padding: 30px; border-radius: 4px;
    position: relative; transition: 0.3s;
}
.tech-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2), inset 0 0 20px var(--color-accent-glow);
    transform: translateY(-5px);
}

/* --- About --- */
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-text p { color: var(--color-text-muted); margin-bottom: 1rem; }
.tech-subtitle { color: var(--color-accent-bright); font-family: monospace; letter-spacing: 2px; }

.features-grid { display: grid; gap: 20px; margin-top: 30px; }
.feature-box { display: flex; gap: 20px; align-items: flex-start; }
.feature-icon { font-size: 2.5rem; color: var(--color-accent); margin-bottom: 20px; }
.feature-box h4 { margin-bottom: 5px; }
.feature-box p { color: var(--color-text-muted); font-size: 0.95rem; }

.tech-frame {
    position: relative; border: 1px solid var(--border-color); padding: 10px;
    background: rgba(255,255,255,0.02);
}
.image-placeholder {
    width: 100%; height: 450px; background: #1a202c;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--color-text-muted); position: relative; overflow: hidden;
    border: 1px dashed var(--color-accent-glow);
}
.image-placeholder i { font-size: 4rem; margin-bottom: 15px; color: var(--color-accent); }
.tech-readout {
    position: absolute; bottom: 10px; left: 10px; font-family: monospace;
    font-size: 0.8rem; color: var(--color-accent-bright);
}
.scan-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 5px;
    background: var(--color-accent-bright); opacity: 0.5;
    box-shadow: 0 0 15px var(--color-accent-bright);
    animation: scanDown 3s infinite linear;
}
@keyframes scanDown { 0% { top: -5%; } 100% { top: 105%; } }

/* --- Process (Folyamat) --- */
.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; position: relative; }
.flight-path-line {
    position: absolute; top: 60px; left: 10%; width: 80%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-accent-glow) 0, var(--color-accent-glow) 10px, transparent 10px, transparent 20px);
    z-index: 0; pointer-events: none;
}

.step-card { text-align: center; z-index: 1; background: var(--color-bg-main); border-top: 3px solid var(--color-accent); }
.step-number {
    font-size: 3rem; font-weight: 700; color: rgba(255,255,255,0.05);
    position: absolute; top: 10px; right: 20px; font-family: var(--font-heading);
}
.step-icon {
    font-size: 2.5rem; color: var(--color-accent-bright); margin-bottom: 20px;
    display: inline-block; background: var(--color-bg-secondary); padding: 20px;
    border-radius: 50%; border: 2px solid var(--color-accent-glow);
    position: relative; z-index: 2;
}
.step-card p { color: var(--color-text-muted); }

/* --- Services Grid (Advanced Tech Cards) --- */
.circuit-pattern {
    position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10h80v80H10z' fill='none' stroke='%234A6FA5' stroke-width='1'/%3E%3Cpath d='M30 10v20h-20M70 10v20h20M30 90v-20h-20M70 90v-20h20' fill='none' stroke='%234A6FA5' stroke-width='1'/%3E%3C/svg%3E");
}

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
/* De a form kártya legyen sötét, profi */
/* --- CONTACT FORM (Light Tech Design) --- */
/* A form befoglaló doboza */
.tech-card-advanced {
    /* ITT A VÁLTOZÁS: Erősebb kék jelenlét */
    /* Egy nagyon tiszta, jeges kékből (#eef6ff) indulunk egy markánsabb világoskékbe (#bfdbfe) */
    background: linear-gradient(135deg, #eef6ff 0%, #bfdbfe 100%);
    
    /* A keret is legyen ehhez illő kék */
    border: 1px solid rgba(147, 197, 253, 0.9);
    
    /* Árnyék: Kékes ragyogás */
    box-shadow: 0 25px 60px -10px rgba(59, 130, 246, 0.2);
        
    border-radius: 16px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

/* Dekorációs rács (kicsit sötétítünk rajta, hogy látsszon a kéken) */
.tech-card-advanced::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 0;
}



.sub-option:hover {
    color: var(--color-accent); /* Hoverre kékül a szöveg */
    background: rgba(37, 99, 235, 0.05);
}

/* --- ŰRLAP JAVÍTÁS (FIX) --- */

/* 1. CÍMKÉK LÁTHATÓSÁGA */
/* Kényszerítjük, hogy a kártyán belül minden címke sötétkék legyen */
.tech-card-advanced label {
    color: var(--color-text-primary) !important; /* Sötétkék (#0f172a) */
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tech-card-advanced label small {
    color: var(--color-accent); /* A kis szöveg legyen kék */
    font-weight: 500;
    font-size: 0.8rem;
    opacity: 0.9;
}

.tech-card-advanced label i {
    color: var(--color-accent);
    font-size: 1.1rem;
}



.sub-option:hover {
    color: var(--color-accent);
    padding-left: 5px;
}

/* Checkboxok stílusa (Accent szín) */
input[type="checkbox"] {
    accent-color: var(--color-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* --- KÜLDÉS GOMB --- */
.button-glow {
    margin-top: 20px;
    padding: 16px;
    font-size: 1.1rem;
    /* A korábban beállított szép kék gradiens */
    background: linear-gradient(135deg, var(--color-accent) 0%, #60a5fa 100%);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
    border: none;
    color: white !important;
    position: relative; z-index: 1;
}

.button-glow:hover {
    background: linear-gradient(135deg, #1e40af 0%, var(--color-accent) 100%);
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.5);
    transform: translateY(-2px);
}

/* --- SAROK DEKORÁCIÓK --- */
.tech-card-advanced .corner-bracket {
    border-color: var(--color-accent);
    width: 20px;
    height: 20px;
    opacity: 0.5;
}
.service-icon { font-size: 3rem; color: var(--color-accent-bright); margin-bottom: 25px; }
.tech-list { margin: 25px 0; }
.tech-list li { margin-bottom: 12px; display: flex; gap: 10px; align-items: center; font-size: 0.95rem; color: var(--color-text-muted); }
.tech-list i { color: var(--color-accent); font-size: 0.8rem; }

.service-link {
    display: inline-flex; align-items: center; color: var(--color-accent-bright);
    font-weight: 700; font-family: var(--font-heading); text-transform: uppercase;
    letter-spacing: 1px; transition: 0.3s;
}
.service-link i { transition: 0.3s; font-size: 1.2rem; }
.service-link:hover { color: var(--color-text-primary); }
.service-link:hover i { transform: translateX(5px); color: var(--color-accent); }

/* --- References --- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.video-card { cursor: pointer; padding: 5px; }
.video-thumbnail {
    width: 100%; aspect-ratio: 16/9; background: #111; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: white; transition: 0.3s;
    position: relative; overflow: hidden; border: 1px solid var(--border-color);
}
.video-thumbnail::before { content: ''; position: absolute; inset: 0; background: rgba(74, 111, 165, 0.2); opacity: 0; transition: 0.3s; }
.video-card:hover .video-thumbnail::before { opacity: 1; }
.video-card:hover .video-thumbnail { border-color: var(--color-accent-bright); }

.play-icon { font-size: 3.5rem; margin-bottom: 15px; color: var(--color-accent-bright); z-index: 2; transition: 0.3s; }
.video-card:hover .play-icon { transform: scale(1.1); text-shadow: 0 0 20px var(--color-accent); }
.video-info { text-align: center; z-index: 2; }
.video-info span { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: 5px; }
.video-info small { color: var(--color-accent-bright); font-family: monospace; }

.contact-section {
    padding: 100px 0;
    position: relative;
    background-color: var(--color-bg-darker);
    background-image: var(--wash-4);
    background-blend-mode: screen;
    color: var(--text-white); /* Ne felejtsd, a sötéten fehér szöveg kell! */
} 
/* Címek és bekezdések színezése */
.contact-section h2 {
    color: var(--text-white);
    font-weight: 800;
}

.contact-section p {
    color: rgba(248, 250, 252, 0.85); /* Világosabb, fehérebb szöveg a sötét háttéren */
    font-weight: 500;
}
/* A háttérben lévő tervrajz (Blueprint) láthatósága */
.drone-blueprint-bg {
    position: absolute; top: 50%; left: 0; width: 50%; height: 80%;
    /* Sötétkék vonalak, hogy látsszon a világos háttéren */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z" fill="none" stroke="rgba(15, 23, 42, 0.1)" stroke-width="1"/></svg>');
    background-repeat: no-repeat; 
    background-position: center left; 
    opacity: 0.6; 
    pointer-events: none; 
    transform: translateY(-50%);
    z-index: 0;
}

/* Layout igazítás */
.contact-layout { 
    display: grid; 
    grid-template-columns: 1fr 1.5fr; 
    gap: 60px; 
    position: relative; 
    z-index: 1; /* Hogy a tartalom a blueprint felett legyen */
}

/* Reszponzív módosítás */
@media screen and (max-width: 992px) {
    .contact-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .drone-blueprint-bg { display: none; }
}

.contact-section h2, .contact-section p { color: var(--text-white); }

.contact-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; }
.contact-info p { color: var(--color-text-muted); margin-bottom: 2rem; }
.contact-items-wrapper { display: grid; gap: 20px; }
.info-item { display: flex; gap: 20px; align-items: center; padding: 20px; }
.info-item i { font-size: 1.8rem; color: var(--color-accent-bright); }
.info-item h4 { margin-bottom: 5px; font-size: 1rem; }
.info-item a, .info-item p { color: var(--color-text-muted); font-size: 0.9rem; display: block; }
.info-item a:hover { color: var(--color-accent-bright); }
.small-link { font-size: 0.8rem !important; opacity: 0.8; }

.form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.form-header h3 { margin: 0; display: flex; align-items: center; gap: 10px; }
.status-light { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.pulse-green { background: #22c55e; color: #22c55e; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.tech-input { position: relative; margin-bottom: 25px; }
.tech-input label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; color: var(--color-accent-bright); }
.tech-input input, .tech-input select, .tech-input textarea {
    width: 100%; padding: 12px 15px; border: 1px solid var(--border-color);
    background: rgba(0,0,0,0.2); color: var(--color-text-primary);
    font-family: var(--font-body); font-size: 1rem; transition: 0.3s;
}
.tech-input input:focus, .tech-input select:focus, .tech-input textarea:focus { outline: none; border-color: var(--color-accent); background: rgba(0,0,0,0.4); }
.input-border { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--color-accent); transition: 0.4s; }
.tech-input input:focus ~ .input-border, .tech-input select:focus ~ .input-border, .tech-input textarea:focus ~ .input-border { width: 100%; }

.tech-input input, .tech-input textarea {
    /* Félig áttetsző fehér/kék alap - sokkal szebb, mint a sima szürke */
    background: rgba(255, 255, 255, 0.6);
    
    /* Finom kék keret */
    border: 1px solid rgba(147, 197, 253, 0.5); 
    
    border-radius: 8px;
    padding: 12px 15px;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-weight: 500;
    transition: all 0.3s ease;
    
    /* Finom belső árnyék a mélységért */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.main-footer { 
    padding-top: 80px; 
    font-size: 0.9rem; 
    position: relative; 
    color: var(--text-white); 
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #081224;
    background-image: var(--wash-3);
    background-blend-mode: screen;
}

/* Felső dekorációs csík */
.footer-top-deco {
    position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    /* Kék-Fehér csíkozás */
    background: repeating-linear-gradient(90deg, var(--color-accent) 0, var(--color-accent) 30px, transparent 30px, transparent 60px);
    opacity: 0.5;
}

.footer-content { 
    display: grid; 
    grid-template-columns: 1.5fr 1fr 1fr 1fr; 
    gap: 40px; 
    padding-bottom: 50px; 
}

.footer-logo { margin-bottom: 20px; }

/* Szövegszínek javítása a világos háttérhez */
.brand-col p { 
    color: #475569; /* Sötétszürke */
    font-weight: 500;
}

.footer-col h4 { 
    color: #0f172a; /* Sötétkék cím */
    margin-bottom: 25px; 
    font-size: 1.1rem; 
    display: flex; align-items: center; gap: 10px; 
    font-weight: 800;
}

.footer-links li { margin-bottom: 12px; }

.footer-links a { 
    color: #334155; /* Sötétkék linkek */
    transition: 0.3s; 
    display: inline-block; 
    font-weight: 500;
}

.footer-links a:hover { 
    color: var(--color-accent); 
    transform: translateX(5px); 
    text-shadow: 0 0 1px var(--color-accent);
}

/* Közösségi ikonok */
.social-links { display: flex; gap: 10px; margin-bottom: 30px; }

.social-btn {
    width: 42px; height: 42px; 
    /* Fehér alap az ikonoknak */
    background: #ffffff; 
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(59, 130, 246, 0.2); 
    border-radius: 8px;
    color: var(--color-accent); 
    transition: 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.social-btn:hover { 
    background: var(--color-accent); 
    color: white; 
    border-color: var(--color-accent); 
    box-shadow: 0 5px 15px var(--color-accent-glow); 
    transform: translateY(-3px);
}

/* Alsó sáv */
.footer-bottom { 
    text-align: center; 
    padding: 25px 0; 
    /* Kicsit sötétebb kék a záráshoz */
    background: rgba(37, 99, 235, 0.1); 
    color: #1e293b; 
    border-top: 1px solid rgba(255, 255, 255, 0.3); 
    font-family: monospace; 
    font-weight: 600;
}
/* --- Animációk --- */
[data-animate] { opacity: 0; transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
[data-animate="fade-up"] { transform: translateY(40px); }
[data-animate="slide-right"] { transform: translateX(-40px); }
[data-animate="zoom-in"] { transform: scale(0.9); filter: blur(5px); }
[data-animate].animated { opacity: 1; transform: none; filter: none; }

/* --- Responsive --- */
@media screen and (max-width: 992px) {
    h1 { font-size: 3rem; }
    .hero-content, .split-layout, .contact-layout { grid-template-columns: 1fr; gap: 50px; text-align: center; }
    .hero-content { flex-direction: column-reverse; }
    .hero-buttons, .features-grid { justify-content: center; }
    .feature-box { text-align: left; padding: 25px; }
    .info-item { justify-content: flex-start; text-align: left; }
    .footer-content { grid-template-columns: 1fr 1fr; }
    .flight-path-line { display: none; }
    .drone-blueprint-bg { display: none; }
    
    .hamburger { display: flex; z-index: 1100; }
    .nav-menu {
        position: fixed; top: 0; right: -100%; width: 80%; height: 100vh;
        background: var(--color-bg-secondary); flex-direction: column; align-items: center;
        justify-content: center; transition: 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        border-left: 1px solid var(--border-color);
    }
    .nav-menu.active { right: 0; box-shadow: -10px 0 30px rgba(0,0,0,0.5); }
    .nav-menu li { margin: 20px 0; }
    .nav-menu a { font-size: 1.2rem; }
    
    /* Hamburger animáció */
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); background: var(--color-accent); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); background: var(--color-accent); }
}

@media screen and (max-width: 576px) {
    h1 { font-size: 2.5rem; }
    .hero-text p { font-size: 1rem; }
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .footer-brand, .footer-col h4 { justify-content: center; }
    .social-links { justify-content: center; }
    .drone-hud-visual { width: 320px; height: 320px; }
    .drone-icon-main { font-size: 4rem; }
    .hud-data-points span.hp { font-size: 0.7rem; }
}

/* --- ÚJ FORM STÍLUSOK (Reference Style) --- */

/* Form Grid Layout */
.advanced-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-row {
    display: contents; /* A gyerekek a grid közvetlen elemei legyenek */
}

.full-span {
    grid-column: span 2;
}

.req { color: #EF4444; margin-left: 3px; }

/* Kategória Színek */
:root {
    /* Alapszínek */
    --bg-dark: #0a1122; /* Egy mély, prémium éjszakai kék alap a kép alapján */
    --primary-orange: #FF4500;
    --primary-cyan: #00f2ff;
    --text-white: #f8fafc;
    --text-muted: #94a3b8;
    
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --main-gradient: linear-gradient(to right, #FF4500, #00f2ff);

    /* --- A KÉP ALAPJÁN KÉSZÜLT "MOSOTT" HÁTTEREK --- */
    /* Ezek a körkörös gradiensek (radial) adják azt a hatást, mintha a sarokból világítana egy lámpa */
    
    /* 1. Hero mosás: Cián balról, Narancs jobbról (Pont, mint a képen) */
    --wash-hero: radial-gradient(circle at 0% 30%, rgba(0, 242, 255, 0.06) 0%, transparent 50%),
                 radial-gradient(circle at 100% 70%, rgba(255, 69, 0, 0.06) 0%, transparent 50%);
                 
    /* 2. Középső szekciók: Fordított irány, hogy legyen dinamika a görgetésnél */
    --wash-reverse: radial-gradient(circle at 100% 20%, rgba(0, 242, 255, 0.04) 0%, transparent 60%),
                    radial-gradient(circle at 0% 80%, rgba(255, 69, 0, 0.04) 0%, transparent 60%);
                    
    /* 3. Vékony sávok (Statisztika): Finom vonalas bemosódás a két szélről */
    --wash-linear: linear-gradient(90deg, rgba(0, 242, 255, 0.03) 0%, transparent 20%, transparent 80%, rgba(255, 69, 0, 0.03) 100%);
    
    /* 4. Footer: Alulról érkező erősebb fények a lezáráshoz */
    --wash-footer: radial-gradient(circle at 20% 100%, rgba(0, 242, 255, 0.05) 0%, transparent 60%),
                   radial-gradient(circle at 80% 100%, rgba(255, 69, 0, 0.05) 0%, transparent 60%);
}

/* Service Selector Container */
.services-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-cat-item {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
    overflow: hidden;
    transition: 0.3s;
}

/* Header (A színes csík) */
.cat-header {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-left: 5px solid transparent; /* Színes csík helye */
    background: rgba(255,255,255,0.02);
    transition: background 0.3s;
}

.cat-header:hover {
    background: rgba(255,255,255,0.05);
}

.cat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.95rem;
}

/* Checkbox a fejlécben */
.cat-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.toggle-icon {
    transition: transform 0.3s;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Színvariációk */
.service-cat-item.industrial { border-left-color: var(--cat-ind); }
.service-cat-item.industrial .cat-title { color: var(--cat-ind); }

.service-cat-item.forestry { border-left-color: var(--cat-for); }
.service-cat-item.forestry .cat-title { color: var(--cat-for); }

.service-cat-item.damage { border-left-color: var(--cat-dam); }
.service-cat-item.damage .cat-title { color: var(--cat-dam); }

.service-cat-item.tourism { border-left-color: var(--cat-tour); }
.service-cat-item.tourism .cat-title { color: var(--cat-tour); }

.service-cat-item.general { border-left-color: var(--cat-gen); }
.service-cat-item.general .cat-title { color: var(--cat-gen); }

/* Body (Lenyíló rész) */
.cat-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.3s;
    background: rgba(0,0,0,0.3);
}

/* Ha nyitva van (JS adja hozzá az 'open' class-t) */
.service-cat-item.open .cat-body {
    max-height: 200px; /* Elég nagy, hogy elférjen */
    padding: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.service-cat-item.open .toggle-icon {
    transform: rotate(180deg);
}

/* Al-opciók */
.sub-option {
    color: #475569;
    font-size: 0.9rem;
    padding: 8px 0;
    display: block;
    cursor: pointer;
    transition: 0.2s;
}

.sub-option:hover {
    color: var(--color-accent);
    padding-left: 5px;
}

/* Checkboxok stílusa (Accent szín) */
input[type="checkbox"] {
    accent-color: var(--color-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.sub-option:hover { color: var(--color-text-primary); }
.sub-option:last-child { margin-bottom: 0; }

.sub-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

/* Gomb fényesítése */
.button-glow {
    background: #0066ff; /* Élénk kék */
    border: none;
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.4);
    font-size: 1.1rem;
    letter-spacing: 1px;
}
.button-glow:hover {
    background: #0052cc;
    box-shadow: 0 0 30px rgba(0, 102, 255, 0.6);
}

/* Mobilra optimalizálás */
@media screen and (max-width: 768px) {
    .advanced-grid {
        grid-template-columns: 1fr;
    }
    .full-span {
        grid-column: span 1;
    }
}


/* --- GEOMETRIC SZEKCIÓ STÍLUSOK --- */

.geometric-section, .process-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background-color: var(--bg-base);
    background-image: var(--bg-grad-process);
    color: var(--text-white);
}

/* Kód eső háttér effekt (statikus, de látványos) */
.code-rain-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="30" fill="rgba(74,111,165,0.03)" font-family="monospace">01</text><text x="50" y="70" fill="rgba(74,111,165,0.03)" font-family="monospace">10</text><text x="80" y="20" fill="rgba(74,111,165,0.03)" font-family="monospace">11</text></svg>');
    opacity: 0.5; pointer-events: none;
}


/* Layout */
.lead-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 20px;
}

/* 1. KIEMELT SZÖVEG DOBOZ (Erősebb Design) */
.geometric-desc-box {
    /* ITT A VÁLTOZÁS: */
    /* Erős, diagonális átmenet: Tiszta fehérből indul -> Markáns világoskékbe */
    background: linear-gradient(135deg, #ffffff 30%, #dbeafe 100%);
    
    /* A keret is legyen láthatóbb, kékes */
    border: 1px solid rgba(191, 219, 254, 0.8);
    
    /* A bal oldali vastag "Tech" csík marad, de picit vastagabb */
    border-left: 5px solid var(--color-accent);
    
    padding: 25px 30px; /* Nagyobb térköz a szövegnek */
    
    /* Modernebb lekerekítés (csak a jobb oldalon, tech stílus) */
    border-radius: 0 12px 12px 0;
    
    /* Színesebb, mélyebb árnyék, hogy elemelkedjen */
    box-shadow: 0 15px 40px -10px rgba(37, 99, 235, 0.15);
    
    margin-bottom: 35px;
    position: relative;
    z-index: 1;
}

/* Egy kis dekorációs elem (pl. idézőjel vagy ikon a háttérben) */
.geometric-desc-box::after {
    content: '\F4CB'; /* Bootstrap Icon kód (info-circle vagy quote) */
    font-family: 'bootstrap-icons';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    color: var(--color-accent);
    opacity: 0.05; /* Nagyon halványan a háttérben */
    pointer-events: none;
}

.geometric-desc-box p {
    color: var(--color-text-muted); /* Sötétszürke a jó olvashatóságért */
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
    font-weight: 500;
}

.geometric-desc-box strong {
    color: var(--color-accent); /* A vastag betűk legyenek kékek */
    font-weight: 800;
}

/* 2. SZOFTVER ABLAK (TERMINÁL) */
.software-window {
    /* Mély kékesszürke, nem koromfekete - elegánsabb */
    background: #1e293b; 
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 60, 150, 0.25); /* Kék glow árnyék */
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

.window-header {
    background: #0f172a; /* Sötétebb fejléc */
    padding: 12px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.window-title {
    margin: 0 auto;
    font-family: monospace;
    color: #64748b;
    font-size: 0.8rem;
}

.window-body {
    padding: 25px;
    font-family: 'Courier New', monospace;
}

/* Kód színek a terminálban */
.code-line { display: block; color: #e2e8f0; margin-bottom: 4px; font-size: 0.9rem; }
.indent { padding-left: 20px; color: #94a3b8; }
.c-green { color: #22c55e; }
.c-blue { color: #60a5fa; }
.c-purple { color: #c084fc; }
.c-yellow { color: #fbbf24; }

/* Progress Bar a terminálban */
.process-status {
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.status-row {
    display: flex; justify-content: space-between; color: #cbd5e1; font-size: 0.85rem; margin-bottom: 5px;
}
.text-accent-bright { color: var(--color-accent-bright); font-weight: bold; }
/* 3. FEATURE CARDS (Extra Design) */
.geo-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px; /* Kicsit nagyobb térköz */
    margin-bottom: 30px;
}

.geo-feature-card {
    /* 1. ERŐS ÁTMENET: Fehérből indul -> Kékes közép -> Markánsabb kék alj */
    /* Így alapállapotban is azonnal látszik a kártya, nem olvad be */
    background: linear-gradient(160deg, #ffffff 0%, #f0f7ff 60%, #dbeafe 100%);
    
    /* 2. KERET: Kékes, látható keret */
    border: 1px solid rgba(191, 219, 254, 0.8);
    
    /* 3. OLDALCSÍK: Vastagabb, hogy vezesse a szemet */
    border-left: 5px solid var(--color-accent);
    
    /* 4. ÁRNYÉK: Mélyebb, színesebb árnyék, hogy "lebegjen" */
    box-shadow: 0 15px 35px -5px rgba(37, 99, 235, 0.12);
    
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Dekorációs fénysáv a kártya tetején */
.geo-feature-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent-bright), transparent);
    opacity: 0.5;
}

/* HOVER: Még intenzívebbé válik */
.geo-feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    
    /* Hoverkor a kék mélyebb lesz, "felizzik" */
    background: linear-gradient(160deg, #ffffff 0%, #e0f2fe 50%, #bfdbfe 100%);
    
    /* A keret felveszi a főszínt */
    border-color: var(--color-accent);
    
    /* Az árnyék kiterjed és erősebb lesz */
    box-shadow: 0 25px 50px -10px rgba(37, 99, 235, 0.25);
}

/* Ikon doboz - Legyen kontrasztosabb */
.geo-card-icon {
    width: 60px;
    height: 60px;
    /* Fehér alap, erős árnyékkal, hogy kiugorjon a kártyából */
    background: #ffffff;
    border: 1px solid rgba(0, 85, 255, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--color-accent);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    transition: 0.4s;
    flex-shrink: 0;
}

.geo-feature-card:hover .geo-card-icon {
    /* Hoverkor az ikon háttere kékre vált, ikon fehérre */
    background: var(--color-accent);
    color: white;
    transform: rotate(10deg) scale(1.1);
    box-shadow: 0 10px 25px rgba(0, 85, 255, 0.3);
    border-color: transparent;
}

.geo-card-text strong {
    display: block;
    color: #0f172a; /* Sötétkék cím */
    font-size: 1.1rem;
    font-family: var(--font-heading);
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.geo-card-text small {
    display: block;
    color: #475569; /* Kicsit sötétebb szürke a jobb olvashatóságért */
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 500;
}

/* Mobil nézet */
@media screen and (max-width: 768px) {
    .geo-features-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobil nézet igazítás */
@media screen and (max-width: 768px) {
    .geo-features-grid {
        grid-template-columns: 1fr; /* Egymás alá mobilon */
    }
}
/* Layout javítás */
.reverse-mobile {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}

/* Badge Exclusive */
.badge-tech.exclusive {
    border-color: #22c55e;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.1);
}

/* Software Window (A vizuális elem) */
.software-window {
    background: #0d1117; /* VS Code sötét */
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.window-header {
    background: #161b22;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.window-controls { display: flex; gap: 8px; }
.control { width: 10px; height: 10px; border-radius: 50%; }
.control.red { background: #ff5f56; }
.control.yellow { background: #ffbd2e; }
.control.green { background: #27c93f; }

.window-title {
    margin-left: auto; margin-right: auto;
    font-family: monospace; color: var(--color-text-muted); font-size: 0.8rem;
}

.window-body { padding: 20px; font-family: 'Fira Code', monospace; font-size: 0.9rem; }

/* Kód színezés */
.code-block { margin-bottom: 25px; line-height: 1.5; }
.code-line { display: block; color: #c9d1d9; }
.indent { padding-left: 20px; }
.indent-2 { padding-left: 40px; }
.c-blue { color: #79c0ff; }
.c-purple { color: #d2a8ff; }
.c-yellow { color: #e3b341; }
.c-green { color: #7ee787; }

.typing-cursor {
    display: inline-block; width: 8px; height: 15px;
    background: var(--color-accent-bright);
    animation: blinkCursor 1s infinite;
}
@keyframes blinkCursor { 50% { opacity: 0; } }

/* Progress Bars */
.process-status {
    background: rgba(255,255,255,0.03);
    padding: 15px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.05);
}
.status-row { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 5px; color: var(--color-text-muted); }
.blink { animation: pulse 1s infinite; }

.progress-bar-container {
    width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden;
}
.progress-bar-fill {
    height: 100%; background: var(--color-accent);
    box-shadow: 0 0 10px var(--color-accent);
}
.animate-load {
    width: 0%; animation: loadBar 3s ease-in-out infinite;
}
@keyframes loadBar { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 100%; } }

.system-badge {
    margin-top: 15px; text-align: center; font-size: 0.7rem; letter-spacing: 2px;
    color: var(--color-text-muted); border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px;
}

/* Glow Circle a háttérben */
.glow-circle {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(74, 111, 165, 0.15) 0%, transparent 70%);
    z-index: 1; pointer-events: none;
}

/* Feature List */
.tech-feature-list { list-style: none; margin-top: 25px; }
.tech-feature-list li {
    display: flex; gap: 15px; margin-bottom: 20px;
    background: rgba(255,255,255,0.02); padding: 15px; border-radius: 8px;
    border-left: 3px solid var(--color-accent); transition: 0.3s;
}
.tech-feature-list li:hover {
    background: rgba(255,255,255,0.05); transform: translateX(5px);
}
.tech-feature-list i { font-size: 1.5rem; color: var(--color-accent-bright); }
.tech-feature-list strong { display: block; color: var(--color-text-primary); margin-bottom: 3px; }
.tech-feature-list small { color: var(--color-text-muted); }

/* Stat Box */
.tech-stat-box {
    display: inline-block; padding: 10px 20px;
    border: 1px dashed var(--color-accent);
    text-align: center;
}
.stat-number { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-accent-bright); font-family: var(--font-heading); }
.stat-label { font-size: 0.7rem; color: var(--color-text-muted); letter-spacing: 1px; }

/* Mobil nézet javítás */
@media screen and (max-width: 992px) {
    .reverse-mobile {
        grid-template-columns: 1fr;
        display: flex; flex-direction: column-reverse; /* A kép legyen felül mobilon? Vagy alul? Itt most a szöveg van felül a flex-reverse miatt, ha kivesszük, a kép lesz felül. */
    }
}

/* --- GEOMETRIC SPECIFIKUS CSS KIEGÉSZÍTÉS --- */

/* A technológiai lista rácsa */
.tech-stack-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 25px;
}

.tech-stack-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 15px;
    border-radius: 6px;
    transition: 0.3s;
}

.tech-stack-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--color-accent);
    transform: translateX(5px);
}

.tech-stack-item i {
    font-size: 1.5rem;
    color: var(--color-accent-bright);
    background: rgba(74, 111, 165, 0.15);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.tech-stack-item strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

.tech-stack-item small {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-family: monospace;
}

/* System Log stílus a terminál ablakhoz */
.system-log {
    font-size: 0.85rem;
}

.system-log .code-line {
    margin-bottom: 2px;
}

/* Kis gomb a demóhoz */
.btn-sm {
    padding: 8px 20px;
    font-size: 0.8rem;
}

/* Tablet/Desktop nézeten 2 oszlopos legyen a lista */
@media screen and (min-width: 768px) {
    .tech-stack-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- GOMBOK (Kék-Fehér Átmenet) --- */

/* Alap gomb beállítások */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 35px;
    border-radius: 6px; /* Kicsit szögletesebb, modernebb */
    font-family: var(--font-heading);
    font-weight: 800; /* Vastagabb betű */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Rugalmas animáció */
    cursor: pointer;
    border: none;
    line-height: 1;
    position: relative;
    overflow: hidden;
}

/* 1. FŐ GOMB (Ajánlatkérés - Kékből Fehérbe) */
.btn-accent {
    /* A kért átmenet: Balról (Kék) Jobbra (Fehér felé világosodik) */
    background: linear-gradient(135deg, var(--color-accent) 0%, #cce0ff 100%);
    
    /* A szöveg legyen sötétkék, hogy olvasható legyen a világosabb részen is */
    color: #003366 !important; 
    
    box-shadow: 0 5px 20px rgba(0, 136, 255, 0.4);
    z-index: 1;
}

.btn-accent:hover {
    transform: translateY(-3px) scale(1.02);
    /* Hoverkor megfordul/erősödik: Tiszta kék */
    background: linear-gradient(135deg, var(--color-accent-bright) 0%, var(--color-accent) 100%);
    color: white !important;
    box-shadow: 0 10px 30px rgba(0, 136, 255, 0.6);
}

/* 2. NAVBAR GOMB (Kisebb verzió) */
.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    border: none;
    transition: 0.3s;
    
    /* Ugyanaz a stílus */
    background: linear-gradient(135deg, var(--color-accent) 0%, #e6f0ff 100%);
    color: #003366 !important;
    box-shadow: 0 4px 15px rgba(0, 136, 255, 0.3);
}

.nav-btn:hover {
    transform: translateY(-2px);
    background: var(--color-accent);
    color: white !important;
    box-shadow: 0 6px 20px rgba(0, 136, 255, 0.5);
}

/* 3. MÁSODLAGOS GOMB (Szolgáltatások - Csak keret) */
.btn-outline-tech {
    background: transparent;
    border: 2px solid var(--color-accent);
    color: var(--color-text-primary) !important; /* Fehér (vagy az alap szövegszín) */
}

.btn-outline-tech:hover {
    background: var(--color-accent);
    color: white !important;
    border-color: var(--color-accent);
    box-shadow: 0 0 20px var(--color-accent-glow);
}

/* Teljes szélesség (pl. űrlapban) */
.full-width {
    width: 100%;
    display: flex;
}

/* Ikon igazítás */
.btn i, .nav-btn i {
    font-size: 1.1em;
    display: flex;
}


.tech-module {
    background: linear-gradient(145deg, rgba(20, 25, 35, 0.8), rgba(10, 14, 20, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 0; /* A belső paddingot a gyerekekre bízzuk */
    position: relative;
    overflow: hidden;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}

/* Hover effekt: "Bekapcsol" a modul */
.tech-module:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 20px rgba(74, 111, 165, 0.15);
    transform: translateY(-5px);
}

.tech-module:hover .status-dot {
    box-shadow: 0 0 8px #22c55e;
}

/* 1. Header: Rendszer ID és Status */
.module-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.module-id {
    font-family: monospace;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    letter-spacing: 1px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #444; /* Alapból inaktív */
    transition: 0.3s;
}
.status-dot.green { background: #22c55e; } /* De itt most mindig aktív */

/* 2. Body: Ikon és Szöveg */
.module-body {
    padding: 20px 15px;
    flex-grow: 1; /* Hogy a footer mindig alul legyen */
}

.module-body i {
    font-size: 1.8rem;
    color: var(--color-accent-bright);
    margin-bottom: 12px;
    display: block;
}

.module-body h4 {
    font-size: 1rem;
    margin-bottom: 8px;
    color: var(--color-text-primary);
}

.module-body p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin: 0;
}

/* 3. Footer: Specifikus Rendszer Infók */
.module-footer {
    background: rgba(74, 111, 165, 0.05);
    padding: 10px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tech-spec {
    font-family: 'Fira Code', monospace; /* Vagy sima monospace */
    font-size: 0.7rem;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.8;
}

.tech-spec i {
    font-size: 0.8rem;
    color: var(--color-text-muted); /* Ikon legyen halványabb */
}

/* Mobil igazítás */
@media screen and (max-width: 576px) {
    .geo-features-grid {
        grid-template-columns: 1fr;
    }
}

/* --- PROCESS SZEKCIÓ (PRO VERZIÓ) --- */

.process-container {
    position: relative;
    padding: 40px 0;
    margin-top: 20px;
}

/* 1. Timeline Vonal (A kártyák mögött/között) */
.timeline-bar {
    position: absolute;
    top: 50%; /* Középre igazítva */
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
    z-index: 0; /* Kártyák mögött */
}

/* Kék progress csík a vonalon (animált vagy fix) */
.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Vagy amennyit akarsz */
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--color-accent-bright), transparent);
    box-shadow: 0 0 10px var(--color-accent-bright);
    opacity: 0.7;
}

/* 2. Grid Elrendezés (Sokkal stabilabb) */
.process-grid {
    display: grid;
    /* 4 egyenlő oszlop, de minimum 220px szélesek legyenek */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 30px;
    position: relative;
    z-index: 1; /* A vonal fölött */
}

/* 3. CARD DESIGN (Javított Láthatóság) */
.process-card {
    background: linear-gradient(180deg, rgba(16, 36, 66, 0.92), rgba(8, 20, 42, 0.98));
    border: 1px solid rgba(0, 242, 255, 0.18);
    border-radius: 20px;
    padding: 32px 26px;
    text-align: left;
    position: relative;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 340px;
    overflow: hidden;
}

/* Hover Effekt - tónusosabb színváltás */
.process-card:hover {
    transform: translateY(-12px);
    background: linear-gradient(180deg, rgba(9, 28, 54, 0.98), rgba(8, 22, 50, 1));
    box-shadow: 0 28px 70px rgba(0, 242, 255, 0.15);
    border-color: rgba(0, 242, 255, 0.32);
}

/* Háttérszám (01, 02...) */
.card-bg-number {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 4rem;
    font-weight: 800;
    color: rgba(248, 250, 252, 0.05);
    font-family: var(--font-heading);
    line-height: 1;
    z-index: 0;
    transition: 0.3s;
}

.process-card:hover .card-bg-number {
    color: rgba(0, 242, 255, 0.12);
    transform: scale(1.08);
}

/* Ikon Kör */
.icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid rgba(0, 242, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 1.8rem;
    color: var(--color-accent-bright);
    background: rgba(0, 242, 255, 0.08);
    z-index: 1;
    transition: 0.3s;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.12);
}

.process-card:hover .icon-circle {
    background: var(--color-accent);
    color: white;
    box-shadow: 0 0 22px var(--color-accent-glow);
    border-color: white;
}

/* Szövegek */
.process-card h3 {
    margin-bottom: 15px;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    color: var(--text-white);
    z-index: 1;
}

.process-card p {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.75);
    line-height: 1.7;
    margin: 0;
    z-index: 1;
    max-width: 100%;
}

/* --- RESPONSIVE IGAZÍTÁS --- */

@media screen and (max-width: 992px) {
    /* Tableten (pl. iPad) 2 oszlop legyen */
    .process-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* A vízszintes vonalat rejtsük el tableten, mert zavaró lehet a 2 soros elrendezésnél */
    .timeline-bar {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    /* Mobilon 1 oszlop */
    .process-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Kártyák kisebbek mobilon */
    .process-card {
        padding: 30px 20px;
        min-height: auto; /* Ne legyen fix magasság mobilon */
    }
    
    .card-bg-number {
        font-size: 3rem;
        top: 5px;
        right: 15px;
    }
}

/* --- SERVICES PRO CARDS (CYBER UPGRADE) --- */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.service-card-pro {
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px; padding: 25px;
    box-shadow: var(--shadow-soft);
    position: relative; overflow: hidden; transition: 0.4s;
    display: flex; flex-direction: column;
}
.service-card-pro:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0,0,0,0.1); }

/* Háttér rács effekt */
.card-bg-grid {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(74, 111, 165, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 111, 165, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0;
    transition: 0.5s;
    z-index: 0;
}

/* Hover állapotok */
.service-card-pro:hover {
    transform: translateY(-10px);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.service-card-pro:hover .card-bg-grid {
    opacity: 1;
    transform: scale(1.1);
}

/* Dekoratív sarkok */
.card-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-accent);
    opacity: 0;
    transition: 0.3s;
}
.card-corner.top-right { top: 0; right: 0; border-left: none; border-bottom: none; }
.card-corner.bottom-left { bottom: 0; left: 0; border-right: none; border-top: none; }

.service-card-pro:hover .card-corner {
    opacity: 1;
}

/* Header (ID és Status) */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.service-id {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    background: rgba(255,255,255,0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.status-indicator {
    width: 8px; height: 8px; border-radius: 50%;
    background: #444;
}
.status-indicator.active { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.status-indicator.warning { background: #eab308; box-shadow: 0 0 8px #eab308; }

/* Body */
.card-body {
    flex-grow: 1;
    position: relative;
    z-index: 1;
}

.icon-wrapper {
    width: 60px; height: 60px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
    margin-bottom: 20px; background: rgba(0, 242, 255, 0.12);
    border: 1px solid rgba(0, 242, 255, 0.18);
    color: var(--color-accent);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.10);
    z-index: 1;
}

.service-card-pro.damage .icon-wrapper {
    background: rgba(255, 69, 0, 0.12);
    border-color: rgba(255, 69, 0, 0.18);
    color: #ff8c00;
    box-shadow: 0 0 25px rgba(255, 69, 0, 0.12);
}

.icon-ring {
    position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px;
    border: 1px dashed var(--color-accent-glow);
    border-radius: 18px;
    animation: rotate 10s linear infinite;
    opacity: 0.5;
}
@keyframes rotate { 100% { transform: rotate(360deg); } }

.service-card-pro:hover .icon-wrapper {
    background: var(--color-accent);
    color: white;
    box-shadow: 0 0 25px var(--color-accent-glow);
}

.service-card-pro h3 {
    font-size: 1.3rem; margin-bottom: 10px; color: var(--text-white);
}

.service-desc {
    font-size: 0.95rem; color: rgba(248, 250, 252, 0.8); margin-bottom: 20px;
    line-height: 1.7;
}

/* Feature Lista */
.service-features {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 18px;
}

.feature-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.9rem; color: rgba(248, 250, 252, 0.82);
    margin-bottom: 10px;
}

.feature-item i {
    color: var(--color-accent);
    font-size: 1rem;
}

/* Footer (Gomb és Scan text) */
.card-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 25px; border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 15px;
    position: relative;
    z-index: 1;
}

/* Gombok a kártyákon */
.btn-tech-sm {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-white);
    padding: 8px 15px; border-radius: 6px; font-size: 0.8rem; font-weight: 700;
    border: 1px solid rgba(255,255,255,0.14);
    transition: 0.3s ease;
    text-transform: uppercase;
}
.btn-tech-sm:hover {
    background: linear-gradient(135deg, rgba(0, 242, 255, 0.18), rgba(255, 69, 0, 0.12));
    color: white;
    border-color: rgba(0, 242, 255, 0.32);
}

.scan-text {
    font-family: monospace; font-size: 0.7rem; color: var(--color-accent-bright);
    opacity: 0; transition: 0.3s;
}

.service-card-pro:hover .scan-text {
    opacity: 1;
    animation: blink 1s infinite;
}

/* --- CSS DRÓN ANIMÁCIÓ --- */

.css-drone-container {
    position: absolute;
    transform: translateY(-80px) rotateX(15deg) rotateY(-15deg);
    animation: droneHover 4s ease-in-out infinite;
    z-index: 10;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Neon ragyogás */
    filter: drop-shadow(0 0 15px var(--color-accent));
}

.drone-body {
    position: relative;
    width: 160px;
    height: 160px;
    /* X alakú váz */
}

/* Központi mag */
.drone-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 60px;
    background: rgba(14, 18, 24, 0.9);
    border: 1px solid var(--color-accent-bright);
    border-radius: 15px;
    transform: translate(-50%, -50%);
    z-index: 5;
    box-shadow: inset 0 0 10px var(--color-accent-glow);
}

/* Kamera/Szenzor */
.sensor-eye {
    width: 15px;
    height: 15px;
    background: var(--color-accent-bright);
    border-radius: 50%;
    margin: 10px auto;
    box-shadow: 0 0 10px var(--color-accent-bright);
    animation: blinkSensor 3s infinite;
}

/* Karok (X alak) */
.arm {
    position: absolute;
    width: 80px;
    height: 8px;
    background: var(--color-text-muted);
    top: 50%;
    left: 50%;
    transform-origin: center;
}

.arm.front-left { transform: translate(-50%, -50%) rotate(45deg) translate(-45px); }
.arm.front-right { transform: translate(-50%, -50%) rotate(-45deg) translate(45px); }
.arm.back-left { transform: translate(-50%, -50%) rotate(-45deg) translate(-45px); }
.arm.back-right { transform: translate(-50%, -50%) rotate(45deg) translate(45px); }

/* Motorok */
.motor {
    width: 20px;
    height: 25px;
    background: #333;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    position: absolute;
    top: -8px;
}

.arm.front-left .motor, .arm.back-left .motor { left: -10px; }
.arm.front-right .motor, .arm.back-right .motor { right: -10px; }

/* Propellerek */
.propeller {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--color-accent-bright), transparent);
    transform: translateX(-50%);
    border-radius: 50%;
    animation: spinProp 0.1s linear infinite;
    opacity: 0.8;
}

/* Ellentétes forgás a realizmusért */
.propeller.cw {
    animation: spinPropCW 0.1s linear infinite;
}

/* --- ANIMÁCIÓK --- */

@keyframes droneHover {
    0%, 100% { transform: translateY(-80px) rotateX(15deg) rotateY(-15deg); }
    50% { transform: translateY(-100px) rotateX(20deg) rotateY(-10deg); }
}

@keyframes spinProp {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes spinPropCW {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(-360deg); }
}

@keyframes blinkSensor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* A szkennelő fény igazítása a drón alá */
.holo-scanline {
    width: 150px;
    top: 80px; /* A drón alá toljuk */
}

/* --- PROCESS SECTION (FLIGHT PATH DESIGN) --- */

.process-section {
    position: relative;
    overflow: hidden;
    /* ÚJ HÁTTÉR */
    background-color: #ffffff;
    background-image: var(--bg-grad-process);
}
.process-wrapper {
    position: relative;
    padding: 40px 0;
}

/* 1. FLIGHT LINE (A háttérben futó vonal) */
.flight-path-container {
    position: absolute;
    top: 50%; /* Kártyák közepén */
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 0;
    transform: translateY(-50%);
}

.flight-line-dashed {
    width: 100%;
    height: 100%;
    border-top: 2px dashed var(--color-accent-bright);
    opacity: 0.3;
}

/* Mozgó Drón Animáció */
.flight-drone-icon {
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 2rem;
    color: var(--color-accent);
    filter: drop-shadow(0 0 10px var(--color-accent-bright));
    animation: flightPath 8s linear infinite;
    z-index: 1;
}

@keyframes flightPath {
    0% { left: 0%; transform: rotate(90deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 100%; transform: rotate(90deg); opacity: 0; }
}

/* 2. GRID LAYOUT */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 oszlop desktopon */
    gap: 30px;
    position: relative;
    z-index: 2; /* A vonal felett */
}



/* Szám a háttérben */
.card-step-num {
    position: absolute;
    top: -10px;
    right: 10px;
    font-size: 5rem;
    font-weight: 900;
    font-family: var(--font-heading);
    color: #f1f5f9; /* Alig látható szürke */
    z-index: 0;
    line-height: 1;
    transition: 0.3s;
}

.process-card:hover .card-step-num {
    color: rgba(0, 102, 255, 0.05); /* Hoverkor bekékül */
    transform: scale(1.1);
}

/* Tartalom */
.card-content {
    position: relative;
    z-index: 1;
}

/* Ikon Doboz */
.icon-box {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-accent);
    border: 2px solid transparent;
    transition: 0.3s;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.03);
}

.process-card:hover .icon-box {
    background: var(--color-accent);
    color: #ffffff;
    box-shadow: 0 10px 20px var(--color-accent-glow);
    transform: scale(1.1) rotate(5deg);
}

/* Szövegek */
.process-card h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--color-text-primary);
}

.process-card p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Alsó Status Bar (Dísz) */
.card-status-bar {
    width: 40px;
    height: 4px;
    background: #e2e8f0;
    margin: 20px auto 0;
    border-radius: 2px;
    transition: 0.3s;
}

.process-card:hover .card-status-bar {
    width: 80%;
    background: var(--color-accent);
}

/* Kiemelt kártya (pl. a Felmérés lépés) */
.highlight-card {
    border-top: 4px solid var(--color-accent);
}
.highlight-card .icon-box {
    color: var(--color-accent-bright);
    background: rgba(0, 102, 255, 0.05);
}

.pulse-icon {
    animation: pulseIcon 2s infinite;
}
@keyframes pulseIcon {
    0% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(0, 102, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0); }
}

/* --- RESPONSIVE IGAZÍTÁS --- */
@media screen and (max-width: 992px) {
    .process-grid {
        grid-template-columns: 1fr 1fr; /* Tableten 2 oszlop */
        gap: 20px;
    }
    .flight-path-container { display: none; } /* Mobilon zavaró a vízszintes vonal */
}

@media screen and (max-width: 600px) {
    .process-grid {
        grid-template-columns: 1fr; /* Mobilon 1 oszlop */
    }
}


/* --- CONTACT INFO CARDS (Fehér-Kék Gradiens + Extra) --- */

.contact-items-wrapper {
    display: grid;
    gap: 20px;
    margin-top: 30px;
}
/* A kártya alapstílusa */
.contact-items-wrapper .info-item {
    /* 1. HÁTTÉR: Erősebb, 3 lépcsős átmenet */
    /* Fehérből indul -> Középen világoskék -> Alján markánsabb kék */
    background: linear-gradient(160deg, #ffffff 0%, #e0f2fe 60%, #bfdbfe 100%);
    
    /* 2. KERET: Kicsit erősebb kék, hogy keretet adjon */
    border: 1px solid rgba(147, 197, 253, 0.8);
    
    /* Bal oldali vastag díszcsík */
    border-left: 5px solid var(--color-accent);
    
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    
    /* 3. ÁRNYÉK: Kékesebb árnyék */
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.1);
}

/* Finom fénylés a tetején */
.contact-items-wrapper .info-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #60a5fa, transparent);
    opacity: 0.6;
}

/* HOVER EFFEKT - A "Menő" rész */
.contact-items-wrapper .info-item:hover {
    transform: translateX(10px) translateY(-5px); /* Kicsit fel és jobbra */
    
    /* Hoverkor az átmenet még mélyebb kékbe megy át */
    background: linear-gradient(160deg, #ffffff 0%, #bae6fd 100%);
    
    /* Erősebb kék árnyék és keret */
    box-shadow: 0 20px 50px -10px rgba(0, 102, 255, 0.25);
    border-color: var(--color-accent);
}

/* Ikon doboz design */
.contact-items-wrapper .info-item i {
    width: 55px;
    height: 55px;
    background: #ffffff; /* Fehér alap */
    color: var(--color-accent); /* Kék ikon */
    
    /* Ikon keret és árnyék */
    border: 1px solid rgba(0, 85, 255, 0.15);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    
    border-radius: 50%; /* Kör alakú */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: 0.4s ease;
    position: relative;
    z-index: 2;
}

/* Hoverkor az ikon is "aktiválódik" */
.contact-items-wrapper .info-item:hover i {
    background: var(--color-accent);
    color: #ffffff;
    transform: rotateY(180deg); /* 3D forgás effekt */
    box-shadow: 0 0 20px var(--color-accent-glow);
}

/* Szövegek formázása */
.contact-items-wrapper h4 {
    margin: 0 0 5px 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b; /* Szürke címke */
}

.contact-items-wrapper a, 
.contact-items-wrapper p {
    color: #0f172a; /* Sötétkék/Fekete szöveg a jó olvashatóságért */
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: 0.2s;
    margin: 0;
    line-height: 1.3;
}

.contact-items-wrapper a:hover {
    color: var(--color-accent);
}

.small-link {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    opacity: 0.8;
    margin-top: 2px;
    display: block;
}

/* EXTRA: Háttér Dekoráció (Halvány körök) */
.contact-items-wrapper .info-item::after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 70%);
    opacity: 0;
    transition: 0.5s;
}

.contact-items-wrapper .info-item:hover::after {
    opacity: 0.6;
    transform: scale(1.5);
}


/* --- ABOUT SECTION (MODERN REDESIGN) --- */

.about-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background-color: rgba(16, 36, 66, 0.92);
    background-image: var(--bg-about);
    background-blend-mode: screen;
    color: var(--text-white);
}

/* 1. KIEMELT SZÖVEG DOBOZ */
.about-desc-box {
    background: #ffffff;
    border-left: 5px solid var(--color-accent); /* Kék oldalsáv */
    padding: 30px;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.about-desc-box p {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0;
}

.about-desc-box strong {
    color: var(--color-text-primary); /* Sötétkék kiemelés */
    font-weight: 700;
}

/* Apró dekoráció a sarokban */
.desc-decoration {
    position: absolute; bottom: 10px; right: 10px;
    width: 20px; height: 20px;
    border-bottom: 2px solid var(--color-accent-bright);
    border-right: 2px solid var(--color-accent-bright);
    opacity: 0.5;
}

/* 2. HOLOGRAFIKUS KÁRTYÁK (Features) */
.about-features-grid {
    display: grid;
    gap: 20px;
}

.holo-card {
    /* Fehérből világoskékbe átmenet */
    background: linear-gradient(135deg, #ffffff 40%, #f0f9ff 100%);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.holo-card:hover {
    transform: translateX(10px) scale(1.02);
    border-color: var(--color-accent);
    box-shadow: 0 15px 30px rgba(0, 102, 255, 0.15);
    background: #ffffff;
}

.holo-icon {
    width: 50px; height: 50px;
    background: rgba(0, 102, 255, 0.08); /* Halvány kék alap */
    color: var(--color-accent);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: 0.3s;
}

.holo-card:hover .holo-icon {
    background: var(--color-accent);
    color: white;
    transform: rotate(10deg);
}

.holo-content h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: #0f172a;
}

.holo-content p {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.4;
}

/* Dekorációs csík az alján */
.holo-line {
    position: absolute; bottom: 0; left: 0;
    width: 0%; height: 3px;
    background: var(--color-accent);
    transition: 0.4s;
}

.holo-card:hover .holo-line { width: 100%; }


/* 3. SCANNER INTERFACE (Jobb oldali vizuál) */
.about-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 450px;
}

.scanner-interface {
    width: 350px; height: 350px;
    position: relative;
    display: flex; justify-content: center; align-items: center;
}

/* Körök */
.scanner-ring {
    position: absolute; border-radius: 50%;
    border: 1px solid var(--color-accent);
    opacity: 0.2;
}
.scanner-ring.outer { width: 100%; height: 100%; border-style: dashed; animation: rotateRight 20s linear infinite; }
.scanner-ring.middle { width: 70%; height: 70%; border-width: 2px; animation: rotateLeft 15s linear infinite; opacity: 0.3; }
.scanner-ring.inner { width: 40%; height: 40%; border-color: var(--color-accent-bright); opacity: 0.5; }

/* Célkereszt */
.scanner-crosshair {
    position: absolute;
    color: var(--color-accent);
    font-size: 2rem;
    opacity: 0.5;
    animation: pulse 2s infinite;
}

/* Radar fénycsík */
.scanner-beam {
    position: absolute;
    width: 50%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent));
    top: 50%; left: 50%;
    transform-origin: left center;
    animation: scanRadar 4s infinite linear;
    opacity: 0.6;
    box-shadow: 0 0 15px var(--color-accent);
}

/* Középső ikon */
.scanner-icon {
    font-size: 4rem;
    color: var(--color-text-primary);
    z-index: 10;
    filter: drop-shadow(0 0 20px rgba(0, 102, 255, 0.3));
    animation: floatIcon 4s ease-in-out infinite;
}

/* Adatpontok */
.scanner-data {
    position: absolute;
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--color-accent-bright);
    background: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(0, 102, 255, 0.2);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.d1 { top: 10%; right: 20%; }
.d2 { bottom: 20%; left: 0%; }
.d3 { top: 30%; left: 10%; }

/* Talapzat */
.scanner-platform {
    position: absolute; bottom: 0;
    width: 200px; height: 20px;
    background: radial-gradient(ellipse at center, rgba(0, 102, 255, 0.2) 0%, transparent 70%);
    filter: blur(5px);
}

/* Animációk */
@keyframes rotateRight { 100% { transform: rotate(360deg); } }
@keyframes rotateLeft { 100% { transform: rotate(-360deg); } }
@keyframes scanRadar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes floatIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Responsive */
@media screen and (max-width: 992px) {
    .split-layout { grid-template-columns: 1fr; text-align: center; }
    .about-visual { height: 350px; margin-top: 40px; }
    .scanner-interface { width: 280px; height: 280px; }
    .about-features-grid { text-align: left; }
}

/* --- PARTNERS SECTION (SLEEK & EXTRA ANIMATED) --- */

.partners-section {
    padding: 80px 0;
    position: relative;
    border-top: 1px solid rgba(0,0,0,0.08);
    background-color: rgba(16, 36, 66, 0.94);
    background-image: var(--bg-partners);
    background-blend-mode: screen;
    color: var(--text-white);
}
.partner-grid-extra {
    display: grid;
    /* Automatikusan kitölti a teret, nem engedi túl nagyra nőni a kártyákat */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding-top: 20px;
}

/* 1. ALAP KÁRTYA (Vékony, elegáns) */
.partner-card-extra {
    /* Fehérből fagyos kékbe átmenet */
    background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
    border: 1px solid rgba(147, 197, 253, 0.4);
    border-radius: 8px;
    
    /* SZIGORÚ MAGASSÁG: Így nem lesz vastag és bumszli! */
    height: 85px; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.4s ease;
}

/* --- ANIMÁCIÓ 1: Folyamatos finom lebegés (Lebegtetjük őket elcsúsztatva) --- */
.partner-card-extra.float-1 { animation: floatSlow 4s ease-in-out infinite; }
.partner-card-extra.float-2 { animation: floatSlow 4s ease-in-out infinite 2s; }

@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* --- ANIMÁCIÓ 2: Kirajzolódó Neon Keret --- */
.border-draw {
    position: absolute;
    background: var(--color-accent);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 0 10px var(--color-accent-glow);
}
/* Felső és alsó vonal alapállapotban láthatatlan és 0 széles */
.border-draw.top { top: 0; left: 50%; width: 0; height: 2px; transform: translateX(-50%); }
.border-draw.bottom { bottom: 0; left: 50%; width: 0; height: 2px; transform: translateX(-50%); }

.partner-card-extra:hover .border-draw.top,
.partner-card-extra:hover .border-draw.bottom {
    width: 100%; /* Hoverkor végigfut a vonal */
}

/* --- ANIMÁCIÓ 3: Üveg Fénycsillogás (Glimmer) --- */
.card-shine {
    position: absolute;
    top: 0; left: -150%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transform: skewX(-25deg);
    transition: 0s;
    z-index: 1;
}

.partner-card-extra:hover .card-shine {
    /* Hoverkor egy fénysugár átszalad a kártyán */
    animation: shineSweep 0.6s ease-out forwards;
}

@keyframes shineSweep {
    0% { left: -150%; }
    100% { left: 200%; }
}

/* HOVER ÁLLAPOT A KÁRTYÁRA */
.partner-card-extra:hover {
    /* A lebegés animációt megszakítjuk és felemeljük */
    animation: none; 
    transform: translateY(-8px) scale(1.02);
    background: linear-gradient(135deg, #ffffff 0%, #dbeafe 100%);
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.15);
    border-color: transparent; /* A neon vonalak veszik át a keret szerepét */
}

/* --- LOGÓ DOBOZ ÉS KÉP --- */
.logo-box {
    position: relative;
    z-index: 2;
    width: 90%;
    height: 60%; /* Hely a logónak a vékony kártyán belül */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ez vonatkozik az <img> tagre, amit majd beraksz */
.logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Alapállapotban szürke és kicsit áttetsző, hogy elegáns legyen */
    filter: grayscale(100%) opacity(0.5);
    transition: all 0.4s ease;
}

.partner-card-extra:hover .logo-box img {
    /* Színesre robban és 100% látható lesz */
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

/* Szöveges helyettesítő (Amíg nincs logó) */
.placeholder-text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.partner-card-extra:hover .placeholder-text {
    color: var(--color-accent);
}

/* Mobil nézet: Még vékonyabb kártyák */
@media screen and (max-width: 600px) {
    .partner-grid-extra {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    .partner-card-extra {
        height: 70px; /* Mobilon még laposabb */
    }
    .placeholder-text {
        font-size: 0.75rem;
    }
}