/* Alap Színváltozók */
:root {
    --color-primary: #E65532;
    --color-primary-rgb: 230, 85, 50;
    --color-secondary: #2575fc;
    --color-secondary-rgb: 37, 117, 252;
    --color-highlight: #77FF38;
    --color-highlight-rgb: 119, 255, 56;
    --glow-highlight: 0 0 25px -5px rgba(var(--color-highlight-rgb), 0.5);

    /* Sötét téma (alapértelmezett) */
    --color-bg: #0D0D0D;
    --color-bg-rgb: 13, 13, 13;
    --color-surface: rgba(255, 255, 255, 0.05);
    --color-surface-hover: rgba(255, 255, 255, 0.08);
    --color-text-primary: #f0f0f0;
    --color-text-secondary: #a0a0a0;
    --color-text-on-accent: #ffffff;
    --color-border: rgba(255, 255, 255, 0.1);
    --glow-primary: 0 0 25px -5px rgba(var(--color-primary-rgb), 0.5);
    --glow-secondary: 0 0 25px -5px rgba(var(--color-secondary-rgb), 0.5);

    --large-card-text: #0D0D0D;
    --hero-design-text-color: var(--color-text-secondary);
    --footer-bg: var(--color-surface);
    --footer-text: var(--color-text-primary);
    --footer-border: var(--color-border);

    --shadow-main: rgba(0, 0, 0, 0.3);
    --shadow-hover: rgba(0, 0, 0, 0.4);

    --nav-height: 80px; /* Navigációs sáv magassága */
}

body.light-mode {
    /* Világos téma */
    --color-bg: #f9f9f9;
    --color-bg-rgb: 249, 249, 249;
    --color-surface: rgba(255, 255, 255, 0.8);
    --color-surface-hover: rgba(255, 255, 255, 1);
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #555555;
    --color-border: rgba(0, 0, 0, 0.1);
    --glow-primary: 0 0 25px -5px rgba(var(--color-primary-rgb), 0.3);
    --glow-secondary: 0 0 25px -5px rgba(var(--color-secondary-rgb), 0.3);
    --glow-highlight: 0 0 25px -5px rgba(var(--color-highlight-rgb), 0.3);

    --large-card-text: #ffffff;
    --hero-design-text-color: var(--color-text-secondary);
    --footer-bg: #f4f4f4;
    --footer-text: #333333;
    --footer-border: #dddddd;
}

.text-design, .text-brand, .text-ampersand {
    font-family: 'AudioWide', sans-serif; /* Audiowide betűtípus a design és brand szövegekhez */
    font-weight: 700; /* Normál súly, hogy ne legyen túl vastag */
    font-size: 12rem; /* Nagyobb betűméret, hogy kiemelkedjen */
}

/* Alapstílusok és reset */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Heebo', sans-serif; /* Alapértelmezett betűtípus */
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    scroll-behavior: smooth; /* Sima görgetés az oldalon belüli linkekhez */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: 
        radial-gradient(circle at 15% 20%, rgba(var(--color-primary-rgb), 0.15), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(var(--color-secondary-rgb), 0.15), transparent 40%);
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

body.light-mode::before {
    opacity: 0.5;
}

/* Navigációs Sáv Stílusok */
.main-navigation {
    background-color: rgba(var(--color-bg-rgb), 0.7);
    padding: 0; /* A belső container kezeli a paddingot */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Biztosítja, hogy a nav felül legyen */
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: var(--nav-height);
    display: flex;
    align-items: center;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Maximális szélesség a tartalomnak */
    margin: 0 auto;
    padding: 0 20px; /* Oldalsó padding */
}

.nav-logo {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 1.8rem; /* Kicsit nagyobb logó */
    font-weight: bold;
}

.nav-logo-image { /* Stílus a logó képének */
    height: 35px; /* Alapértelmezett magasság */
    width: auto;
    display: block; /* Konzisztens megjelenés */
}

.nav-logo .logo-dark {
    display: none;
}

.light-mode .nav-logo .logo-light {
    display: none;
}
.light-mode .nav-logo .logo-dark {
    display: block;
}

.nav-logo-text {
    display: inline; /* Megjelenítjük asztali nézetben is */
    margin-left: 8px; /* Térköz a kép és a szöveg között */
    font-weight: bold;
    color: var(--color-text-primary); /* Szín öröklődik a .nav-logo-tól, de itt explicit */
}


.nav-menu-wrapper {
    display: flex; /* Asztali nézetben a linkek és a CTA gomb egymás mellett */
    align-items: center;
    gap: 25px; /* Kisebb rés a linkek és a CTA gomb között asztali nézetben */
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Biztosítjuk, hogy a linkek egymás mellett legyenek */
    align-items: center; /* Vertikális igazítás, ha a linkek magassága eltérő lenne */
    gap: 35px; /* Szellős elrendezés a menüpontok között asztali nézetben */
}

