/* Alap Színváltozók */
:root {
    --color-primary: #eb5e28;          /* Elsődleges szín (pl. gradient kezdete, hover elemek) */
    --color-secondary: #2575fc;        /* Másodlagos szín (pl. gradient vége, aktív elemek) */
    --color-accent: #ffffff;           /* Kiemelő szín (pl. gombok háttere, világos szövegek) */
    --color-text-dark: #333333;        /* Sötét szövegszín (alapértelmezett szöveg) */
    --color-text-light: #ffffff;       /* Világos szövegszín (sötét háttéren) */

    --color-background-light: #f4f4f4; /* Világos háttérszín (pl. footer) */
    --color-border-light: #dddddd;     /* Világos keretszín */

    --color-button-bg: var(--color-accent);
    --color-button-text: var(--color-secondary);
    --color-button-bg-hover: #f0f0f0;
    --color-button-text-hover: var(--color-primary);

    /* Sötét téma háttér és szövegszínek */
    --color-dark-background-primary: #121212 ;  /* Sötétkék-lila alapháttér */
    --color-dark-background-secondary: #24272c; /* Egy árnyalattal sötétebb másodlagos háttér */
    --color-dark-text-primary: #e0e0e0;        /* Világos szürke szöveg sötét háttéren */
    --color-dark-text-secondary: #b0b0b0;      /* Halványabb szürke másodlagos szöveg sötét háttéren */

    --shadow-main: rgba(0, 0, 0, 0.2);
    --shadow-hover: rgba(0, 0, 0, 0.25);

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


.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-dark);
    background-color: var(--color-accent); /* Alapértelmezett háttérszín a body-nak */
    scroll-behavior: smooth; /* Sima görgetés az oldalon belüli linkekhez */
}

/* Navigációs Sáv Stílusok */
.main-navigation {
    background-color: var(--color-dark-background-primary); /* Navigációs sáv új háttérszíne */
    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 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    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-light);
    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-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-light); /* 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: 3px;
    background-color: var(--color-text-light);
    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-light);
    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-light); /* 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: linear-gradient(to right, var(--color-dark-background-primary) 0%, var(--color-dark-background-secondary) 100%); /* Modern gradient háttér */
    color: var(--color-text-light);
    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-secondary); /* Kiemelés hover esetén */
    border-bottom-color: var(--color-secondary);
}

.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-light); /* 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-light);
    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(--color-dark-text-secondary); /* Ú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(--color-dark-text-secondary); /* Ú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 */
    background-color: var(--color-primary);
    gap: 8px; /* Térköz az ikon és a szöveg között */
    color: var(--color-dark-text-primary);
    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 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: var(--color-button-bg-hover);
    color: var(--color-button-text-hover);
    transform: translateY(-3px); /* Kis emelkedés hover esetén */
    box-shadow: 0 6px 20px var(--shadow-hover);
}

/* 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: linear-gradient(to right, var(--color-dark-background-primary) 0%, var(--color-dark-background-secondary) 100%); /* Sötét gradient háttér */
}

.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-dark-text-primary); /* Világosabb szöveg sötét háttéren */
    line-height: 1.7;
    margin-bottom: 30px;
    text-align: right;
}

.signature-placeholder {
    max-width: 200px; /* Aláírás képének maximális szélessége */
    height: auto;
    display: block; /* Hogy a margin auto működjön, ha középre szeretnéd */
    margin-left: auto; /* Jobbra igazításhoz */
    margin-right: 0;   /* Jobbra igazításhoz */
}

.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 */
}

.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-dark-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-accent); /* 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: 20px;
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    border-top: 1px solid var(--color-border-light);
}

/* Info Cards Szekció Stílusok */
.info-cards-section {
    /* Eltávolítjuk az abszolút pozícionálást, normál flex item lesz */
    background-color: var(--color-dark-background-primary); /* Sötét háttér a szekciónak */
    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-color: var(--color-dark-background-secondary); /* Kártyák háttere, kissé eltérő a szekciótól */
    color: var(--color-dark-text-primary);
    padding: 35px 30px;
    position: relative; /* A szám abszolút pozícionálásához */
    /* Opcionális: finom belső keret, ha a kártya és szekció háttere túl hasonló lenne */
    border: 1px solid rgba(255, 255, 255, 0.05); 
    transition: background-color 0.3s ease;
}

.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 {
    background-color: #2a3b57; /* Enyhén világosabb háttér hover esetén */
}

.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.6rem;
    color: var(--color-text-light);
    margin-top: 60px; /* Hely a számnak */
    margin-bottom: 15px;
}

.info-card-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-dark-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 changed to match hero section, padding adjusted for full-width background */
    background: linear-gradient(to right, var(--color-dark-background-primary) 0%, var(--color-dark-background-secondary) 100%);
    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-size: 2.5rem;
    color: var(--color-text-dark);
    margin-bottom: 40px;
}

.features-section .section-title {
    color: var(--color-accent); /* Title color adjusted for dark background (white) */
}

.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-color: var(--color-dark-background-secondary); /* Sötét háttér a kártyáknak */
    color: var(--color-dark-text-primary); /* Világos szöveg a sötét kártyán */
    padding: 25px;
    border-radius: 10px; /* Lekerekített sarkok */
    box-shadow: 0 5px 15px var(--shadow-main);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--shadow-hover);
}

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

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

.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 .card-link {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: bold;
    align-self: flex-start; /* Link balra igazítása */
}

.card-large {
    grid-row: span 2; /* Az első kártya átfogja mindkét sort */
}

/* 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-dark-background-secondary); /* 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-dark-background-secondary); /* 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-dark-background-secondary); /* Kiemelés hover esetén */
        color: var(--color-accent);
        border-bottom-color: var(--color-dark-background-secondary); /* 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: 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;
    }
}

@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 */
    }
}
}