:root {
    /* Light theme (sections below hero) */
    --bg: #ffffff;
    --bg-alt: #f5f5f3;
    --bg-card: #ffffff;
    --text: #1a1a1a;
    --text-dim: #555555;
    --text-muted: #999999;
    --accent: #07B0ED;
    --accent-hover: #0598cc;
    /* Accentul liniei de business software — portocaliu, in loc de albastrul de evenimente */
    --accent-software: #F97316;
    --accent-software-hover: #FFA24D;
    --border: rgba(0,0,0,0.08);
    --border-dark: rgba(0,0,0,0.15);
    /* Font de sistem — nu se descarcă nimic. Browserul îl ia pe primul disponibil:
       Segoe UI pe Windows, San Francisco pe Mac și iPhone, Roboto pe Android. */
    --font-heading: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Outfit', sans-serif;
    --max-w: 1600px;
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 300;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }

a { color: var(--accent); text-decoration: none; transition: all 0.3s var(--ease); }
a:hover { color: var(--accent-hover); }

/* Accessibility */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 10000;
    background: var(--accent); color: #fff; padding: .8rem 1.5rem; font-weight: 600; font-size: .9rem;
}
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2.5rem; }

/* ═══════ NAVIGATION ═══════ */
/* Header opac, cu aceeasi culoare pe toata latimea si pe toate paginile.
   E sticky, nu fixed, deci ocupa spatiu in layout — nicio imagine nu mai trece pe sub el. */
.nav {
    position: sticky; top: 0; left: 0; right: 0; z-index: 1000;
    background: #181818;
    transition: box-shadow 0.4s var(--ease);
}
.nav.scrolled {
    box-shadow: 0 2px 24px rgba(0,0,0,0.45);
}

.nav-inner {
    max-width: var(--max-w); margin: 0 auto; padding: 0 2.5rem;
    display: flex; align-items: center; justify-content: space-between; height: 80px;
}

.nav-logo { display: flex; align-items: center; padding-right: 2rem; margin-right: 2rem; border-right: 1px solid rgba(255,255,255,0.2); }
.nav-logo img { height: 44px; width: auto; transition: opacity 0.3s; }
.nav-logo .nav-logo-light { display: block; }
.nav-logo .nav-logo-dark { display: none; }

.nav-links { display: flex; gap: 2.5rem; list-style: none; margin-right: auto; }
.nav-links a {
    color: rgba(255,255,255,0.7); font-size: 0.82rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1.5px;
    position: relative; padding: 0.5rem 0;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 2px; background: var(--accent); transition: width 0.3s ease;
}
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* Intrarea de meniu a liniei de software poarta accentul ei portocaliu */
.nav-links a.nav-software { color: var(--accent-software); }
.nav-links a.nav-software:hover, .nav-links a.nav-software.active { color: var(--accent-software-hover); }
.nav-links a.nav-software::after { background: var(--accent-software); }

.nav-contact {
    display: flex; align-items: center; gap: 1.5rem;
    padding-left: 2rem; margin-left: 2rem; border-left: 1px solid rgba(255,255,255,0.2);
}
.nav-phone, .nav-email { color: rgba(255,255,255,0.7); font-size: 0.82rem; font-weight: 400; text-decoration: none; }
.nav-phone i, .nav-email i { color: var(--accent); font-size: 1.1rem; margin-right: 0.5rem; }