/* Mobil Navigáció Váltó (Hamburger) */
.mobile-nav-toggle {
    display: none; /* Alapból rejtett asztali nézetben */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: auto; /* Jobbra tolja a gombot, ha a nav-links el van rejtve */
    z-index: 1005; /* A legördülő menü fölött legyen */
}

.mobile-nav-toggle .hamburger-bar {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--color-text-primary);
    margin: 5px 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.mobile-nav-toggle.active .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-nav-toggle.active .hamburger-bar:nth-child(2) {
    opacity: 0;
}

.mobile-nav-toggle.active .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.nav-links a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 1rem;
    padding: 5px 0;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
    border-bottom: 2px solid transparent; /* Hely a hover effektnek */
}

/* Hero Section Social Icons */
.social-icons-sidebar {
    position: absolute;
    left: 20px; /* Távolság a bal széltől */
    top: 50%;
    transform: translateY(-50%); /* Vertikális középre igazítás */
    background-color: rgba(255, 255, 255, 0.1); /* Enyhén áttetsző fehér háttér */
    padding: 15px 10px;
    border-radius: 25px; /* Erősen lekerekített sarkok */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column; /* Ikonok egymás alatt */
    gap: 15px; /* Térköz az ikonok között */
    z-index: 3; /* A videó és a hero-content-wrapper fölött */
}

/* Styles for the <a> tags within the social sidebar */
.social-icons-sidebar a {
    text-decoration: none;
    padding: 8px; /* Padding around the icon for a larger clickable area */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Only transform transition on the link */
}

/* Styles for the <i> tags (icons) within the social sidebar links */
.social-icons-sidebar a i {
    color: var(--color-text-on-accent); /* Icon color */
    font-size: 1.2rem; /* Icon size */
    transition: color 0.3s ease; /* Color transition on the icon */
}

/* Hover/focus styles for the icons when the link is hovered/focused */
.social-icons-sidebar a:hover i,
.social-icons-sidebar a:focus i {
    color: var(--color-secondary); /* Highlight color on hover/focus */
}

/* Hover/focus styles for the link itself (for transform) */
.social-icons-sidebar a:hover,
.social-icons-sidebar a:focus {
    transform: scale(1.15); /* Enyhe nagyítás hover esetén */
}

/* Hero Section Stílusok */
.hero-section {
    background: transparent;
    color: var(--color-text-primary);
    min-height: 100vh; /* Teljes képernyő magasság */
    display: flex;
    flex-direction: column; /* A gyerek elemek egymás alá kerülnek */
    position: relative; /* Későbbi esetleges abszolút pozícionált elemekhez */
    width: 100%; /* Teljes szélesség */
    box-sizing: border-box; /* A padding és border ne növelje a teljes szélességet/magasságot */
    /* Az align-items, justify-content és text-align innen a wrapperbe kerül vagy feleslegessé válik */
}

.hero-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Kitölti a teret arányosan, levágva a felesleget */
    z-index: 0; /* A legalsó réteg a hero-section-ön belül */
    opacity: 0.2; /* Halvány megjelenés */
    /* Ha a videó túl sötét vagy világos, filterekkel lehet finomhangolni:
    filter: brightness(0.7) contrast(1.2); */
}


.hero-content-wrapper {
    flex-grow: 1; /* Kitölti a rendelkezésre álló helyet az info-cards felett */
    display: flex;
    align-items: center; /* Vertikálisan középre igazítja a .hero-content-et */
    justify-content: center; /* Horizontálisan középre igazítja a .hero-content-et */
    width: 100%;
    padding: 0 20px; /* Oldalsó padding a tartalomnak */    
    padding-top: var(--nav-height); /* Hely a fix navigációnak a wrapperen belül */
    box-sizing: border-box;
    position: relative; /* Szükséges a z-indexhez, hogy a videó fölé kerüljön */
    z-index: 2; /* A videó fölött, de a social sidebar alatt (ha az magasabb) */
    text-align: center; /* A .hero-content szövegének középre igazítása */
}

.nav-links a:hover,
.nav-links a:focus {
    color: var(--color-primary); /* Kiemelés hover esetén */
    border-bottom-color: var(--color-primary);
}

.nav-logo {
    display: flex; /* Flexbox használata a logóhoz */
    align-items: center; /* Vertikális középre igazítás */
    text-decoration: none; /* Eltávolítja az aláhúzást */
    color: var(--color-text-primary); /* Világos szöveg a logónak */
    /* width: 60px; Eltávolítva, hogy mobilon a szöveg is elférjen */
}


