/* ==========================================================
   SimpleBiz — Projects
   ========================================================== */
.sbp{
	--sbp-red:#d71f2e;
	--sbp-red-dark:#b3121f;
	--sbp-ink:#16161a;
	--sbp-body:#5b5d66;
	--sbp-bg:transparent;
	--sbp-card:#ffffff;
	--sbp-line:#ececef;
	--sbp-radius:18px;
	--sbp-cols:3;
	--sbp-ratio:.62;
	--sbp-ease:cubic-bezier(.2,.7,.2,1);
	position:relative;width:100%;padding:clamp(60px,8vw,120px) 0;background:var(--sbp-bg);
	color:var(--sbp-ink);font-family:inherit;
}
.sbp *,.sbp *::before,.sbp *::after{box-sizing:border-box}
.sbp-inner{position:relative;width:100%;max-width:1320px;margin:0 auto}

/* reveal */
.sbp--animate.sbp-js .sbp-rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--sbp-ease),transform .9s var(--sbp-ease);transition-delay:calc(var(--sbp-i,0) * 90ms)}
.sbp--animate.sbp-js .sbp-rv.is-in{opacity:1;transform:none}

/* ---------- Header ---------- */
.sbp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(36px,4.5vw,60px)}
.sbp-head-copy{max-width:920px}
.sbp-eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;color:var(--sbp-red);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.sbp-eyebrow i{position:relative;width:28px;height:2px;background:var(--sbp-red);border-radius:2px}
.sbp-eyebrow i::after{content:"";position:absolute;right:-6px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--sbp-red)}
.sbp .sbp-title{margin:0;padding:0;color:var(--sbp-ink);font-family:inherit;font-size:clamp(32px,4.2vw,56px);font-weight:700;line-height:1.08;letter-spacing:-.025em;text-transform:none}
.sbp .sbp-title em{position:relative;font-style:normal;color:var(--sbp-red);white-space:nowrap}
.sbp .sbp-title em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.14em;background:currentColor;opacity:.16;border-radius:4px;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--sbp-ease) .5s}
.sbp .sbp-title.is-in em::after,.sbp:not(.sbp--animate) .sbp-title em::after,.sbp:not(.sbp-js) .sbp-title em::after{transform:scaleX(1)}
.sbp .sbp-sub{max-width:560px;margin:18px 0 0;color:var(--sbp-body);font-size:17px;line-height:1.65}
.sbp .sbp-btn{
	position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 26px;overflow:hidden;
	border:2px solid var(--sbp-red);border-radius:999px;background:var(--sbp-red);color:#fff!important;
	font-size:15px;font-weight:600;line-height:1;text-decoration:none!important;
	transition:box-shadow .4s ease,transform .4s var(--sbp-ease),gap .4s var(--sbp-ease),background .3s ease,border-color .3s ease;
}
.sbp .sbp-btn svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sbp .sbp-btn:hover{gap:18px;background:var(--sbp-red-dark);border-color:var(--sbp-red-dark);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--sbp-red) 70%,transparent);transform:translateY(-2px)}