.nav-social { display: flex; gap: 0.75rem; }
.nav-social a {
    color: rgba(255,255,255,0.5); font-size: 1rem;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; transition: all 0.3s;
}
.nav-social a:hover { color: var(--accent); border-color: var(--accent); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 5px; flex-direction: column; gap: 5px; }
.nav-toggle span { width: 25px; height: 2px; background: #fff; transition: all 0.3s; }

/* ═══════ HERO — doua panouri alaturate, fiecare cu fundalul lui ═══════ */
.hero {
    position: relative; overflow: hidden;
    /* Scade inaltimea header-ului, care acum ocupa spatiu in layout (sticky, nu fixed) */
    min-height: calc(100vh - 80px); min-height: calc(100dvh - 80px);
    display: grid; grid-template-columns: 2fr 1fr;
}
/* Continutul e ancorat sus, nu centrat: la deschiderea unui acordeon nu se mai
   recentreaza tot panoul, iar iconitele si titlurile celor doua panouri se aliniaza
   pe aceeasi linie, pentru ca ambele pornesc de la acelasi padding de sus. */
.hero-panel {
    position: relative; overflow: hidden; min-width: 0;
    display: flex; flex-direction: column; justify-content: flex-start;
}
.hero-panel-inner { position: relative; z-index: 3; width: 100%; }

/* ── Panou stanga: evenimente, pe imaginea din setari ── */
.hero-panel-events {
    /* Marginea din stanga se aliniaza cu gutterul containerului pe ecrane foarte late.
       Padding-ul de sus e identic cu cel al panoului de software (aliniere iconite/titluri). */
    padding: 4.5rem 3rem 11rem max(2.5rem, calc((100vw - var(--max-w)) / 2 + 2.5rem));
}
.hero-panel-events .hero-panel-inner {
    display: flex; flex-direction: column; gap: 2.25rem;
}
.hero-panel-bg { position: absolute; inset: 0; z-index: 0; background: #04131d; }
/* Fotografia e desaturata puternic, ca tenta albastra de deasupra sa o duca in aceeasi
   gama cromatica cu panoul de software — altfel tonurile calde din concert bat cu albastrul. */
.hero-panel-bg img {
    width: 100%; height: 100%; object-fit: cover; opacity: 0.78;
    filter: grayscale(0.45) contrast(1.05);
}
/* Voalul e puternic doar in stanga, sub text, si se deschide spre dreapta,
   ca fotografia sa ramana vizibila acolo unde nu sta continut. */
.hero-panel-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(100deg,
            rgba(4, 19, 29, 0.78) 0%,
            rgba(5, 24, 36, 0.52) 42%,
            rgba(6, 30, 45, 0.22) 100%),
        linear-gradient(to top,
            rgba(4, 19, 29, 0.72) 0%,
            rgba(4, 19, 29, 0.00) 40%);
}

/* ── Panou dreapta: software, fundal propriu, fara nicio legatura cu imaginea de evenimente ── */
.hero-panel-software {
    /* Accentul liniei de software, definit o singura data in :root.
       Se propaga la iconita, eticheta, buton si iconitele acordeoanelor din acest panou. */
    --panel-accent: var(--accent-software);
    --panel-accent-soft: rgba(249, 115, 22, 0.30);

    padding: 4.5rem 3rem 4rem;
    align-items: flex-start;
    background:
        radial-gradient(ellipse at 25% 12%, var(--panel-accent-soft) 0%, transparent 62%),
        linear-gradient(165deg, #10303f 0%, #0a3048 45%, #061e2c 100%);
    border-left: 1px solid rgba(255,255,255,0.07);
}
.hero-panel-software .hero-panel-icon { background: var(--panel-accent); }
.hero-panel-software .hero-label { color: var(--panel-accent); }
.hero-panel-software .hero-cta { background: var(--panel-accent); }
.hero-panel-software .hero-cta:hover { background: #fff; color: #111; }
.hero-panel-software .hero-acc-head i:first-child { color: var(--panel-accent); }
/* Ilustratia din panoul de software: aliniata jos-dreapta, discreta, si acoperita de un
   voal in degrade — acelasi rol pe care il are .hero-panel-overlay peste fotografia din stanga. */
.hero-panel-software .hero-panel-bg { background: transparent; }
/* Fotografia are dominanta verde; o desaturam ca voalul albastru de deasupra
   s-o aduca in aceeasi gama cu fotografia de evenimente din stanga. */
.hero-panel-software .hero-panel-bg img {
    opacity: 0.72; filter: grayscale(0.55) contrast(1.05); object-position: 78% center;
}
.hero-panel-software::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(100deg,
        rgba(4, 19, 29, 0.88) 0%,
        rgba(4, 19, 29, 0.62) 48%,
        rgba(4, 19, 29, 0.18) 100%);
}
/* Aceeasi grila pe ambele panouri — textura comuna le leaga vizual.
   Pe partea de evenimente e mai discreta, pentru ca acolo exista deja fotografia. */
.hero-panel-grid {
    position: absolute; inset: 0; z-index: 2;
    background-image:
        linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse at 45% 35%, #000 0%, transparent 78%);
            mask-image: radial-gradient(ellipse at 45% 35%, #000 0%, transparent 78%);
}
.hero-panel-events .hero-panel-grid { opacity: 0.45; }
.hero-panel-software .hero-panel-inner {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
    max-width: 480px;
    opacity: 0; animation: fadeUp 0.8s 0.6s forwards;
}
/* Acordeoanele din panoul de software trebuie sa umple latimea coloanei,
   altfel se string la latimea textului (parintele are align-items: flex-start). */
.hero-panel-software .hero-right { width: 100%; margin-top: 0.75rem; }

/* Spatiu rezervat pentru cel mai inalt continut de acordeon din fiecare grup.
   Fara asta, trecerea de la un acordeon la altul schimba inaltimea grupului si
   impinge in jos tot ce urmeaza in pagina. Cu el, inaltimea ramane constanta. */
.hero-panel-events .hero-right  { min-height: 340px; }
.hero-panel-software .hero-right { min-height: 400px; }

.hero-text {
    max-width: 680px;
}

/* Eticheta de deasupra titlului — identica pe ambele panouri */
.hero-label {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 3px; color: var(--accent); margin-bottom: 1.25rem;
    opacity: 0; animation: fadeUp 0.8s 0.2s forwards;
}
/* Badge-ul cu iconita — acelasi pe ambele panouri, ca sa se citeasca drept pereche */
.hero-panel-icon {
    width: 52px; height: 52px; border-radius: 10px;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 1.25rem;
    opacity: 0; animation: fadeUp 0.8s 0.15s forwards;
}

.hero h1 {
    font-family: var(--font-heading); font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 400; line-height: 1.3; margin-bottom: 2.5rem;
    color: #fff;
    opacity: 0; animation: fadeUp 0.8s 0.4s forwards;
}

/* Buton identic pe ambele panouri */
.hero-cta {
    display: inline-flex; align-items: center; gap: 0.7rem;
    background: var(--accent); color: #fff; padding: 0.95rem 2rem;
    font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.5px;
    border: none; border-radius: 4px;
    cursor: pointer; transition: all 0.35s var(--ease);
    opacity: 0; animation: fadeUp 0.8s 0.6s forwards;
}
.hero-cta:hover {
    background: #fff; color: #111;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* Hero accordions */
.hero-right {
    display: flex; flex-direction: column; gap: 0.5rem;
    opacity: 0; animation: fadeUp 0.8s 0.6s forwards;
}
.hero-acc {
    background: rgba(255,255,255,0.08); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
    overflow: hidden; transition: background 0.3s;
}
.hero-acc:hover, .hero-acc.open {
    background: rgba(255,255,255,0.12);
}
.hero-acc-head {
    width: 100%; display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem 1.4rem; background: none; border: none;
    color: #fff; font-family: var(--font-body); font-size: 1.15rem;
    font-weight: 600; cursor: pointer; text-align: left;
}
.hero-acc-head i:first-child {
    color: var(--accent); font-size: 1.5rem; width: 28px; text-align: center;
}
.hero-acc-head span { flex: 1; }
.hero-acc-arrow {
    font-size: 0.7rem; color: rgba(255,255,255,0.4);
    transition: transform 0.3s;
}
.hero-acc.open .hero-acc-arrow { transform: rotate(180deg); }
.hero-acc-body {
    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;
    color: rgba(255,255,255,0.95); font-size: 0.92rem; line-height: 1.7;
    padding: 0 1.4rem 0 1.4rem;
}
.hero-acc.open .hero-acc-body {
    max-height: 200px; padding: 0 1.4rem 1rem 1.4rem;
}

/* Continutul panoului de software — fundalul e al panoului, nu al unui card.
   Badge-ul, eticheta si butonul folosesc aceleasi clase ca panoul de evenimente. */
.hero-panel-software .hero-label { margin-bottom: 0; }
.hero-panel-software .hero-panel-icon { margin-bottom: 0.25rem; }
.hero-panel-software h2 {
    font-family: var(--font-heading); font-size: clamp(1.5rem, 1.9vw, 2rem);
    font-weight: 400; line-height: 1.2; color: #fff;
}
.hero-panel-software p {
    font-size: 0.92rem; line-height: 1.7; color: rgba(255,255,255,0.75);
}
.hero-panel-software .hero-cta { margin-top: 0.4rem; }

/* Hero accordions mobile section */
.hero-acc-mobile {
    display: none; background: #111; padding: 1.5rem 0;
}
.hero-acc-mobile .hero-acc {
    border-radius: 6px;
}
.hero-acc-mobile .container {
    display: flex; flex-direction: column; gap: 0.5rem;
}
/* Pe mobil cele doua seturi de acordeoane ajung in aceeasi lista. Fara marcaj,
   cele de software ar mosteni albastrul de evenimente si nimic n-ar arata ca
   apartin altei linii de business. */
.hero-acc-grup {
    font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2.5px;
    color: var(--accent); margin: 0.5rem 0 0.15rem;
}
.hero-acc-grup:first-child { margin-top: 0; }
.hero-acc-grup.software { color: var(--accent-software); }
.hero-acc-mobile .hero-acc-software .hero-acc-head i:first-child { color: var(--accent-software); }

/* Hero social icons - bottom left */
.hero-social {
    position: absolute; bottom: 5.5rem; left: 2.5rem;
    z-index: 6; display: flex; gap: 0.5rem;
    opacity: 0; animation: fadeUp 0.8s 0.8s forwards;
}
.hero-social a {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;
    color: rgba(255,255,255,0.6); font-size: 1rem; transition: all 0.3s;
}
.hero-social a:hover {
    color: #fff; border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.1);
}

/* Hero scroll indicator - bottom right */
.hero-scroll {
    position: absolute; bottom: 5.5rem; right: 3rem;
    z-index: 6; display: flex; align-items: center; gap: 0.6rem;
    cursor: pointer; opacity: 0; animation: fadeUp 0.8s 0.8s forwards;
}
.hero-scroll span {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 3px;
    color: rgba(255,255,255,0.6); font-weight: 500;
}
.hero-scroll-arrow {
    display: flex; flex-direction: column; align-items: center;
    animation: scrollBounce 2s ease-in-out infinite;
}
.hero-scroll-arrow i {
    font-size: 0.9rem; color: rgba(255,255,255,0.6);
}

/* ═══════ CLIENT LOGO BAR ═══════ */
.logo-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
    display: flex; align-items: center; z-index: 5;
}
.logo-marquee {
    flex: 1; overflow: hidden; padding: 0.8rem 0;
}
.logo-track {
    display: flex; align-items: center; gap: 2rem;
    width: max-content;
    animation: logoScroll 12s linear infinite;
}
.logo-track img {
    height: 45px; width: auto; opacity: 0.7;
    filter: brightness(0) invert(1);
    transition: opacity 0.3s;
    flex-shrink: 0;
}
.logo-track img:hover { opacity: 1; }
.logo-bar-text {
    flex-shrink: 0; padding: 0.8rem 1.5rem 0.8rem 2.5rem;
    color: #fff; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.5;
    text-align: left; border-right: 1px solid rgba(255,255,255,0.15);
}
@keyframes logoScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ═══════ SECTIONS (light theme) ═══════ */
.section { padding: 7rem 0; position: relative; }
.section-alt { background: var(--bg-alt); }

/* ═══════ PAGE HEADER (capul paginilor interioare) ═══════
   Pe fundal deschis, nu inchis: altfel se lipeste de header-ul negru si cele doua
   se citesc ca un singur bloc. Compact, fara spatiu mort. */
.page-header {
    background: var(--bg); position: relative;
    padding: 0.9rem 0 1.25rem;
    border-bottom: 1px solid var(--border);
}
/* Breadcrumb la stanga, titlul centrat pe latimea paginii.
   Grila cu trei coloane (a treia goala) tine titlul exact pe centru,
   indiferent cat de lung e breadcrumb-ul. */
.page-header-inner {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: baseline; gap: 0.5rem 1.5rem;
}
.page-header-title {
    grid-column: 2; justify-self: center; text-align: center;
    display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 0.7rem;
}
.page-breadcrumb {
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2.5px;
    color: var(--text-muted); margin-bottom: 0;
    display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0;
}
.page-breadcrumb a { color: var(--text-muted); }
.page-breadcrumb a:hover { color: var(--accent); }
.page-breadcrumb span[aria-current] { color: var(--text-dim); }
.page-breadcrumb-sep { color: var(--border-dark); }
.page-header h1 {
    font-family: var(--font-heading); font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--text); line-height: 1.2; font-weight: 400;
}
.page-header-sub {
    font-size: 0.9rem; color: var(--text-muted);
}
.page-header-sub::before { content: '— '; }
/* Sectiunea care urmeaza nu mai are nevoie de spatiul ei mare de sus —
   capul de pagina l-a furnizat deja. #software nu are clasa .section (randurile
   sunt edge-to-edge), deci are nevoie de regula lui. */
.page-header + .section { padding-top: 3rem; }
.page-header + #software { padding-top: 3.5rem; }

/* ═══════ ABOUT ═══════ */
.about-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.about-label {
    font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 3px; color: var(--text-muted); margin-bottom: 1rem;
}
.about-content h2 {
    font-family: var(--font-heading); font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 400;
    margin-bottom: 1.5rem; line-height: 1.2; color: var(--text);
}
.about-content p {
    color: var(--text-dim); font-size: 1.05rem; margin-bottom: 2rem; line-height: 1.8;
}
.about-cta {
    display: inline-flex; align-items: center; gap: 0.75rem;
    color: var(--text); font-weight: 600; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 2px;
    border: 1.5px solid var(--text);
    padding: 0.9rem 2rem;
    transition: all 0.3s;
}
.about-cta:hover {
    background: var(--text); color: #fff;
}

.about-image { position: relative; overflow: hidden; }
.about-image img {
    width: 100%; height: 450px; object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.about-image:hover img { transform: scale(1.03); }

/* Stat Cards */
.about-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
}
.stat-card {
    background: #fff; border-radius: 10px; padding: 1.8rem 1.5rem;
    text-align: center; box-shadow: 0 2px 15px rgba(0,0,0,0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.stat-card:hover {
    transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.stat-card i {
    font-size: 1.8rem; color: var(--accent); margin-bottom: 0.3rem;
}
.stat-number {
    font-family: var(--font-heading); font-size: 2.4rem;
    color: var(--text); line-height: 1;
    /* Cifre de aceeasi inaltime, aliniate pe linia de baza. Fonturile de interfata le au
       oricum implicit, dar regula ramane ca sa nu apara cifre inegale daca se schimba fontul. */
    font-variant-numeric: lining-nums tabular-nums;
}
.stat-label {
    font-size: 0.82rem; color: var(--text-muted); font-weight: 500;
    text-transform: uppercase; letter-spacing: 1px;
}

/* ═══════ ABOUT SERVICES ACCORDIONS ═══════ */
.about-services-header {
    display: flex; align-items: center; gap: 1.5rem;
    margin-top: 4rem; margin-bottom: 2rem;
}
.about-services-header h3 {
    font-family: var(--font-heading); font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 400;
    color: var(--text); white-space: nowrap;
}
.about-services-line {
    flex: 1; height: 1px; background: rgba(0,0,0,0.1);
}
.about-services {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
}
.about-services-col { display: flex; flex-direction: column; gap: 0.6rem; }
.about-acc {
    background: #fff; border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px; overflow: hidden; transition: box-shadow 0.3s;
}
.about-acc:hover, .about-acc.open { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.about-acc-head {
    width: 100%; display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.2rem; background: none; border: none;
    color: var(--text); font-family: var(--font-body);
    font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left;
}
.about-acc-head i:first-child { color: var(--accent); font-size: 1.3rem; width: 24px; text-align: center; }
.about-acc-head span { flex: 1; }
.about-acc-arrow { font-size: 0.65rem; color: rgba(0,0,0,0.3); transition: transform 0.3s; }
.about-acc.open .about-acc-arrow { transform: rotate(180deg); }
.about-acc-body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    padding: 0 1.2rem;
}
.about-acc-body > span {
    overflow: hidden;
    color: var(--text); font-size: 1rem; line-height: 1.7;
}
.about-acc.open .about-acc-body {
    grid-template-rows: 1fr;
    padding: 0 1.2rem 1rem;
}

/* ═══════ SERVICE ROWS (alternating text+image, light theme) ═══════ */
.service-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 500px;
}
.service-row:nth-child(odd) .service-text { background: var(--bg); }
.service-row:nth-child(even) .service-text { background: var(--bg-alt); }
.service-row.reverse .service-image { order: -1; }

/* Imaginea e scoasa din flux (`position: absolute`), ca sa nu mai contribuie cu inaltimea
   ei intrinseca la inaltimea randului. Altfel `height: 100%` nu se poate rezolva intr-un
   grid cu inaltime automata, imaginea cade pe inaltimea reala a fisierului, si o poza
   aproape patrata (raport sub ~1.48) intindea randul mult peste celelalte — 859px fata de
   500-646px. Acum inaltimea randului o da textul (minimum 500px, din `.service-row`), iar
   imaginea umple exact acel spatiu, indiferent de proportiile fisierului.
   `aspect-ratio` NU merge aici: anuleaza intinderea din grid si lasa gol sub imagine. */
.service-image { position: relative; overflow: hidden; }
.service-image img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.service-row:hover .service-image img { transform: scale(1.04); }

.service-text {
    display: flex; flex-direction: column; justify-content: center;
    padding: 4rem 5rem;
}
.service-text h3 {
    font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    margin-bottom: 1.5rem; line-height: 1.2; color: var(--text);
}
.service-text p {
    color: var(--text-dim); font-size: 1rem; line-height: 1.8; margin-bottom: 2rem;
}
.service-cta {
    display: inline-flex; align-items: center; gap: 0.75rem;
    color: var(--text); font-weight: 600; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 2px;
    border: 1.5px solid var(--text);
    padding: 0.9rem 2rem;
    align-self: flex-start;
    transition: all 0.3s;
}
.service-cta:hover { background: var(--text); color: #fff; }
.service-cta i { transition: transform 0.3s; }
.service-cta:hover i { transform: translateX(4px); }

/* Placeholder for services without image */
.service-placeholder {
    width: 100%; height: 100%; min-height: 400px;
    background: linear-gradient(135deg, #e8e4de 0%, #d4cfc5 100%);
    display: flex; align-items: center; justify-content: center;
}
.service-placeholder i {
    font-size: 4rem; color: var(--accent); opacity: 0.3;
}

/* ═══════ PORTFOLIO ═══════ */
.portfolio-header { text-align: center; margin-bottom: 2rem; }
.portfolio-header .about-label { display: inline; vertical-align: baseline; position: relative; top: 0.8em; }
.portfolio-header h2 {
    font-family: var(--font-heading); font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 400;
    color: var(--text); display: inline-flex; align-items: center; gap: 0.75rem;
}
.portfolio-accent { color: var(--accent); }

.portfolio-filters {
    display: flex; justify-content: center; gap: 0.75rem;
    margin-bottom: 3rem; flex-wrap: wrap;
}
.filter-btn {
    background: none; border: 1px solid var(--border-dark); color: var(--text-dim);
    padding: 0.5rem 1.5rem; font-family: var(--font-body); font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer;
    transition: all 0.3s; display: inline-flex; align-items: center; gap: 0.5rem;
    border-radius: 6px;
}
.filter-btn i { font-size: 0.85rem; }
.filter-btn:hover, .filter-btn.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
}

.portfolio-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem;
}
.portfolio-hidden { display: none !important; }
.load-more-wrap { text-align: center; margin-top: 2.5rem; }
.load-more-btn {
    display: inline-flex; align-items: center; gap: 0.75rem;
    padding: 0.9rem 2.5rem; font-family: var(--font-body);
    font-size: 0.82rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 2px; color: var(--text); background: transparent;
    border: 1.5px solid var(--text); cursor: pointer;
    transition: all 0.3s;
}
.load-more-btn:hover {
    background: var(--text); color: #fff; transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.portfolio-item {
    position: relative; overflow: hidden;
    background: var(--bg-alt); display: flex; flex-direction: column;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s var(--ease);
}
.portfolio-item:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.14);
}

/* Thumbnail grid layouts */
.portfolio-thumbs {
    display: grid; gap: 3px; width: 100%; aspect-ratio: 16/10; overflow: hidden;
    position: relative;
}
.portfolio-thumbs::after { display: none; }
.portfolio-thumbs.thumbs-1 { grid-template-columns: 1fr; }
.portfolio-thumbs.thumbs-2 { grid-template-columns: 1fr 1fr; }
.portfolio-thumbs.thumbs-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.portfolio-thumbs.thumbs-3 .portfolio-thumb:first-child { grid-row: 1 / -1; }
.portfolio-thumbs.thumbs-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.portfolio-thumb {
    position: relative; overflow: hidden; min-height: 0;
}
.portfolio-thumb img, .portfolio-thumb video {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s var(--ease);
    background: #1a1a2e;
}
.portfolio-thumb:hover img, .portfolio-thumb:hover video { transform: scale(1.06); }

.video-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.play-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 1;
}
.play-overlay i {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(0,0,0,0.55); border: 2px solid rgba(255,255,255,0.8);
    color: #fff; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    padding-left: 3px;
    transition: all 0.3s var(--ease);
    backdrop-filter: blur(4px);
}
.portfolio-thumb:hover .play-overlay i {
    transform: scale(1.12); background: rgba(7,176,237,0.7); border-color: #fff;
}

/* "+N" overlay on last thumb */
.portfolio-more {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 600; letter-spacing: 1px;
    pointer-events: none;
}

/* Title bar — overlays bottom of thumbnails */
.portfolio-title {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    background: var(--accent);
    padding: 0.65rem 1rem;
    cursor: default;
}
.portfolio-title h3 {
    font-family: var(--font-body); font-size: 1rem;
    font-weight: 500; color: #111; margin: 0;
    text-align: center; line-height: 1.3;
}

/* Category tags — below thumbnails */
.portfolio-cats {
    display: flex; gap: 0; flex-wrap: wrap; justify-content: center;
    align-items: center; padding: 0.6rem 1rem; background: #fff;
    cursor: default;
}
.portfolio-cat-tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.68rem; color: #555;
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500;
    padding: 0.15rem 0.4rem;
}
.portfolio-cat-tag i {
    color: var(--accent); font-size: 0.72rem;
}
.portfolio-cat-sep {
    width: 1px; height: 14px; background: rgba(0,0,0,0.15);
}