.hero-content {
    /* max-width: 800px; Ezt eltávolítjuk, hogy a szöveg jobban kitölthesse a teret */
    position: relative; /* Szükséges az abszolút pozícionált képhez */
    width: 100%;
    display: flex; /* Segít a belső elemek elrendezésében, ha szükséges */
    justify-content: center;
    align-items: center;
}

.hero-main-text {
    font-size: clamp(3.5rem, 15vw, 12rem); /* Nagyobb reszponzív betűméret */
    font-weight: 700; /* Vastagabb betű */
    color: var(--color-text-on-accent);
    line-height: 1; /* Még szorosabb sorok, vagy akár 0.9 */
    text-transform: uppercase; /* Opcionális: nagybetűs stílus */
    margin: 0;
    position: relative; /* Annak érdekében, hogy a z-index működjön az img-hez képest */
    z-index: 1;
    width: 100%; /* Kitölti a .hero-content szélességét */
    display: flex;
    flex-direction: column;
    align-items: center; /* Alapból középre igazítjuk az oszlopot */
    text-align: center; /* A span-ok szövege alapból középre igazodik */
}

/* Az .text-design továbbra is blokk és 70% széles */
.hero-main-text .text-design {
    display: block;
    width: 70%;
    text-align: left; /* Balra igazítás */
    padding-left: 5%; /* Kis behúzás balról, hogy ne érjen a széléhez */
    color: var(--hero-design-text-color); /* Új szín beállítása */
}

/* Új konténer az '&' és 'Brand' szövegnek asztali nézetben */
.hero-main-text .text-brand-container {
    display: flex; /* '&' és 'Brand' egymás mellett */
    align-items: baseline; /* Szép vertikális igazítás */
    justify-content: flex-end; /* Jobbra igazítja a '& Brand' csoportot */
    width: 70%; /* Megtartja az eredeti .text-brand sávszélességét */
    padding-right: 5%; /* Megtartja az eredeti .text-brand behúzását */
}

.hero-main-text .text-ampersand {
    font-size: 0.8em; /* Kicsit kisebb "&" jel, ha szeretnéd */
    color: var(--color-primary); /* Kiemelő szín az "&" jelnek */
    margin: 0 0.15em 0 0; /* Korábbi vertikális margó törölve, jobb oldali margó a Brand szó előtt */
    line-height: 1; /* Segít az igazításban */
    /* Mobil nézetben position:absolute lesz, felülírva ezt */
}

/* A 'Brand' szó stílusai */
.hero-main-text .text-brand {
    display: inline; /* Hogy az '&' mellett helyezkedjen el */
    color: var(--hero-design-text-color); /* Új szín beállítása */
    /* text-align és padding-right a .text-brand-container-re került */
    /* width: 70% és display:block a .text-brand-container-re (implicit) vagy .text-design-ra vonatkozik */
}
.hero-product-image {
    position: absolute;
    max-width: 650px; /* Kép maximális szélessége, növelve */
    width: clamp(250px, 40vw, 650px); /* Reszponzív képméret, növelve */
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Kép középre igazítása */
    z-index: 4; /* A kép a szöveg előtt jelenik meg */
    opacity: 1; /* Teljesen látható, ha szeretnéd */
    /* Ha a képnek van saját árnyéka, az itt jól mutathat */
}

/* A régi .hero-content h1 és p stílusok már nem relevánsak ebben a formában */
/* .hero-content h1 {...} */
/* .hero-content p {...} */

.cta-button { /* A gomb stílusai megmaradnak, ha máshol használod */
    display: inline-flex; /* Flexbox az ikon és szöveg igazításához */
    align-items: center; /* Vertikális középre igazítás */
    border: none;
    cursor: pointer;
    background-color: var(--color-primary);
    gap: 8px; /* Térköz az ikon és a szöveg között */
    color: var(--color-text-on-accent);
    font-weight: bold;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50px; /* Lekerekített sarkok */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px var(--shadow-main);
}

/* Stílus a CTA gombon belüli ikonhoz, ha szükséges lenne további finomhangolás */
/* .nav-cta-button i { */
    /* margin-right: 8px; /* Térköz az ikon és a szöveg között - most a gap kezeli */ */
/* } */

.cta-button:hover,
.cta-button:focus {
    background-color: #d35422; /* Enyhén sötétebb narancs hover-re */
    color: var(--color-text-on-accent);
    transform: translateY(-3px); /* Kis emelkedés hover esetén */
    box-shadow: var(--glow-primary);
}

/* Main és Footer alapstílusok (opcionális, de jó kiindulás) */
main {
    /* Padding removed to allow sections to go full-width with their backgrounds */
    padding: 0;
}

