.pf-hero-visual{
 --pf-red:#C8102E;--pf-gray:#505759;--pf-offwhite:#F7F6F2;
 width:100%;position:relative;
}
.pf-hero-visual__stage{position:relative;width:100%;min-height:590px;overflow:visible;}
.pf-hero-visual__frame{
 position:absolute;inset:7% 4% 7% 10%;overflow:hidden;border-radius:26px;
 background:#eee;z-index:2;box-shadow:0 18px 50px rgba(31,34,35,.08);
}
.pf-hero-visual__image{width:100%;height:100%;display:block;object-fit:cover;object-position:center;animation:pfHeroImageIn .95s cubic-bezier(.22,.61,.36,1) both;}
.pf-hero-visual__placeholder{width:100%;height:100%;min-height:520px;display:grid;place-items:center;padding:30px;text-align:center;color:var(--pf-gray);background:#f2f2ef;}

.pf-hero-dot-matrix{
 position:absolute;z-index:1;pointer-events:none;opacity:.72;
 background-image:radial-gradient(circle,rgba(200,16,46,.30) 0 2.8px,transparent 3px);
 background-size:22px 22px;
 animation:pfMatrixFloat 8s ease-in-out infinite alternate;
}
.pf-hero-dot-matrix--top{
 top:0;right:2%;width:40%;height:25%;
 -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 25%,#000 100%);
 mask-image:linear-gradient(to right,transparent 0%,#000 25%,#000 100%);
}
.pf-hero-dot-matrix--left{
 left:0;top:15%;width:25%;height:72%;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
 animation-delay:-2s;
}

.pf-hero-bubbles{position:absolute;inset:0;z-index:5;pointer-events:none;}
.pf-hero-bubble{
 position:absolute;display:flex;align-items:center;gap:14px;
 width:min(310px,48%);min-height:106px;padding:16px 18px;
 background:rgba(255,255,255,.97);border:1px solid rgba(80,87,89,.10);
 border-radius:18px;box-shadow:0 8px 20px rgba(31,34,35,.07),0 20px 48px rgba(31,34,35,.13);
 color:var(--pf-gray);opacity:0;transform:translateY(18px) scale(.97);
 backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.pf-hero-visual.is-ready .pf-hero-bubble{animation:pfHeroBubbleIn .72s cubic-bezier(.22,.61,.36,1) forwards;}
.pf-hero-visual.is-ready .pf-hero-bubble--1{animation-delay:.18s}
.pf-hero-visual.is-ready .pf-hero-bubble--2{animation-delay:.33s}
.pf-hero-visual.is-ready .pf-hero-bubble--3{animation-delay:.48s}

.pf-hero-bubble--1{top:0;left:3%}
.pf-hero-bubble--2{left:0;top:45%}
.pf-hero-bubble--3{right:0;bottom:0}

.pf-hero-bubble__icon{
 width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;
 border-radius:50%;background:var(--pf-offwhite);
}
.pf-hero-bubble__icon img{display:block;width:34px;height:34px;object-fit:contain;}
.pf-hero-bubble__copy{display:flex;flex-direction:column;gap:4px;min-width:0;}
.pf-hero-bubble__title{display:block;color:#2f3233;font-size:16px;line-height:1.25;font-weight:700;}
.pf-hero-bubble__description{display:block;color:var(--pf-gray);font-size:14px;line-height:1.45;font-weight:400;}

@keyframes pfHeroImageIn{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@keyframes pfHeroBubbleIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pfMatrixFloat{from{transform:translate3d(0,0,0);opacity:.56}to{transform:translate3d(8px,-7px,0);opacity:.82}}

@media(max-width:900px){
 .pf-hero-visual__stage{min-height:520px}
 .pf-hero-visual__frame{inset:8% 3% 8% 8%}
 .pf-hero-bubble{width:min(280px,54%);min-height:96px;padding:13px 15px}
 .pf-hero-bubble__icon{width:50px;height:50px;flex-basis:50px}
 .pf-hero-bubble__icon img{width:29px;height:29px}
 .pf-hero-bubble__title{font-size:14px}
 .pf-hero-bubble__description{font-size:12px}
}
@media(max-width:640px){
 .pf-hero-visual__stage{min-height:560px;padding-top:60px;padding-bottom:58px}
 .pf-hero-visual__frame{inset:60px 8px 58px 8px;border-radius:20px}
 .pf-hero-dot-matrix--top{width:72%;height:20%}
 .pf-hero-dot-matrix--left{width:38%;height:58%;top:22%}
 .pf-hero-bubble{width:min(290px,calc(100% - 24px));min-height:82px;padding:11px 13px;gap:11px;border-radius:15px}
 .pf-hero-bubble--1{top:0;left:12px}
 .pf-hero-bubble--2{left:12px;top:48%}
 .pf-hero-bubble--3{right:12px;bottom:0}
 .pf-hero-bubble__icon{width:44px;height:44px;flex-basis:44px}
 .pf-hero-bubble__icon img{width:26px;height:26px}
 .pf-hero-bubble__title{font-size:13px}
 .pf-hero-bubble__description{font-size:11px;line-height:1.35}
}
@media(prefers-reduced-motion:reduce){
 .pf-hero-visual__image,.pf-hero-bubble,.pf-hero-dot-matrix{animation:none!important}
 .pf-hero-bubble{opacity:1!important;transform:none!important}
}