/* Lightbox */
.lightbox {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.95); align-items: center; justify-content: center;
    cursor: default;
}
.lightbox.active { display: flex; }
.lightbox img, .lightbox video { max-width: 85%; max-height: 85vh; object-fit: contain; cursor: default; }
.lightbox-close {
    position: absolute; top: 1.5rem; right: 1.5rem; color: white;
    font-size: 2rem; background: none; border: none; cursor: pointer;
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    transition: opacity 0.3s; z-index: 2;
}
.lightbox-close:hover { opacity: 0.7; }
.lightbox-prev, .lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
    color: #fff; font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; z-index: 2;
}
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-prev:hover, .lightbox-next:hover {
    background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5);
}
.lightbox-counter {
    position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.6); font-size: 0.85rem; font-weight: 400;
    letter-spacing: 2px; z-index: 2;
}

/* ═══════ CONTACT ═══════ */
.contact-heading {
    font-family: var(--font-heading); font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 400;
    color: var(--accent); margin-bottom: 3rem;
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.contact-info p {
    color: var(--text-dim); font-size: 1.05rem; margin-bottom: 2rem;
}

.contact-detail {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.8rem;
}
.contact-icon {
    width: 36px; height: 36px; border: 1px solid var(--border-dark);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: 0.85rem; flex-shrink: 0;
}
.contact-detail-text strong {
    display: inline; font-weight: 500; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-muted); margin-right: 0.2rem;
}
.contact-detail-text span { color: var(--text); font-size: 0.95rem; }