/* Services Overview Section */
.services-overview-section {
    padding: 80px 20px;
    background: transparent;
}

.services-overview-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 40px; /* Térköz a két oszlop között */
}

.services-overview-left {
    flex: 0 0 30%; /* Keskenyebb bal oszlop, nem növekszik, nem csökken, alap szélesség 30% */
    padding-right: 20px; /* Kis térköz a jobb oldali tartalomtól, ha egymás mellé kerülnek */
}

.services-overview-left h3 {
    font-family: 'Heebo', sans-serif; /* Vagy 'Audiowide', ha azt szeretnéd itt is */
    font-size: 3rem; /* Megfelelő méret a három sorhoz */
    font-weight: 900; /* Vastag */
    color: var(--color-primary); /* Sárga szín */
    line-height: 1.2; /* Szellős sorköz */
    text-align: right;
    margin-top: 0;
    margin-bottom: 25px;
}

.services-overview-left p {
    font-size: 0.95rem;
    color: var(--color-text-primary); /* Világosabb szöveg sötét háttéren */
    line-height: 1.7;
    margin-bottom: 30px;
    text-align: right;
}

.signature-container {
    max-width: 200px; /* Aláírás képének maximális szélessége */
    margin-left: auto; /* Jobbra igazításhoz */
    margin-right: 0;   /* Jobbra igazításhoz */
}

.signature-image {
    width: 100%;
    height: auto;
    display: block;
}

.signature-container .signature-dark {
    display: none;
}

.light-mode .signature-container .signature-light {
    display: none;
}
.light-mode .signature-container .signature-dark {
    display: block;
}

.services-overview-right {
    flex: 1; /* A jobb oszlop kitölti a maradék helyet */
    /* Vagy flex: 0 0 65%; ha fixebb arányt szeretnél */
}

.overview-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.overview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-overlay-glass {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(var(--color-bg-rgb), 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 25px 30px;
    border-top: 1px solid var(--color-border);
}

.image-overlay-glass h4 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-text-primary);
    transition: margin-bottom 0.4s ease-in-out;
}

.image-overlay-glass p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
}

.overview-image-container:hover .image-overlay-glass p {
    max-height: 100px; /* Elegendő magasság a szöveg megjelenítéséhez */
    opacity: 1;
}

.overview-image-container:hover .image-overlay-glass h4 {
    margin-bottom: 10px;
}

.service-item {
    margin-bottom: 20px;
}

.service-item:last-child {
    margin-bottom: 0;
}

.service-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-primary); /* Világosabb szöveg sötét háttéren */
    margin: 0;
}

.service-item p strong {
    font-weight: 700; /* Heebo 700-as súlya */
    color: var(--color-text-primary); /* Fehér kiemelés sötét háttéren */
}

.decorative-line {
    border: none;
    border-top: 2px dashed var(--color-primary);
    margin: 25px 0;
}

footer {
    text-align: center;
    padding: 25px;
    background-color: var(--footer-bg);
    color: var(--footer-text);
    border-top: 1px solid var(--footer-border);
}

/* Info Cards Szekció Stílusok */
.info-cards-section {
    background-color: transparent;
    padding: 10px 0; /* Felső és alsó padding a kártyák körül a szekción belül */
    width: 100%; /* Biztosítja, hogy kitöltse a rendelkezésre álló szélességet */
    box-sizing: border-box;
    position: relative; /* Szükséges a z-indexhez */
    z-index: 2; /* A videó fölött */
}

.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Alapértelmezett: 4 oszlop */
    gap: 0; /* Nincs rés a kártyák között */
    max-width: 100%; /* Biztosítja, hogy ne legyen nagyobb, mint a szülője */
}

.info-card {
    background: var(--color-surface);
    color: var(--color-text-primary);
    padding: 35px 30px;
    position: relative; /* A szám abszolút pozícionálásához */
    border: 1px solid var(--color-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}

.info-card .card-click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Biztosítja, hogy a link legyen felül a kattintáshoz */
    text-decoration: none; /* Eltávolítja az alapértelmezett aláhúzást */
    /* A link transzparens lesz, a kártya tartalma látszik alatta */
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--glow-primary);
}

.info-card-number {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--color-primary); /* Kiemelő szín a számnak */
    opacity: 0.8;
    line-height: 1;
}

.info-card-title {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--color-text-primary);
    margin-top: 60px; /* Hely a számnak */
    margin-bottom: 15px;
}

.info-card-description {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* Info Cards Reszponzivitás */
@media (max-width: 1024px) { /* Tablet nézet */
    .info-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 oszlop tableten */
    }
    .info-card-title {
        font-size: 1.4rem;
    }
}

