<div style="display: flex; flex-direction: column; gap: 24px; background: #1e1e1e; padding: 30px; border-radius: 12px; border: 1px solid #333; color: #eee; font-family: 'Segoe UI', Arial, sans-serif;">

    <div style="border-bottom: 2px solid #1976d2; padding-bottom: 15px;">

        <h2 style="margin: 0 0 10px 0; color: #1976d2; font-size: 24px;">📸 WebVidra Fotósoknak és Alkotóknak</h2>

        <p style="margin: 0; color: #aaa; font-size: 15px; line-height: 1.6;">

            Tudjuk, hogy a vizuális alkotóknak két dolog számít igazán: a <strong>lenyűgöző megjelenés</strong> és a <strong>villámgyors betöltés</strong>. A WebVidrát úgy építettük fel, hogy a portfóliód kompromisszumok nélkül ragyogjon.

        </p>

    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">

        <div style="background: #22a; background: #222; padding: 20px; border-radius: 8px; border: 1px solid #444; transition: transform 0.2s ease;" onmouseover="this.style.borderColor='#ff9800'" onmouseout="this.style.borderColor='#444'">

            <h3 style="margin: 0 0 10px 0; color: #ff9800; font-size: 16px;">⚡ Automatikus Képoptimalizálás</h3>

            <p style="margin: 0; color: #999; font-size: 13px; line-height: 1.5;">

                Ne bajlódj a tömörítéssel! Töltsd fel a nyers fotóidat, és a rendszer a háttérben automatikusan legenerálja a reszponzív, mobilbarát méreteket. Az eredmény? <strong>Garantált 100/100 PageSpeed pontszám.</strong>

            </p>

        </div>

        <div style="background: #222; padding: 20px; border-radius: 8px; border: 1px solid #444; transition: transform 0.2s ease;" onmouseover="this.style.borderColor='#4CAF50'" onmouseout="this.style.borderColor='#444'">

            <h3 style="margin: 0 0 10px 0; color: #4CAF50; font-size: 16px;">💰 Zéró Havidíj, Zéró Trükk</h3>

            <p style="margin: 0; color: #999; font-size: 13px; line-height: 1.5;">

                Felejtsd el a drága előfizetéseket. A WebVidra ingyenes, és ha az egykattintásos Netlify vagy Bunny.net publikálást választod, akár évi <strong>0 Ft-ból</strong> fenntarthatod a professzionális weboldalad.

            </p>

        </div>

        <div style="background: #222; padding: 20px; border-radius: 8px; border: 1px solid #444; transition: transform 0.2s ease;" onmouseover="this.style.borderColor='#FB542B'" onmouseout="this.style.borderColor='#444'">

            <h3 style="margin: 0 0 10px 0; color: #FB542B; font-size: 16px;">🔒 A Te Műved, A Te Gépeden</h3>

            <p style="margin: 0; color: #999; font-size: 13px; line-height: 1.5;">

                Mivel a szerkesztő offline fut, a nagy felbontású eredeti fájljaid és a forráskódod a te számítógépeden maradnak. Nincs "felhőbe zárás", a digitális galériád felett kizárólag te rendelkezel.

            </p>

        </div>

    </div>

    <div style="background: linear-gradient(135deg, #1976d2 0%, #2b5876 100%); padding: 20px; border-radius: 8px; text-align: center; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 15px rgba(0,0,0,0.2);">

        <p style="margin: 0 0 10px 0; font-size: 15px; font-weight: bold; color: white;">

            Próbáld ki a beépített <code style="background: rgba(0,0,0,0.3); padding: 3px 6px; border-radius: 4px;">Galéria</code> és <code style="background: rgba(0,0,0,0.3); padding: 3px 6px; border-radius: 4px;">Fotórács</code> blokkokat!

        </p>

        <p style="margin: 0; color: #e0e0e0; font-size: 13px;">

            Húzd be a blokkokat a vászonra, dobd be a képeidet, és az elrendezés magától alkalmazkodik a képernyő méretéhez. Nincs kódolás, csak tiszta vizuális élmény.

        </p>

    </div>

</div>