.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.contact-form input, .contact-form textarea {
    width: 100%; padding: 1rem 0; background: none; border: none;
    border-bottom: 1px solid var(--border-dark); color: var(--text);
    font-family: var(--font-body); font-size: 0.95rem; font-weight: 300;
    transition: border-color 0.3s; outline: none;
}
.contact-form input::placeholder, .contact-form textarea::placeholder {
    color: var(--text-muted);
}
.contact-form input:focus, .contact-form textarea:focus {
    border-color: var(--accent);
}
.contact-form textarea { resize: vertical; min-height: 120px; }

.btn-submit {
    display: inline-flex; align-items: center; gap: 0.75rem; align-self: flex-start;
    background: var(--text); color: #fff; padding: 1rem 2.5rem;
    border: 1.5px solid var(--text);
    font-family: var(--font-body); font-size: 0.82rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: 2px;
    cursor: pointer; transition: all 0.4s var(--ease);
}
.btn-submit:hover {
    background: transparent; color: var(--text);
    transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.form-consent {
    margin: 1rem 0; font-size: .85rem; color: var(--text-dim);
}
.form-consent label { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.form-consent input[type="checkbox"] { margin-top: .25rem; accent-color: var(--accent); }
.form-consent a { color: var(--accent); text-decoration: underline; }

/* ═══════ HARTA DIN CONTACT ═══════ */
.contact-map {
    margin-top: 4rem;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border);
    line-height: 0;   /* elimina spatiul fantoma de sub iframe */
}
.contact-map iframe {
    width: 100%; height: 420px; border: 0; display: block;
    filter: grayscale(0.25);
    transition: filter 0.4s var(--ease);
}
.contact-map:hover iframe { filter: grayscale(0); }

.form-success {
    background: rgba(7,176,237,0.08); border: 1px solid var(--accent);
    color: var(--accent-hover); padding: 1rem; text-align: center; display: none;
    border-radius: 4px; margin-bottom: 1rem;
}

/* ═══════ FOOTER (dark accent) ═══════ */
.footer {
    background: #111; border-top: none; padding: 0.9rem 0;
}
.footer-inner {
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 0.5rem 1.25rem; text-align: center;
}
.footer-logo { display: flex; align-items: center; }
.footer-logo img { height: 52px; width: auto; }
.footer-copy { color: rgba(255,255,255,0.85); font-size: 0.8rem; margin: 0; }
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a {
    width: 32px; height: 32px; font-size: 0.8rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5); transition: all 0.3s;
}
.footer-social a:hover {
    background: var(--accent); color: #111; border-color: var(--accent);
}