/* ---------- Grid ---------- */
.sbp-grid{display:grid;grid-template-columns:repeat(var(--sbp-cols,4),minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}

/* ===== Style: red (bold red section with white cards) ===== */
.sbp--red{--sbp-bg:var(--sbp-red);overflow:hidden}
.sbp--red::before{content:"";position:absolute;right:-12%;top:-30%;width:60vw;height:60vw;max-width:760px;max-height:760px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 62%);pointer-events:none}
.sbp--red .sbp-inner{padding:0 clamp(16px,3vw,32px)}
.sbp--red .sbp-eyebrow{color:#fff}
.sbp--red .sbp-eyebrow i,.sbp--red .sbp-eyebrow i::after{background:#fff}
.sbp--red .sbp-title{color:#fff}
.sbp--red .sbp-title em{color:#fff}
.sbp--red .sbp-title em::after{opacity:.3}
.sbp--red .sbp-sub{color:rgba(255,255,255,.82)}
.sbp--red .sbp-btn{background:#fff;border-color:#fff;color:var(--sbp-red)!important}
.sbp--red .sbp-btn:hover{background:var(--sbp-ink);border-color:var(--sbp-ink);color:#fff!important;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}



/* ==========================================================
   Filters
   ========================================================== */
.sbp-filters{position:relative;display:inline-flex;flex-wrap:wrap;gap:6px;margin:0 0 clamp(28px,3.2vw,44px);padding:6px;border:1px solid color-mix(in srgb,var(--sbp-red) 12%,#fff);border-radius:999px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 34px -26px rgba(120,10,20,.45)}
.sbp-ink{position:absolute;left:0;top:0;height:0;width:0;border-radius:999px;background:linear-gradient(135deg,var(--sbp-red),var(--sbp-red-dark));box-shadow:0 10px 22px -10px color-mix(in srgb,var(--sbp-red) 80%,transparent);transition:transform .55s var(--sbp-ease),width .55s var(--sbp-ease),height .3s ease;pointer-events:none}
.sbp .sbp-pill{
	position:relative;z-index:1;display:inline-flex;align-items:flex-start;gap:4px;margin:0;padding:12px 20px;border:0!important;border-radius:999px;background:transparent!important;box-shadow:none!important;
	color:var(--sbp-ink)!important;font:inherit;font-size:15px;font-weight:600;line-height:1;cursor:pointer;transition:color .35s ease;-webkit-tap-highlight-color:transparent;
}
.sbp .sbp-pill sup{top:0;font-size:10px;font-weight:700;line-height:1;opacity:.55}
.sbp .sbp-pill:hover{color:var(--sbp-red)!important}
.sbp .sbp-pill.is-active{color:#fff!important}
.sbp:not(.sbp-js) .sbp-pill.is-active{background:var(--sbp-red)!important}
.sbp .sbp-pill:focus-visible{outline:2px solid var(--sbp-red);outline-offset:2px}

/* ==========================================================
   Project cards
   ========================================================== */
.sbp-grid{align-items:stretch}
.sbp .sbp-proj{
	--sbp-pad:clamp(22px,2vw,28px);
	position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;isolation:isolate;
	border:1px solid color-mix(in srgb,var(--sbp-red) 9%,#fff);border-radius:var(--sbp-radius);
	background:color-mix(in srgb,var(--sbp-card) 80%,transparent);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
	box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 44px -34px rgba(120,10,20,.45);
	transition:transform .55s var(--sbp-ease),box-shadow .55s var(--sbp-ease),border-color .4s ease,opacity .5s ease;
}
.sbp .sbp-proj[hidden]{display:none}
.sbp .sbp-proj:hover{transform:translateY(-8px);border-color:transparent;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 36px 60px -32px color-mix(in srgb,var(--sbp-red) 55%,transparent)}
.sbp .sbp-proj:focus-within{outline:3px solid var(--sbp-red);outline-offset:3px}
.sbp-glow{position:absolute;inset:0;z-index:4;border-radius:var(--sbp-radius);padding:1.5px;pointer-events:none;opacity:0;transition:opacity .4s ease;
	background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),var(--sbp-red),transparent 65%);
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.sbp .sbp-proj:hover .sbp-glow{opacity:1}

/* screenshot area */
.sbp-shot{position:relative;margin:10px 10px 0;border-radius:calc(var(--sbp-radius) - 6px);overflow:hidden;background:#f3f1f2;box-shadow:0 0 0 1px rgba(20,20,30,.06)}
.sbp-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:linear-gradient(#fbfbfc,#f2f2f4);border-bottom:1px solid rgba(20,20,30,.06)}
.sbp-bar i{width:8px;height:8px;border-radius:50%;background:#e2e2e6}
.sbp-bar i:first-child{background:var(--sbp-red)}
.sbp-bar span{flex:1;min-width:0;margin:0 0 0 10px;padding:3px 10px;overflow:hidden;border-radius:999px;background:#fff;color:#8a8b94;font-size:10.5px;line-height:1.4;text-align:center;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 0 0 1px rgba(20,20,30,.05)}
.sbp-frame{position:relative;aspect-ratio:1/var(--sbp-ratio);overflow:hidden;background:#eceaec}
.sbp-frame img{position:absolute;left:0;top:0;width:100%!important;height:100%!important;max-width:none;margin:0;object-fit:cover;object-position:top center;transition:transform .9s var(--sbp-ease)}
.sbp .sbp-proj:hover .sbp-frame img{transform:scale(1.05)}
/* tall full-page screenshots scroll on hover */
.sbp--scroll .sbp-frame.is-tall img{height:auto!important;object-fit:fill;transition:transform .9s var(--sbp-ease)}
.sbp--scroll .sbp-proj:hover .sbp-frame.is-tall img{transform:translateY(var(--sbp-scroll,0px));transition:transform var(--sbp-dur,4s) cubic-bezier(.45,.05,.4,1)}
.sbp-noimg{position:absolute;inset:0;display:grid;place-items:center;background:
	radial-gradient(circle at 30% 20%,rgba(255,255,255,.5),transparent 40%),linear-gradient(135deg,color-mix(in srgb,var(--sbp-red) 18%,#fff),color-mix(in srgb,var(--sbp-red) 45%,#fff))}
.sbp-noimg b{color:#fff;font-size:clamp(60px,6vw,90px);font-weight:800;letter-spacing:-.04em;text-shadow:0 10px 30px color-mix(in srgb,var(--sbp-red) 60%,transparent)}
.sbp-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(20,8,10,.55));opacity:0;transition:opacity .5s ease;pointer-events:none}
.sbp .sbp-proj:hover .sbp-frame::after{opacity:1}
.sbp-view{position:absolute;left:50%;bottom:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:#fff;color:var(--sbp-red);font-size:13px;font-weight:700;white-space:nowrap;
	box-shadow:0 14px 30px -12px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,14px);transition:opacity .45s ease,transform .55s var(--sbp-ease)}
.sbp-view svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sbp .sbp-proj:hover .sbp-view{opacity:1;transform:translate(-50%,0)}

/* text */
.sbp-body{display:flex;flex:1;flex-direction:column;padding:var(--sbp-pad)}
.sbp-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:14px}
.sbp-tag{padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--sbp-red) 9%,#fff);color:var(--sbp-red);font-size:12px;font-weight:600;line-height:1}
.sbp-year{margin-left:auto;color:var(--sbp-body);font-size:12px;font-weight:600;letter-spacing:.06em;opacity:.7}
.sbp .sbp-proj-title{margin:0;padding:0;color:var(--sbp-ink);font-family:inherit;font-size:clamp(20px,1.6vw,23px);font-weight:700;line-height:1.25;letter-spacing:-.015em;text-transform:none;transition:color .35s ease}
.sbp .sbp-proj-title a{color:inherit!important;text-decoration:none!important}
.sbp .sbp-proj:hover .sbp-proj-title{color:var(--sbp-red)}
.sbp-stretch::after{content:"";position:absolute;inset:0;z-index:3;border-radius:var(--sbp-radius)}
.sbp .sbp-proj-title a:focus{outline:none}
.sbp .sbp-client{margin:4px 0 0;color:var(--sbp-body);font-size:13px;font-weight:500;opacity:.8}
.sbp .sbp-proj-text{margin:12px 0 0;color:var(--sbp-body);font-size:15px;line-height:1.65}
.sbp .sbp-result{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin:16px 0 0;padding:8px 12px;border-radius:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--sbp-red) 10%,#fff),#fff);border:1px solid color-mix(in srgb,var(--sbp-red) 14%,#fff);color:var(--sbp-ink);font-size:13px;font-weight:700}
.sbp-result svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--sbp-red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sbp-foot{display:flex;align-items:center;gap:12px;min-height:53px;margin-top:auto;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--sbp-ink) 9%,transparent)}
.sbp .sbp-body>*:nth-last-child(2){margin-bottom:22px}
.sbp-explore{display:inline-flex;align-items:center;gap:8px;color:var(--sbp-red);font-size:14.5px;font-weight:700;transition:gap .4s var(--sbp-ease)}
.sbp-explore svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--sbp-ease)}
.sbp .sbp-proj:hover .sbp-explore{gap:12px}
.sbp .sbp-proj:hover .sbp-explore svg{transform:translate(2px,-2px)}
.sbp .sbp-live{position:relative;z-index:5;display:grid;place-items:center;width:34px;height:34px;margin-left:auto;border-radius:50%;background:color-mix(in srgb,var(--sbp-red) 9%,#fff);color:var(--sbp-red);transition:background .3s ease,color .3s ease,transform .4s var(--sbp-ease)}
.sbp .sbp-live svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.sbp .sbp-live:hover{background:var(--sbp-red);color:#fff;transform:rotate(-20deg)}
.sbp .sbp-live .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.sbp-num{color:var(--sbp-body);font-size:12px;font-weight:700;letter-spacing:.08em;opacity:.55}
.sbp-explore+.sbp-num{margin-left:auto}

/* filter + load-more animation */
.sbp .sbp-proj.is-pop{animation:sbpPop .6s var(--sbp-ease) both;animation-delay:calc(var(--sbp-k,0) * 70ms)}
@keyframes sbpPop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.sbp-more-wrap{display:flex;justify-content:center;margin-top:clamp(32px,3.6vw,48px)}
.sbp .sbp-more{
	display:inline-flex;align-items:center;gap:12px;margin:0;padding:16px 28px;border:1.5px solid var(--sbp-red)!important;border-radius:999px;background:rgba(255,255,255,.7)!important;
	color:var(--sbp-red)!important;font:inherit;font-size:15px;font-weight:600;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
	transition:background .3s ease,color .3s ease,box-shadow .4s ease,transform .4s var(--sbp-ease)
}
.sbp .sbp-more svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--sbp-ease)}
.sbp .sbp-more:hover{background:var(--sbp-red)!important;color:#fff!important;box-shadow:0 16px 30px -14px color-mix(in srgb,var(--sbp-red) 75%,transparent);transform:translateY(-2px)}
.sbp .sbp-more:hover svg{transform:translateY(3px)}
.sbp .sbp-more-wrap[hidden]{display:none}
.sbp-none,.sbp-empty{margin:20px 0;color:var(--sbp-body);text-align:center}

/* 3D tilt */
.sbp--tilt .sbp-grid{perspective:1200px}
.sbp--tilt.sbp-js .sbp-proj.is-tilting{transition:transform .12s linear,box-shadow .55s var(--sbp-ease);transform:translateY(-8px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* bold red theme */
.sbp--red .sbp-filters{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25)}
.sbp--red .sbp-pill{color:#fff!important}
.sbp--red .sbp-pill:hover{color:#fff!important;opacity:.8}
.sbp--red .sbp-pill.is-active{color:var(--sbp-red)!important}
.sbp--red .sbp-ink{background:#fff}
.sbp--red .sbp-proj{background:#fff;border-color:transparent}
.sbp--red .sbp-more{background:#fff!important;border-color:#fff!important}
.sbp--red .sbp-more:hover{background:var(--sbp-ink)!important;border-color:var(--sbp-ink)!important}
.sbp--red .sbp-none,.sbp--red .sbp-empty{color:#fff}

@media (max-width:767px){
	.sbp-filters{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;border-radius:999px}
	.sbp-filters::-webkit-scrollbar{display:none}
	.sbp .sbp-pill{flex-shrink:0;padding:11px 16px;font-size:14px}
	.sbp .sbp-proj:hover{transform:translateY(-4px)}
}

/* ==========================================================
   Background effects
   ========================================================== */
.sbp{
	--sbp-fx:1;
	--fx-blob-a:color-mix(in srgb,var(--sbp-red) 24%,transparent);
	--fx-blob-b:rgba(255,120,132,.30);
	--fx-blob-c:rgba(255,190,196,.45);
	--fx-line:color-mix(in srgb,var(--sbp-red) 8%,transparent);
	--fx-ring:color-mix(in srgb,var(--sbp-red) 20%,transparent);
	--fx-word:color-mix(in srgb,var(--sbp-red) 16%,transparent);
	--fx-spot:color-mix(in srgb,var(--sbp-red) 13%,transparent);
}
.sbp--fx{isolation:isolate}
.sbp--fx.sbp--red{overflow:visible}
.sbp--fx:not(.sbp--red){--sbp-bg:linear-gradient(180deg,#fff 0%,#fff6f6 55%,#fff 100%)}
.sbp-inner{z-index:1}
.sbp-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--sbp-bg)}
.sbp--fx.sbp--full{background:transparent}
.sbp--full .sbp-bg{left:50%;right:auto;width:100vw;transform:translateX(-50%)}
.sbp--full.sbp-js .sbp-bg{left:var(--sbp-bg-left,0px);width:var(--sbp-bg-width,100vw);transform:none}

/* moving glow */
.sbp-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:calc(.9 * var(--sbp-fx));will-change:transform;transition:translate 1.2s var(--sbp-ease)}
.sbp-blob--1{width:min(560px,70vw);height:min(560px,70vw);left:-8%;top:-18%;background:var(--fx-blob-a);animation:sbpFloat1 22s ease-in-out infinite alternate}
.sbp-blob--2{width:min(460px,60vw);height:min(460px,60vw);right:-6%;top:10%;background:var(--fx-blob-b);animation:sbpFloat2 26s ease-in-out infinite alternate}
.sbp-blob--3{width:min(420px,55vw);height:min(420px,55vw);left:38%;bottom:-30%;background:var(--fx-blob-c);animation:sbpFloat3 30s ease-in-out infinite alternate}
@keyframes sbpFloat1{to{transform:translate(18%,22%) scale(1.15)}}
@keyframes sbpFloat2{to{transform:translate(-22%,18%) scale(.9)}}
@keyframes sbpFloat3{to{transform:translate(-30%,-24%) scale(1.2)}}

/* pattern */
.sbp-pattern{position:absolute;inset:0;opacity:var(--sbp-fx);-webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 45%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse 70% 65% at 50% 45%,#000 20%,transparent 78%)}
.sbp-pattern--grid{background-image:linear-gradient(var(--fx-line) 1px,transparent 1px),linear-gradient(90deg,var(--fx-line) 1px,transparent 1px);background-size:56px 56px;background-position:center center;animation:sbpGrid 40s linear infinite}
.sbp-pattern--dots{background-image:radial-gradient(color-mix(in srgb,var(--sbp-red) 22%,transparent) 1.2px,transparent 1.7px);background-size:24px 24px;animation:sbpGrid 40s linear infinite}
@keyframes sbpGrid{to{background-position:56px 56px}}

/* big background word */
.sbp-word{position:absolute;left:50%;bottom:-.2em;transform:translateX(-50%);white-space:nowrap;font-family:inherit;font-size:clamp(60px,19vw,300px);font-weight:800;line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--fx-word);opacity:var(--sbp-fx);user-select:none;
	background:linear-gradient(180deg,var(--fx-word),transparent 75%);-webkit-background-clip:text;background-clip:text}

/* rings, dots and plus signs */
.sbp-ring{position:absolute;fill:none;stroke:var(--fx-ring);stroke-width:1;opacity:var(--sbp-fx);transition:translate 1.2s var(--sbp-ease)}
.sbp-ring .sbp-ring-dash{stroke-dasharray:2 9;stroke-width:1.6}
.sbp-ring--1{width:clamp(220px,28vw,420px);right:-6%;top:-12%;animation:sbpSpin 70s linear infinite}
.sbp-ring--2{width:clamp(160px,18vw,280px);left:-4%;bottom:-6%;animation:sbpSpin 55s linear infinite reverse}
@keyframes sbpSpin{to{transform:rotate(360deg)}}
.sbp-dot{position:absolute;border-radius:50%;background:var(--sbp-red);opacity:calc(.55 * var(--sbp-fx));animation:sbpBob 7s ease-in-out infinite alternate;transition:translate 1.2s var(--sbp-ease)}
.sbp-dot--1{width:10px;height:10px;left:2.5%;top:52%}
.sbp-dot--2{width:6px;height:6px;right:18%;top:12%;animation-delay:-2s}
.sbp-dot--3{width:14px;height:14px;right:7%;bottom:18%;opacity:calc(.25 * var(--sbp-fx));animation-delay:-4s}
.sbp-dot--4{width:7px;height:7px;left:46%;top:8%;animation-delay:-1s}
.sbp-plus{position:absolute;width:16px;height:16px;opacity:calc(.5 * var(--sbp-fx));animation:sbpBob 9s ease-in-out infinite alternate-reverse}
.sbp-plus::before,.sbp-plus::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:2px;margin:-1px 0 0 -50%;border-radius:2px;background:var(--sbp-red)}
.sbp-plus::after{transform:rotate(90deg)}
.sbp-plus--1{left:24%;bottom:12%}
.sbp-plus--2{right:30%;top:20%;width:11px;height:11px;animation-delay:-3s}
@keyframes sbpBob{to{transform:translateY(-22px) rotate(25deg)}}

/* spotlight */
.sbp-spot{position:absolute;inset:0;background:radial-gradient(520px circle at var(--sx,50%) var(--sy,30%),var(--fx-spot),transparent 62%);opacity:0;transition:opacity .6s ease}
.sbp.is-pointer .sbp-spot{opacity:var(--sbp-fx)}

/* film grain */
.sbp-grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:multiply;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation:sbpGrain 1.2s steps(4) infinite}
@keyframes sbpGrain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}

/* pause everything while the section is off screen */
.sbp-js:not(.is-visible) .sbp-bg *{animation-play-state:paused}

/* effects in white for the bold red style */
.sbp--red{
	--fx-blob-a:rgba(255,255,255,.22);
	--fx-blob-b:rgba(120,0,10,.45);
	--fx-blob-c:rgba(255,140,150,.35);
	--fx-line:rgba(255,255,255,.09);
	--fx-ring:rgba(255,255,255,.28);
	--fx-word:rgba(255,255,255,.16);
	--fx-spot:rgba(255,255,255,.16);
}
.sbp--red .sbp-dot,.sbp--red .sbp-plus::before,.sbp--red .sbp-plus::after{background:#fff}
.sbp--red .sbp-grain{mix-blend-mode:overlay;opacity:.12}
.sbp--red.sbp--fx .sbp-bg{background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--sbp-red) 80%,#ff5a66),var(--sbp-red) 45%,var(--sbp-red-dark))}
.sbp--red.sbp--fx::before{display:none}
.sbp--red .sbp-pattern--dots{background-image:radial-gradient(rgba(255,255,255,.28) 1.2px,transparent 1.7px)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
	.sbp{--sbp-cols:2}
}
@media (max-width:767px){
	.sbp{--sbp-cols:1}
	.sbp-blob{filter:blur(50px)}
	.sbp-ring--2,.sbp-plus--2,.sbp-dot--4{display:none}
	.sbp-pattern--grid{background-size:40px 40px}
	.sbp-head{align-items:flex-start}
	.sbp .sbp-sub{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
	.sbp-bg *{animation:none!important}
	.sbp *,.sbp *::before,.sbp *::after{transition-duration:.01ms!important;animation:none!important}
	.sbp--animate.sbp-js .sbp-rv{opacity:1;transform:none}
}
.sbp-hint{max-width:720px;margin:10px auto;padding:14px 18px;border:1px dashed var(--sbp-red);border-radius:12px;font-size:13px;line-height:1.6}