/* Features Grid Szekció Stílusok */
.features-section {
    background: transparent;
    padding: 60px 0; /* Side padding removed, will be handled by .features-container */
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Added side padding to constrain content */
}

.section-title {
    text-align: center;
    font-family: 'Audiowide', sans-serif;
    font-size: 3rem;
    color: var(--color-text-primary);
    margin-bottom: 60px;
    text-transform: uppercase;
}

.features-section .section-title {
    /* This title is now styled by the generic .section-title rule */
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 egyenlő oszlop */
    grid-template-rows: repeat(2, auto);    /* 2 sor, automatikus magassággal */
    gap: 25px; /* Térköz a kártyák között */
}

.feature-card {
    background: var(--color-surface);
    color: var(--color-text-primary); /* Világos szöveg a sötét kártyán */
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px var(--shadow-main);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--color-border);
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--glow-highlight);
}

.feature-card h3 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-text-primary); /* Kiemeltebb cím a kártyán */
}

.feature-card h4 {
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--color-text-primary);
}

.feature-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1; /* A bekezdés kitölti a rendelkezésre álló helyet, hogy a linkek alul legyenek */
}

.feature-card-icon {
    color: var(--color-highlight);
    margin-bottom: 20px;
}

.feature-card .card-link {
    display: inline-flex; /* Flexbox az ikon és szöveg igazításához */
    align-items: center; /* Vertikális középre igazítás */
    gap: 8px; /* Térköz a szöveg és az ikon között */
    background-color: transparent;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: bold;
    align-self: flex-start; /* Link balra igazítása */
    padding: 10px 25px;
    border-radius: 50px;
    border: 1px solid var(--color-border);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-card .card-link::after {
    content: '\f061'; /* Font Awesome 'arrow-right' ikon */
    font-family: "Font Awesome 5 Free"; /* Bizonyosodj meg, hogy a Font Awesome be van töltve */
    font-weight: 900; /* Szükséges a 'solid' ikonokhoz */
    transition: transform 0.3s ease, color 0.3s ease;
}

.feature-card .card-link:hover,
.feature-card .card-link:focus {
    background-color: var(--color-secondary);
    color: var(--color-text-on-accent);
    border-color: var(--color-secondary);
    box-shadow: var(--glow-secondary);
}

.feature-card .card-link:hover::after,
.feature-card .card-link:focus::after {
    transform: translateX(4px); /* Az ikon elmozdul jobbra hover esetén */
}

.card-large-image {
    display: block;
    max-width: 220px;
    height: auto;
    margin: 0 auto 20px auto;
    object-fit: contain;
}

.card-large {
    grid-row: span 2; /* Az első kártya átfogja mindkét sort */
    background: var(--color-highlight);
    color: #0D0D0D;
}

.card-large h3,
.card-large h4 {
    color: #0D0D0D;
}

.card-large:hover {
    box-shadow: 0 0 35px -5px rgba(var(--color-highlight-rgb), 0.6);
}

.card-large .card-link {
    background-color: #1a1a1a;
    color: #f0f0f0;
    border: 1px solid transparent;
}

.card-large .card-link:hover,
.card-large .card-link:focus {
    background-color: #0D0D0D;
    color: var(--color-highlight);
    border-color: transparent;
    box-shadow: none;
}

/* Reszponzivitás */
@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: block; /* Hamburger gomb megjelenítése */
    }

    .nav-menu-wrapper {
        display: none; /* Alapból rejtett mobilon */
        flex-direction: column;
        position: absolute;
        top: var(--nav-height); /* Közvetlenül a navigációs sáv alatt */
        left: 0;
        width: 100%;
        background-color: var(--color-surface); /* Mobil menü új háttérszíne, illeszkedve a nav sávhoz */
        padding: 15px 0;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        z-index: 1000; /* A tartalom fölött, de a fix nav alatt, ha az magasabb z-indexű */
        gap: 0; /* Nincs szükség extra résre a flex-direction: column miatt */
    }

    .nav-menu-wrapper.active {
        display: flex; /* Megjelenítés, ha aktív */
    }

    .nav-links {
        flex-direction: column; /* Linkek egymás alatt */
        width: 100%;
        gap: 0; /* Nincs rés a li elemek között */
        align-items: center; /* Középre igazítás */
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block; /* Teljes szélességű kattintható terület */
        padding: 12px 20px;
        text-align: center;
        font-size: 1rem; /* Nagyobb betűméret a jobb olvashatóságért mobilon */
        border-bottom: 1px solid var(--color-surface); /* Finom elválasztó */
    }
    .nav-links li:last-child a {
        border-bottom: none; /* Utolsó elemnek ne legyen alsó kerete */
    }

    .nav-links a:hover,
    .nav-links a:focus {
        background-color: var(--color-surface); /* Kiemelés hover esetén */
        color: var(--color-primary);
        border-bottom-color: var(--color-surface); /* Ha van border, az is legyen a hover szín */
    }

    .nav-cta-button { /* Mobil menüben a CTA gomb */
        margin: 15px auto 10px auto; /* Térközök a mobil menüben */
        display: inline-block; /* Hogy a padding és margin működjön rendesen */
        width: auto; /* Ne nyúljon teljes szélességre, ha nem muszáj */
        /* A .cta-button általános stílusait örökli, de itt lehetne specifikus mobil méretezés, ha kell */
        padding: 10px 20px; /* Kicsit kisebb padding mobilon */
        font-size: 0.95rem;
    }

    .nav-container {
        padding: 0 15px; /* Kisebb padding mobilon */
    }

    .nav-logo {
        width: auto; /* Engedi, hogy a logó és a szöveg elférjen */
        font-size: 1.2rem; /* Betűméret a "AC Visual" szövegnek */
    }
    .nav-logo-image {
        height: 28px; /* Kisebb logókép mobilon */
    }
    .nav-logo-text {
        display: inline; /* Megjeleníti a szöveget mobilon */
    }

    .hero-content {
        flex-direction: column; /* Kép és szöveg egymás alá kerül */
        /* Új beállítások a .hero-main-text középre igazításához */
        position: relative; /* Az abszolút pozícionált képhez */
        width: 100%;
        height: 100%; /* Kitölti a szülő .hero-content-wrapper rendelkezésre álló magasságát */
        display: flex;
        justify-content: center;
    }

    /* Mobil nézetben a .text-brand-container blokk elemként viselkedik */
    .hero-main-text .text-brand-container {
       display: block; /* Alapból block, hogy a .hero-main-text flex column-ban egymás alá kerüljenek */
        width: auto; /* Hagyjuk, hogy a tartalom határozza meg, és a .hero-main-text középre igazítsa */
        padding: 0;
        /* Újra flex belsőleg az '&' és 'Brand' egymás mellé helyezéséhez */
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
    }

    /* Mobil nézetben a .text-brand (szó) továbbra is blokk és középre igazított */
    .hero-main-text .text-brand {
       display: inline; /* Hogy az '&' mellett legyen */
        width: auto; /* Hagyjuk, hogy a tartalom határozza meg */
        text-align: center;
        padding: 0; /* Eltávolítjuk a paddingot, ha a .text-brand-container kezeli */
    }

    .hero-product-image {
        position: absolute; /* Abszolút pozicionálás a .hero-content-hez képest */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Kép középre igazítása */
        width: clamp(270px, 85vw, 480px); /* Kicsit nagyobb, reszponzív képméret mobilon */
        max-width: 85%; /* Biztosítja, hogy ne lógjon ki kisebb képernyőkön */
        /* Eltávolítjuk a korábbi margin és order tulajdonságokat */
        z-index: 2; /* A szöveg fölött jelenik meg */
    }

    .hero-main-text {
        font-size: clamp(2.2rem, 12vw, 5rem); /* Megnövelt betűméret mobilra */
        width: 80vh; /* Az elforgatott szöveg hossza a képernyő magasságának 80%-a */
        transform: rotate(-90deg); /* Felirat elforgatása balra */
        /* Biztosítjuk a flexbox tulajdonságokat a belső elemek (sorok) középre igazításához */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* order, z-index, margin-bottom a korábbi mobil módosításokból öröklődik vagy érvényes */
        /* Eltávolítjuk az explicit order-t, hogy a .hero-content flexboxa középre tudja igazítani */
        /* margin-bottom: 10px; /* Ha szükséges, hogy ne érjen hozzá az alatta lévő social ikonokhoz, de a social ikonok absz. poz. */
        z-index: 1; /* A kép alatt */
    }
    .hero-main-text .text-design,
    .hero-main-text .text-brand {
        padding: 0; /* Eltávolítjuk az oldalsó paddingot a jobb középre igazításért */
        font-size: 2em; /* Örökli a .hero-main-text-ben beállított clamp() értéket */
        text-align: center; /* Középre igazítjuk a szöveget */
        box-sizing: border-box; /* Biztosítja, hogy a padding ne növelje az elem teljes szélességét */
        width: auto; /* Hagyjuk, hogy a tartalom határozza meg a szélességet */
        display: block; /* Mobil nézetben blokk elemek */
    }

    .hero-main-text .text-ampersand {
        position: static; /* Vissza a normál dokumentumfolyamba */
        transform: none; /* Eltávolítjuk a korábbi transzformációt */
        font-size: 2em; /* Méret a szülő .hero-main-text betűméretéhez képest */
        margin: 0 0.15em 0 0; /* Kis térköz a Brand szó előtt, hasonlóan az asztalihoz */
        /* A color: var(--color-primary); öröklődik a globális szabályból */
        z-index: auto; /* DESIGN és BRAND szövegek felett, de a kép alatt (ha a kép z-indexe magasabb) */
        line-height: 1; /* Megakadályozza a nem kívánt extra magasságot */
    }

    .cta-button {
        padding: 12px 25px;
        font-size: 0.9rem;
    }
    .section-title {
        font-size: 2.2rem;
    }

    .features-grid {
        grid-template-columns: 1fr; /* Mobilon egyoszlopos elrendezés */
        grid-template-rows: auto; /* Minden kártya saját sort kap */
    }

    .card-large {
        grid-row: auto; /* Mobilon a nagy kártya is csak egy sort foglal el */
    }

    .social-icons-sidebar {
        position: absolute;/* Áthelyezés a Hero szekció aljára, középre, vízszintesen */
        top: auto; /* Eltávolítjuk a vertikális középre igazítást */
        bottom: 30px; /* Távolság a Hero szekció aljától */
        left: 50%;
        transform: translateX(-50%); /* Csak horizontális középre igazítás */
        transform: translateY(-50%-60px); /* Eltávolítjuk a vertikális középre igazítást */
        flex-direction: row; /* Ikonok vízszintesen */
        padding: 10px 20px; /* Megfelelő padding a vízszintes elrendezéshez */
        gap: 20px; /* Térköz a vízszintesen elhelyezett ikonok között */
        border-radius: 50px; /* Oválisabb forma a vízszintes elrendezéshez */
    }

    .info-cards-section {
        display: none; /* Eltünteti az info kártyákat mobil nézetben */
    }

    /* Info Cards mobil nézet */
    .info-cards-grid {
        grid-template-columns: 1fr; /* 1 oszlop mobilon */
    }
    .info-card {
        padding: 30px 25px;
        text-align: left; /* Vagy center, ha úgy jobban tetszik */
    }
    .info-card-number {
        font-size: 2.5rem;
        top: 15px; left: 15px;
    }

    /* Services Overview mobil nézet */
    .services-overview-container {
        flex-direction: column; /* Oszlopok egymás alá */
        gap: 30px;
    }
    .services-overview-left,
    .services-overview-right {
        flex-basis: auto; /* Visszaállítjuk az alapértelmezett viselkedést */
        padding-right: 0;
    }

    .image-overlay-glass p {
        display: none; /* Mobilon a leírás rejtett */
    }
    .image-overlay-glass h4 {
        margin-bottom: 0; /* Biztosítjuk, hogy ne legyen alsó margó */
    }
}

