.hero-preview-card{background:#fff;border-radius:2rem;box-shadow:0 30px 70px rgba(15,23,42,.15);overflow:hidden}.hero-preview-header{align-items:center;background:#f8fafc;display:flex;font-size:.85rem;gap:1rem;padding:1rem 1.25rem}.hero-preview-dots{display:flex;gap:.4rem}.hero-preview-dot{border-radius:50%;height:10px;width:10px}.red{background:#ff5f56}.yellow{background:#ffbd2e}.green{background:#27c93f}.hero-preview-url{color:#64748b;margin:0 auto}.hero-video-grid{gap:1.5rem;padding:2rem}.hero-video-thumb{aspect-ratio:8/7;background:none;border:none;border-radius:1.5rem}.play-icon{background:rgba(0,0,0,.35);color:#fff;display:grid;font-size:2rem;inset:0;place-items:center;position:absolute}.video-badge{backdrop-filter:blur(6px);bottom:.75rem;display:inline-flex;gap:.4rem;left:.75rem;padding:.35rem .6rem}.video-badge-icon{background:#0ea5e9;color:#fff;display:grid;font-size:.75rem;height:26px;place-items:center;width:26px}.video-badge-text{color:#fff;font-size:.75rem;font-weight:600;white-space:nowrap}.video-back-btn{background:none;border:none;color:var(--primary);cursor:pointer;font-weight:600;margin-top:1rem}.hero-preview-body{display:block}.hero-video-grid{align-items:stretch;margin:0 auto;max-width:100%}.hero-preview-body{align-items:center;display:flex;justify-content:center;min-height:420px}.hero-video-grid{max-width:900px;width:100%}.hero-preview-body{height:calc(100% - 56px);min-height:520px;position:relative;width:100%}.hero-video-player{display:none;inset:0;position:absolute}.hero-video-player video{background:#000;border-radius:2rem;height:100%;object-fit:cover;width:100%}.video-close-btn{backdrop-filter:blur(6px);background:hsla(0,0%,100%,.35);border:none;border-radius:50%;color:#fff;cursor:pointer;display:grid;font-size:1.25rem;font-weight:600;height:36px;place-items:center;position:absolute;right:1.25rem;top:1.25rem;width:36px;z-index:3}.video-close-btn:hover{background:hsla(0,0%,100%,.55)}.hero-video-grid{display:grid;gap:24px;grid-template-columns:repeat(4,1fr)}.hero-video-thumb{border-radius:18px;cursor:pointer;opacity:.85;overflow:hidden;position:relative;transform:scale(.95);transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s ease,box-shadow .45s cubic-bezier(.4,0,.2,1),filter .35s ease}.hero-video-thumb img{height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.4,0,.2,1);width:100%}.hero-video-thumb:hover{box-shadow:0 25px 60px rgba(25,145,210,.35),0 0 0 1px rgba(25,145,210,.25);opacity:1;transform:scale(1.08);z-index:5}.hero-video-thumb:hover img{transform:scale(1.1)}.hero-video-grid:hover .hero-video-thumb:not(:hover){filter:blur(.2px);opacity:.6;transform:scale(.9)}.hero-video-thumb .play-icon{align-items:center;background:rgba(0,0,0,.55);border-radius:50%;color:#fff;display:flex;font-size:22px;height:56px;inset:0;justify-content:center;margin:auto;position:absolute;transition:transform .35s ease,background .35s ease;width:56px}.hero-video-thumb:hover .play-icon{background:rgba(25,145,210,.85);transform:scale(1.15)}.video-badge{align-items:center;background:rgba(0,0,0,.65);border-radius:999px;bottom:12px;color:#fff;display:flex;font-size:13px;font-weight:600;gap:8px;left:12px;padding:6px 10px;position:absolute;transition:background .3s ease}.hero-video-thumb:hover .video-badge{background:rgba(0,0,0,.8)}.video-badge-icon{align-items:center;background:#1991d2;border-radius:50%;display:flex;font-size:12px;font-weight:700;height:22px;justify-content:center;width:22px}@media (max-width:768px){.hero-video-grid{grid-template-columns:repeat(2,1fr)}}.hero-float-1{animation:drift 12s linear infinite alternate;background:rgba(8,145,178,.1);border-radius:1rem;height:5rem;position:absolute;right:5rem;top:8rem;width:5rem}@keyframes drift{0%{transform:translate(0) rotate(10deg)}25%{transform:translate(-15px,-10px) rotate(14deg)}50%{transform:translate(10px,-25px) rotate(18deg)}75%{transform:translate(-20px,5px) rotate(12deg)}to{transform:translate(0) rotate(10deg)}}.hero-float-2{animation:floatBox2 7s ease-in-out infinite;background:rgba(8,145,178,.1);border-radius:.75rem;bottom:8rem;height:4rem;left:5rem;position:absolute;transform:rotate(-12deg);width:4rem}@keyframes floatBox2{0%{transform:translate(0) rotate(-12deg)}50%{transform:translate(25px,-15px) rotate(-18deg)}to{transform:translate(0) rotate(-12deg)}}