<!-- SEKCJA: Videoreferencje — CSS-only, namespaced #vr -->
<style>
/* SCOPED: tylko wewnątrz #vr */
#vr{
--bg1:#0b0f17; --bg2:#0d1320; --panel:#101725; --panel2:#0f1627;
--text:#ecf1f8; --muted:#9aa4b2; --line:#21314e;
--accent:#7c5cff; --accent2:#4ad4ff; --good:#34d399; --warn:#ffd166;
--radius:18px;
color:var(--text);
}
#vr *{ box-sizing:border-box }
/* Kontener sekcji */
#vr .vr-wrap{
max-width:1100px; margin:28px auto; padding:clamp(16px,3vw,28px);
background:
radial-gradient(1200px 500px at 8% -20%, #15213a 0%, transparent 60%),
linear-gradient(180deg,var(--panel),var(--panel2));
border:1px solid #1e273b; border-radius:calc(var(--radius) + 4px);
box-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
}
/* Header */
#vr .vr-eyebrow{
display:inline-flex; gap:10px; align-items:center;
font-size:12px; color:#111; background:linear-gradient(180deg,#b8c2ff,#7c5cff);
border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:6px 10px; letter-spacing:.2px
}
#vr .vr-title{margin:8px 0 0; font-size: clamp(22px, 3.2vw, 32px)}
#vr .vr-sub{margin:4px 0 0; color:var(--muted); font-size: clamp(14px,2.2vw,18px)}
/* Siatka kart */
#vr .vr-grid{
margin-top:18px;
display:grid; gap:16px;
grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){ #vr .vr-grid{ grid-template-columns: repeat(2,1fr) } }
@media (max-width: 640px){ #vr .vr-grid{ grid-template-columns: 1fr } }
/* Karta wideo */
#vr .vr-card{
background:linear-gradient(180deg,#11192a,#0f1524);
border:1px solid #22324f; border-radius:16px; padding:12px;
box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.02);
display:grid; gap:10px; align-content:start;
}
/* Player */
#vr .vr-vid{
position:relative; aspect-ratio:16 / 9; border-radius:12px; overflow:hidden;
background: radial-gradient(600px 300px at 20% -10%, #1a2a4d 0%, transparent 60%), #0b1222;
border:1px solid #22324f;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 18px rgba(0,0,0,.25);
}
#vr .vr-vid iframe{
position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
/* Opis pod wideo */
#vr .vr-meta{ display:grid; gap:6px }
#vr .vr-name{ margin:0; font-weight:700; font-size:15px }
#vr .vr-role{ margin:0; color:var(--muted); font-size:13px }
#vr .vr-quote{
margin:0; color:var(--text); opacity:.92; font-size:14px;
border-left:3px solid var(--accent2); padding-left:10px;
}
/* Pasek logotypu firmy (opcjonalny) */
#vr .vr-brand{
display:flex; align-items:center; gap:10px; justify-content:flex-start; margin-top:2px
}
#vr .vr-logo{
width:72px; height:40px; border-radius:10px; background:#0c1220; border:1px solid #22324f;
display:grid; place-items:center; overflow:hidden;
}
#vr .vr-logo img{ max-width:90%; max-height:90%; object-fit:contain; display:block }
/* Mini CTA */
#vr .vr-cta{
margin-top:12px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
border-top:1px dashed var(--line); padding-top:12px;
}
#vr .vr-btn{
display:inline-flex; align-items:center; gap:10px; text-decoration:none;
border-radius:14px; padding:10px 16px; font-weight:600;
background:linear-gradient(90deg,var(--accent),var(--accent2));
color:#0b0f17; border:1px solid rgba(255,255,255,.25);
box-shadow:0 6px 18px rgba(76,133,255,.35), inset 0 1px 0 rgba(255,255,255,.25);
transition:transform .15s ease, box-shadow .15s ease;
}
#vr .vr-btn:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(76,133,255,.45) }
#vr .vr-safe{ color:var(--muted); font-size:12px }
</style>
<section id="vr" aria-label="Videoreferencje kursantów">
<div class="vr-wrap">
<h2 class="vr-title">Videoreferencje </h2>
<p class="vr-sub">Krótko i na temat — co mówią Klienci po skorzystaniu z usług.</p>
<!-- SIATKA WIDEO -->
<div class="vr-grid">
<!-- YouTube -->
<article class="vr-card">
<div class="vr-vid">
<!-- PODMIEŃ src na YouTube EMBED: https://www.youtube.com/embed/VIDEO_ID -->
<iframe loading="vr-card"
src="https://fast.wistia.net/embed/iframe/ze3cnm3zjn"
title="Videoreferencja — YouTube"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div class="vr-meta">
<p class="vr-name">Krzysztof, JBS Europe</p>
<p class="vr-quote">Wdrożenie platformy do sprzedaży kursów, praca na lejkiem, usługi konsultingowe dla Klienta zewnętrznego, usługi prawne dla ecommerce, umowy, regulaminy</p>
<div class="vr-brand">
</div>
</article>
<!-- Vimeo -->
<article class="vr-card">
<div class="vr-vid">
<!-- PODMIEŃ src na Vimeo EMBED: https://player.vimeo.com/video/VIDEO_ID -->
<iframe loading="lazy"
src="https://fast.wistia.net/embed/iframe/gyrha8xyg8"
title="Videoreferencja — Vimeo"
allow="autoplay; fullscreen; picture-in-picture"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div class="vr-meta">
<p class="vr-name">Aleksander, prezes zarządu Wydawnictwa Element Sp. zo.o.</p>
<p class="vr-quote">Skuteczne zaprojektowanie sprzedaży usług highticket, wdrożenie rozwiązań informatycznych, usługi prawne dla ecommerce, umowy, regulaminy.</p>
<div class="vr-brand">
</div>
</article>
<!-- Wistia -->
<article class="vr-card">
<div class="vr-vid">
<!-- PODMIEŃ src na Wistia EMBED: https://fast.wistia.net/embed/iframe/VIDEO_ID -->
<iframe loading="lazy"
src="https://fast.wistia.net/embed/iframe/c6iz9e5qwr"
title="Videoreferencja — Wistia"
allow="autoplay; fullscreen; picture-in-picture"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div class="vr-meta">
<p class="vr-name">Lidjana, właścicielka lidjana.pl</p>
<!-- <p class="vr-role">Kreator + LMS</p> -->
<p class="vr-quote">Skuteczne zaprojektowanie sprzedaży usług highticket, wdrożenie rozwiązań informatycznych, usługi prawne dla ecommerce, umowy, regulaminy.</p>
<div class="vr-brand">
</div>
</article>
</div>
<!-- CTA pod siatką -->
<div class="vr-cta">
</div>
</div>
<!-- SVG sprite (namespaced) -->
<svg width="0" height="0" style="position:absolute;opacity:0;pointer-events:none">
<defs>
<symbol id="vr-ico-play" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5v14l11-7z"/></symbol>
<symbol id="vr-ico-cart" viewBox="0 0 24 24"><path fill="currentColor" d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 .001 4.001A2 2 0 0 0 17 18zM6 6h14l-1.5 8H8.3L7.6 9H4V6h2z"/></symbol>
</defs>
</svg>
</section>
<!-- /SEKCJA: Videoreferencje -->