@media (max-width: 480px) {
    .nav-links a { /* Még kisebb képernyőn a linkek betűmérete */
        font-size: 0.95rem;
        padding: 10px 15px;
    }

    .hero-section {
        min-height: 80vh; /* Kisebb magasság nagyon kis képernyőkön, hogy ne legyen túl sok görgetés */
    }
    .hero-main-text {
        /* Még kisebb képernyőn a clamp() alsó határa lehet mérvadóbb */
    }

    .social-icons-sidebar {
        padding: 10px 8px;
        gap: 15px; /* Kisebb térköz nagyon kis képernyőkön */
        bottom: 20px; /* Kicsit közelebb az aljához */
    }
    /* Javítás: Az ikon méretét az <i> elemen kell beállítani */
    .social-icons-sidebar a i {
        font-size: 1rem;
    }
}

/* Stílusok 1440px és nagyobb képernyőkre */
@media (min-width: 1440px) {
    .hero-main-text {
        font-size: clamp(4.5rem, 18vw, 15rem); /* Nagyobb betűméret 1440p+ felbontáson */
    }

    .hero-product-image {
        max-width: 800px; /* Nagyobb maximális szélesség a képnek */
        width: clamp(300px, 45vw, 800px); /* Nagyobb reszponzív méret */
    }
}