/* ═══════ ANIMATIONS ═══════ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

.reveal { opacity: 0; transform: translateY(50px); transition: all 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══════ GREUTATEA TITLURILOR ═══════
   Fontul de titlu e acum un sans de interfață, nu o serifă. La greutatea 400 titlurile
   ar fi prea slabe lângă textul de corp, care e tot un sans. 600 le redă prezența pe
   care o dădea contrastul gros-subțire al serifei. Tracking-ul negativ strânge literele,
   altfel titlurile mari dintr-un font de interfață par răsfirate.
   Un singur bloc — dacă se schimbă din nou fontul, se ajustează dintr-un loc. */
.hero h1,
.hero-panel-software h2,
.page-header h1,
.about-content h2,
.about-services-header h3,
.service-text h3,
.portfolio-header h2,
.contact-heading,
.stat-number {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* ═══════ ZONE DE ATINS PE MOBIL ═══════
   Apple si Google recomanda minimum 44x44px pentru orice element atins cu degetul.
   Sub acest prag creste rata de atingeri ratate — cel mai expus e butonul de meniu,
   primul lucru pe care il atinge cineva. Se aplica doar pe ecrane cu atingere. */
@media (max-width: 968px) {
    .nav-toggle {
        padding: 14px 10px; min-width: 44px; min-height: 44px;
        align-items: center; justify-content: center;
    }
    .hero-social a { width: 44px; height: 44px; }
    .hero-acc-head,
    .about-acc-head { min-height: 44px; }
    .filter-btn { min-height: 44px; }
}
@media (max-width: 768px) {
    /* Link-urile din meniul mobil: pe toata latimea, cu inaltime confortabila */
    .nav-links a {
        display: flex; align-items: center; justify-content: center;
        min-height: 44px; width: 100%;
    }
    .hero-acc-mobile .hero-acc-head { min-height: 44px; }
    /* Campurile de formular: 44px si font de minimum 16px, altfel iPhone-ul
       mareste automat pagina la focus si strica layout-ul. */
    .contact-form input,
    .contact-form textarea { min-height: 44px; font-size: 16px; }
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 968px) {
    /* Cele doua panouri se aseaza unul sub altul, fiecare cu fundalul lui */
    .hero { grid-template-columns: 1fr; min-height: 0; }
    .hero-panel-events { padding: 3.5rem 2rem 9rem; min-height: calc(100dvh - 80px); }
    .hero-panel-software { padding: 3.5rem 2rem; border-left: none; border-top: 1px solid rgba(255,255,255,0.07); }
    .hero-panel-software .hero-panel-inner { max-width: 100%; }
    .about-grid, .service-row, .contact-grid { grid-template-columns: 1fr; }
    .about-grid { gap: 2rem; }
    .service-row { min-height: auto; }
    .service-row.reverse .service-image { order: 0; }
    /* Coloana devine una singura, deci imaginea nu mai imparte randul cu textul si nu mai
       e intinsa de grid — aici `aspect-ratio` chiar se aplica si tine inaltimea la 3:2.
       Fara ea ar ramane fix pe `min-height`, adica vizibil mai turtita decat inainte. */
    .service-image { min-height: 250px; aspect-ratio: 3 / 2; }
    .service-text { padding: 2rem 1.5rem; }
    .service-text h3 { font-size: 1.4rem; margin-bottom: 0.8rem; }
    .service-text p { font-size: 0.9rem; margin-bottom: 1rem; line-height: 1.6; }
    .about-image img { height: 280px; }
    .about-stats { grid-template-columns: 1fr 1fr; }
    .about-content h2 { margin-bottom: 1rem; }
    .about-content p { font-size: 0.92rem; margin-bottom: 1rem; line-height: 1.6; }
    .stat-number { font-size: 2rem; }
    .form-row { grid-template-columns: 1fr; }
    .nav-contact { display: none; }
    .hero-social { left: 1.5rem; bottom: 5rem; }
    .hero-scroll { right: 1.5rem; bottom: 5rem; }
}

@media (max-width: 768px) {
    .page-header { padding: 0.75rem 0 1rem; }
    .page-header + .section { padding-top: 2rem; }
    /* Pe mobil nu mai e loc de doua elemente pe un rand — se aseaza unul sub altul, centrate */
    .page-header-inner { grid-template-columns: 1fr; justify-items: center; }
    .page-header-title { grid-column: 1; }
    .page-breadcrumb { justify-self: center; }
    .page-breadcrumb { font-size: 0.65rem; letter-spacing: 2px; margin-bottom: 0.6rem; }
    .nav-toggle { display: flex; }
    .nav-links {
        position: fixed; top: 80px; left: 0; right: 0;
        background: #181818; backdrop-filter: blur(20px);
        flex-direction: column; align-items: center; padding: 2rem; gap: 1.5rem;
        transform: translateY(-120%); opacity: 0; transition: all 0.4s var(--ease);
        pointer-events: none; border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: all; }
    .nav-links a { color: rgba(255,255,255,0.7) !important; }
    .nav-links a:hover, .nav-links a.active { color: #fff !important; }
    /* Pastreaza portocaliul si in meniul mobil, unde regulile de mai sus sunt !important */
    .nav-links a.nav-software { color: var(--accent-software) !important; }
    .nav-links a.nav-software:hover, .nav-links a.nav-software.active { color: var(--accent-software-hover) !important; }
    .hero-panel-events { padding: 3rem 1.5rem 8rem; }
    .hero-panel-software { padding: 2.75rem 1.5rem; }
    .hero-panel-software .hero-panel-inner { gap: 0.75rem; }
    .hero h1 { font-size: 1.3rem; margin-bottom: 1.5rem; }
    .hero-label { font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 1rem; }
    .hero-cta { padding: 0.8rem 1.8rem; font-size: 0.75rem; letter-spacing: 1.5px; }
    .hero-right { display: none; }
    .hero-panel-icon { width: 42px; height: 42px; font-size: 1.15rem; margin-bottom: 1rem; }
    .hero-panel-software h2 { font-size: 1.3rem; }
    .hero-panel-software p { font-size: 0.85rem; }
    .hero-acc-mobile { display: block; padding: 1rem 0; }
    .hero-acc-mobile .container { gap: 0.3rem; }
    .hero-acc-mobile .hero-acc-head { padding: 0.6rem 1rem; font-size: 0.88rem; gap: 0.6rem; }
    .hero-acc-mobile .hero-acc-head i:first-child { font-size: 1rem; width: 20px; }
    .hero-acc-mobile .hero-acc-body { font-size: 0.78rem; line-height: 1.6; }
    .hero-acc-mobile .hero-acc.open .hero-acc-body { padding: 0 1rem 0.7rem 1rem; }
    .section { padding: 2.5rem 0; }
    .container { padding: 0 1.2rem; }

    /* Portfolio mobile */
    .portfolio-header { margin-bottom: 1rem; }
    .portfolio-header h2 { font-size: 1.6rem; }
    .portfolio-grid { grid-template-columns: 1fr; gap: 0.8rem; }
    .portfolio-title { padding: 0.4rem 0.8rem; }
    .portfolio-title h3 { font-size: 0.9rem; }
    .portfolio-cats { padding: 0.4rem 0.8rem; }
    .portfolio-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-bottom: 1.5rem; }
    .portfolio-filters .filter-btn[data-category="all"] { display: none; }
    .filter-btn { padding: 0.4rem 0.5rem; font-size: 0.68rem; justify-content: center; text-align: center; }

    /* Contact mobile */
    .contact-heading { font-size: 1.4rem; margin-bottom: 1.2rem; }
    .contact-grid { gap: 1.5rem; }
    .contact-form { order: 2; gap: 1rem; }
    .contact-info { order: 1; }
    .contact-info p { font-size: 0.9rem; margin-bottom: 0.8rem; }
    .contact-detail { margin-bottom: 0.2rem; gap: 0.5rem; }
    .contact-icon { width: 20px; height: auto; border: none; border-radius: 0; font-size: 0.9rem; text-align: center; }
    .contact-detail-text strong { display: none; }
    .contact-detail-text span { font-size: 0.88rem; }
    /* 16px, nu mai putin: sub acest prag iOS Safari mareste automat pagina
       cand utilizatorul atinge campul, iar layout-ul sare. */
    .contact-form input, .contact-form textarea { padding: 0.7rem 0; font-size: 16px; }
    .contact-map { margin-top: 2.5rem; }
    .contact-map iframe { height: 280px; }
    .contact-form textarea { min-height: 80px; }
    .btn-submit { padding: 0.8rem 2rem; font-size: 0.75rem; }

    /* About mobile */
    .about-services-header { margin-top: 2.5rem; margin-bottom: 1.2rem; gap: 1rem; }
    .about-services-header h3 { font-size: clamp(1.5rem, 5vw, 2rem); }
    .about-services { grid-template-columns: 1fr; gap: 0.5rem; }
    .about-services-col { gap: 0.4rem; }
    .about-acc-head { padding: 0.8rem 1rem; font-size: 0.9rem; }
    .about-acc-head i:first-child { font-size: 1.1rem; }
    .about-label { margin-bottom: 0.5rem; font-size: 0.65rem; }
    .about-stats { gap: 0.5rem; }
    .stat-card { padding: 0.8rem 0.6rem; border-radius: 8px; gap: 0.15rem; }
    .stat-card i { font-size: 1.1rem; margin-bottom: 0; }
    .stat-number { font-size: 1.4rem; }
    .stat-label { font-size: 0.65rem; letter-spacing: 0.5px; }
    .about-cta { padding: 0.7rem 1.5rem; font-size: 0.75rem; }

    /* Footer mobile */
    .footer { padding: 0.7rem 0; }
    .footer-inner { flex-direction: column; text-align: center; gap: 0.4rem; }
    .footer-copy { font-size: 0.6rem; }

    /* Hero mobile */
    .hero-social { gap: 0.4rem; }
    .hero-social a { width: 44px; height: 44px; font-size: 0.9rem; }
    .hero-scroll span { display: none; }
    .logo-bar-text { display: none; }
    .logo-bar { padding: 0.3rem 0; }
    .logo-track img { height: 28px; }

    /* Lightbox mobile */
    .lightbox img, .lightbox video { max-width: 95%; max-height: 80vh; }
    .lightbox-prev { left: 0.5rem; width: 40px; height: 40px; }
    .lightbox-next { right: 0.5rem; width: 40px; height: 40px; }
    .lightbox-close { top: 0.75rem; right: 0.75rem; }
    .lightbox-counter { bottom: 1rem; }

    /* Service mobile */
    .service-image { min-height: 200px; }
    .service-text { padding: 1.5rem 1.2rem; }
    .service-text h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
    .service-text p { font-size: 0.85rem; margin-bottom: 0.8rem; }
    .service-cta { padding: 0.7rem 1.5rem; font-size: 0.75rem; }

    /* Play overlay mobile */
    .play-overlay i { width: 40px; height: 40px; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; padding-left: 2px; }
}