/* =================================
   Aloldal Specifikus Stílusok
   ================================= */

/* Aloldal Hero Szekció */
.subpage-hero {
    background: transparent;
    color: var(--color-text-primary);
    padding: 160px 20px 80px 20px; /* Felső padding a navi miatt, alsó kevesebb */
    text-align: center;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subpage-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.subpage-hero h1 {
    font-family: 'Audiowide', sans-serif;
    font-size: clamp(2.5rem, 8vw, 4rem);
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-text-primary);
}

.subpage-hero .subtitle {
    font-size: clamp(1rem, 3vw, 1.2rem);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Aloldal Fő Tartalmi Rész */
.subpage-content {
    padding: 80px 20px;
    background: transparent;
    color: var(--color-text-primary);
}

.content-container {
    max-width: 960px;
    margin: 0 auto;
}

.content-container h2 {
    font-size: 2.2rem;
    color: var(--color-primary);
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

.content-container h2:first-of-type {
    margin-top: 0;
}

.content-container p {
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Szolgáltatás Részletei Rács (pl. Arculat oldalon) */
.service-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.service-detail-item {
    text-align: center;
    padding: 30px 20px;
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}

.service-detail-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--glow-primary);
}

.service-detail-item i {
    color: var(--color-primary);
    margin-bottom: 20px;
}

.service-detail-item h3 {
    font-size: 1.5rem;
    color: var(--color-text-primary);
    margin-top: 0;
    margin-bottom: 10px;
}

/* Folyamat Lista (ol) */
.process-list {
    list-style: none;
    counter-reset: process-counter;
    padding-left: 0;
    margin: 40px 0;
}

.process-list li {
    counter-increment: process-counter;
    position: relative;
    padding: 15px 15px 15px 60px; /* Hely a számlálónak */
    margin-bottom: 20px;
    background-color: var(--color-surface);
    border-radius: 5px;
    border-left: 5px solid var(--color-primary);
}

.process-list li::before {
    content: '0' counter(process-counter);
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Audiowide', sans-serif;
    font-size: 1.8rem;
    color: var(--color-primary);
    opacity: 0.8;
}

.process-list li strong {
    color: var(--color-text-primary);
    display: block;
    margin-bottom: 5px;
}

/* CTA Gomb a tartalomban */
.content-container .cta-button {
    margin-top: 30px;
    display: inline-block; /* Hogy a margók érvényesüljenek */
}

/* Reszponzív igazítások az aloldalakhoz */
@media (max-width: 768px) {
    .subpage-hero {
        padding: 120px 20px 60px 20px;
        min-height: 30vh;
    }

    .content-container h2 {
        font-size: 1.8rem;
    }
}

/* =================================
   Téma Váltó Gomb
   ================================= */
.theme-toggle-btn {
    background: none;
    border: none;
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.theme-toggle-btn:hover {
    color: var(--color-primary);
}

.theme-toggle-btn .fa-sun {
    display: none; /* Alapból rejtve (sötét módban) */
}
.light-mode .theme-toggle-btn .fa-sun {
    display: block; /* Világos módban látszik */
}
.light-mode .theme-toggle-btn .fa-moon {
    display: none; /* Világos módban rejtve */
}

/* =================================
   Vissza a tetejére gomb
   ================================= */

.back-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    color: var(--color-text-on-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn:hover {
    background-color: var(--color-secondary);
}

/* =================================
   References Section
   ================================= */
.references-section {
    padding: 80px 20px;
    background: transparent;
    border-top: 1px solid var(--color-border);
}

.references-container {
    max-width: 1200px;
    margin: 0 auto;
}

.references-section .section-title {
    margin-bottom: 60px;
}

.logos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 60px 80px; /* row-gap column-gap */
}

.logo-item {
    opacity: 0;
    transform: translateY(20px);
}

.logo-item img {
    max-height: 50px;
    width: auto;
    filter: grayscale(100%) brightness(1.5);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.logo-item img:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.1);
}

/* =================================
   Contact Modal
   ================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: rgba(var(--color-bg-rgb), 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    padding: 40px;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease;
}

.modal-close-btn:hover {
    color: var(--color-primary);
}

.modal-content h2 {
    margin-top: 0;
    color: var(--color-primary);
    border: none;
    padding: 0;
    display: block;
    text-align: center;
}

.modal-content p {
    text-align: center;
    margin-bottom: 30px;
    color: var(--color-text-secondary);
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--color-text-secondary);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    background-color: rgba(var(--color-bg-rgb), 0.5);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-family: 'Heebo', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.3);
}

.contact-form .cta-button {
    width: 100%;
    justify-content: center;
}

.form-success-message {
    display: none; /* Hidden by default */
    text-align: center;
    padding: 40px 20px;
}

.form-success-message i {
    color: var(--color-highlight);
    margin-bottom: 20px;
}

.form-success-message h3 {
    color: var(--color-text-primary);
    margin-top: 0;
    margin-bottom: 10px;
}

.form-success-message p {
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* When the form is submitted, we'll hide it */
.modal-content.form-submitted .contact-form,
.modal-content.form-submitted > h2,
.modal-content.form-submitted > p {
    display: none;
}

.modal-content.form-submitted .form-success-message {
    display: block;
}