/* ==========================================================
   SimpleBiz — About Us
   ========================================================== */
.sbab{
	--sbab-red:#d71f2e;
	--sbab-red-dark:#b3121f;
	--sbab-ink:#16161a;
	--sbab-body:#5b5d66;
	--sbab-bg:linear-gradient(180deg,#fff 0%,#fff6f6 40%,#fff 70%,#fff7f7 100%);
	--sbab-card:#ffffff;
	--sbab-line:#ececef;
	--sbab-radius:22px;
	--sbab-gap:clamp(72px,9vw,128px);
	--sbab-vcols:4;
	--sbab-fx:1;
	--sbab-ease:cubic-bezier(.2,.7,.2,1);
	--fx-blob-a:color-mix(in srgb,var(--sbab-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(--sbab-red) 8%,transparent);
	--fx-ring:color-mix(in srgb,var(--sbab-red) 20%,transparent);
	--fx-word:color-mix(in srgb,var(--sbab-red) 14%,transparent);
	--fx-spot:color-mix(in srgb,var(--sbab-red) 13%,transparent);
	position:relative;isolation:isolate;width:100%;padding:clamp(40px,6vw,90px) 0 clamp(70px,9vw,130px);container-type:inline-size;container-name:sbab;
	color:var(--sbab-ink);font-family:inherit;
}
.sbab *,.sbab *::before,.sbab *::after{box-sizing:border-box}
.sbab-inner{position:relative;z-index:1;width:100%;max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sbab-gap)}

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

/* ---------- Shared type ---------- */
.sbab-eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;color:var(--sbab-red);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.sbab-eyebrow i{position:relative;width:28px;height:2px;background:var(--sbab-red);border-radius:2px}
.sbab-eyebrow i::after{content:"";position:absolute;right:-6px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--sbab-red)}
.sbab .sbab-title,.sbab .sbab-h2{margin:0;padding:0;color:var(--sbab-ink);font-family:inherit;font-weight:700;letter-spacing:-.025em;text-transform:none}
.sbab .sbab-title{font-size:clamp(36px,5vw,66px);line-height:1.04}
.sbab .sbab-h2{font-size:clamp(30px,3.8vw,50px);line-height:1.08}
.sbab .sbab-title em,.sbab .sbab-h2 em{position:relative;font-style:normal;color:var(--sbab-red);white-space:nowrap}
.sbab .sbab-title em::after,.sbab .sbab-h2 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(--sbab-ease) .5s}
.sbab .is-in em::after,.sbab:not(.sbab--animate) em::after,.sbab:not(.sbab-js) em::after{transform:scaleX(1)}

/* buttons */
.sbab .sbab-btn{
	position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 26px;overflow:hidden;
	border:2px solid var(--sbab-red);border-radius:999px;background:var(--sbab-red);color:#fff!important;
	font-size:15px;font-weight:600;line-height:1;text-decoration:none!important;white-space:nowrap;
	transition:box-shadow .4s ease,transform .4s var(--sbab-ease),gap .4s var(--sbab-ease),background .3s ease,border-color .3s ease,color .3s ease;
}
.sbab .sbab-btn svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sbab .sbab-btn:hover{gap:18px;background:var(--sbab-red-dark);border-color:var(--sbab-red-dark);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--sbab-red) 70%,transparent);transform:translateY(-2px)}
.sbab .sbab-btn--ghost{background:rgba(255,255,255,.6);color:var(--sbab-ink)!important;border-color:color-mix(in srgb,var(--sbab-ink) 14%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sbab .sbab-btn--ghost:hover{background:#fff;color:var(--sbab-red)!important;border-color:var(--sbab-red);box-shadow:0 14px 30px -18px rgba(20,20,30,.35)}
.sbab .sbab-btn:focus-visible,.sbab .sbab-skill:focus-visible,.sbab .sbab-screen:focus-visible{outline:3px solid var(--sbab-red);outline-offset:3px}

/* ==========================================================
   Intro
   ========================================================== */
.sbab-intro{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;gap:clamp(40px,5vw,80px)}
.sbab--novisual .sbab-intro{grid-template-columns:minmax(0,1fr);max-width:900px}
.sbab .sbab-lead{max-width:600px;margin:24px 0 0;color:var(--sbab-body);font-size:clamp(16px,1.25vw,18px);line-height:1.7}
.sbab-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.sbab-chip{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:8px 16px 8px 8px;border:1px solid color-mix(in srgb,var(--sbab-red) 14%,#fff);border-radius:999px;background:rgba(255,255,255,.7);color:var(--sbab-ink);font-size:14px;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sbab-chip-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--sbab-red) 10%,#fff);color:var(--sbab-red)}
.sbab-chip-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* visual: stacked live project screens */
.sbab-visual{position:relative;align-self:center;width:100%;aspect-ratio:1/.86}
.sbab-stack{position:relative;width:100%;height:100%;perspective:1400px}
.sbab .sbab-screen{
	position:absolute;display:block;width:78%;overflow:hidden;border-radius:16px;background:#fff;
	box-shadow:0 0 0 1px rgba(20,20,30,.06),0 30px 60px -28px rgba(80,10,20,.45),0 10px 24px -14px rgba(20,20,30,.25);
	text-decoration:none!important;transform-origin:50% 100%;
	transition:transform .8s var(--sbab-ease),box-shadow .6s ease,z-index 0s .2s;
}
.sbab .sbab-screen--1{right:0;top:12%;z-index:3;transform:rotate(1.5deg)}
.sbab .sbab-screen--2{left:0;top:0;z-index:2;width:62%;transform:rotate(-5deg) translateY(4%)}
.sbab .sbab-screen--3{left:14%;bottom:-2%;z-index:1;width:56%;transform:rotate(4deg)}
.sbab .sbab-stack--1 .sbab-screen--1{width:92%;right:4%;top:6%}
.sbab .sbab-stack--2 .sbab-screen--1{top:16%}
.sbab .sbab-stack:hover .sbab-screen--1{transform:rotate(0) translateY(-6px)}
.sbab .sbab-stack:hover .sbab-screen--2{transform:rotate(-8deg) translate(-6%,0)}
.sbab .sbab-stack:hover .sbab-screen--3{transform:rotate(7deg) translate(8%,6%)}
.sbab .sbab-screen:hover{z-index:4;box-shadow:0 0 0 1px rgba(20,20,30,.06),0 40px 80px -30px rgba(120,10,20,.55)}
.sbab-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#f6f6f8;border-bottom:1px solid #ececef}
.sbab-bar i{width:8px;height:8px;border-radius:50%;background:#e2e2e6}
.sbab-bar i:first-child{background:var(--sbab-red)}
.sbab-bar span{flex:1;min-width:0;margin-left:10px;padding:3px 10px;overflow:hidden;border-radius:999px;background:#fff;color:#8a8c94;font-size:11px;line-height:1.3;text-align:center;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 0 0 1px #ececef}
.sbab-shot{position:relative;display:block;aspect-ratio:16/10.5;overflow:hidden;background:#f3f1f2}
.sbab .sbab-shot img{position:absolute;left:0;top:0;width:100%!important;height:auto!important;max-width:none;margin:0;transform:translateY(0);transition:transform 6s cubic-bezier(.45,.05,.3,1)}
.sbab .sbab-screen:hover .sbab-shot img{transform:translateY(var(--sbab-scroll,0px))}
.sbab-photo{position:relative;height:100%;overflow:hidden;border-radius:var(--sbab-radius);box-shadow:0 30px 60px -30px rgba(80,10,20,.45)}
.sbab .sbab-photo img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover}

/* floating badges */
.sbab-badge{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--sbab-ink);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 18px 40px -18px rgba(80,10,20,.45),0 0 0 1px rgba(255,255,255,.9) inset;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:sbabFloat 6s ease-in-out infinite alternate}
.sbab-badge--1{left:-4%;bottom:14%}
.sbab-badge--2{right:-2%;top:-2%;padding-left:16px;animation-delay:-3s}
.sbab-badge-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sbab-red);color:#fff}
.sbab-badge-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sbab-pulse{position:relative;width:9px;height:9px;border-radius:50%;background:#22c55e}
.sbab-pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #22c55e;opacity:0;animation:sbabPulse 2s ease-out infinite}
@keyframes sbabFloat{to{transform:translateY(-12px)}}
@keyframes sbabPulse{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.4);opacity:0}}

/* ==========================================================
   Numbers band
   ========================================================== */
.sbab-stats{
	position:relative;display:grid;grid-template-columns:repeat(var(--sbab-n,4),minmax(0,1fr));overflow:hidden;isolation:isolate;
	border-radius:calc(var(--sbab-radius) + 6px);color:#fff;
	background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--sbab-red) 78%,#ff6b76),var(--sbab-red) 45%,var(--sbab-red-dark));
	box-shadow:0 40px 80px -40px color-mix(in srgb,var(--sbab-red) 70%,transparent);
}
.sbab-stats::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.22) 1.2px,transparent 1.7px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);opacity:.6}
.sbab-stats-shine{position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 48%,transparent 66%);transform:translateX(-100%);animation:sbabShine 7s ease-in-out infinite}
@keyframes sbabShine{60%,100%{transform:translateX(100%)}}
.sbab-stat{position:relative;display:flex;flex-direction:column;gap:8px;padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,36px)}
.sbab-stat+.sbab-stat::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:rgba(255,255,255,.28)}
.sbab-stat-num{font-size:clamp(34px,5cqi,64px);white-space:nowrap;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sbab-stat-label{color:rgba(255,255,255,.86);font-size:15px;line-height:1.45}

/* ==========================================================
   Mission & vision
   ========================================================== */
.sbab-mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.sbab-mv-card{
	position:relative;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;isolation:isolate;
	padding:clamp(30px,3.4vw,52px);border-radius:var(--sbab-radius);
	background:color-mix(in srgb,var(--sbab-card) 78%,transparent);border:1px solid color-mix(in srgb,var(--sbab-red) 10%,#fff);
	-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 24px 50px -36px rgba(120,10,20,.35);
	transition:transform .6s var(--sbab-ease),box-shadow .6s var(--sbab-ease);
}
.sbab-mv-card:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 34px 60px -34px rgba(120,10,20,.45)}
.sbab-mv-card--v{background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--sbab-red) 80%,#ff6b76),var(--sbab-red) 50%,var(--sbab-red-dark));border-color:transparent;color:#fff}
.sbab-mv-q{position:absolute;right:clamp(18px,2.4vw,34px);top:-.18em;z-index:-1;font-family:Georgia,"Times New Roman",serif;font-size:clamp(150px,15vw,230px);line-height:1;color:color-mix(in srgb,var(--sbab-red) 10%,transparent);transition:transform .8s var(--sbab-ease)}
.sbab-mv-card--v .sbab-mv-q{color:rgba(255,255,255,.14)}
.sbab-mv-card:hover .sbab-mv-q{transform:translateY(10px) rotate(-6deg)}
.sbab-mv-head{display:inline-flex;align-items:center;gap:12px;margin-bottom:26px;color:var(--sbab-red);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.sbab-mv-card--v .sbab-mv-head{color:#fff}
.sbab-mv-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--sbab-red) 10%,#fff);color:var(--sbab-red)}
.sbab-mv-card--v .sbab-mv-ico{background:rgba(255,255,255,.16);color:#fff}
.sbab-mv-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sbab .sbab-mv-title{margin:0 0 14px;padding:0;color:inherit;font-family:inherit;font-size:clamp(24px,2.3vw,32px);font-weight:700;line-height:1.18;letter-spacing:-.02em;text-transform:none}
.sbab-mv-card--m .sbab-mv-title{color:var(--sbab-ink)}
.sbab .sbab-mv-text{margin:0;max-width:520px;color:var(--sbab-body);font-size:16px;line-height:1.7}
.sbab-mv-card--v .sbab-mv-text{color:rgba(255,255,255,.88)}

/* ==========================================================
   Values
   ========================================================== */
.sbab-part-head{max-width:820px;margin-bottom:clamp(32px,4vw,52px)}
.sbab-vgrid{display:grid;grid-template-columns:repeat(var(--sbab-vcols,4),minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.sbab-value{
	position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;overflow:hidden;isolation:isolate;
	padding:clamp(26px,2.4vw,34px);border-radius:var(--sbab-radius);
	background:color-mix(in srgb,var(--sbab-card) 76%,transparent);border:1px solid color-mix(in srgb,var(--sbab-red) 10%,#fff);
	-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 18px 40px -30px rgba(120,10,20,.35);
	transition:transform .55s var(--sbab-ease),box-shadow .55s var(--sbab-ease);
}
.sbab-value::before{content:"";position:absolute;left:clamp(26px,2.4vw,34px);right:clamp(26px,2.4vw,34px);top:0;height:3px;border-radius:0 0 3px 3px;background:var(--sbab-red);transform:scaleX(.16);transform-origin:left;transition:transform .6s var(--sbab-ease),background .4s ease}
.sbab-value-fill{position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.18),transparent 45%),linear-gradient(160deg,var(--sbab-red),var(--sbab-red-dark));clip-path:inset(100% 0 0 0 round var(--sbab-radius));transition:clip-path .65s var(--sbab-ease)}
.sbab-value-num{position:absolute;top:16px;right:20px;z-index:-1;font-size:clamp(52px,4.6vw,70px);font-weight:800;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--sbab-red) 16%,#fff);transition:-webkit-text-stroke-color .4s ease,transform .6s var(--sbab-ease)}
.sbab-value-ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:clamp(26px,3vw,40px);border-radius:16px;background:color-mix(in srgb,var(--sbab-red) 9%,#fff);color:var(--sbab-red);transition:background .45s ease,color .45s ease,transform .6s var(--sbab-ease)}
.sbab-value-ico svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sbab .sbab-value-title{margin:0 0 10px;padding:0;color:var(--sbab-ink);font-family:inherit;font-size:clamp(19px,1.5vw,22px);font-weight:700;line-height:1.25;letter-spacing:-.01em;text-transform:none;transition:color .4s ease}
.sbab .sbab-value-text{margin:0;color:var(--sbab-body);font-size:16px;line-height:1.65;transition:color .4s ease}
.sbab-value:hover{transform:translateY(-8px);box-shadow:0 30px 50px -28px color-mix(in srgb,var(--sbab-red) 65%,transparent)}
.sbab-value:hover .sbab-value-fill{clip-path:inset(0 0 0 0 round var(--sbab-radius))}
.sbab-value:hover::before{transform:scaleX(1);background:rgba(255,255,255,.7)}
.sbab-value:hover .sbab-value-ico{background:rgba(255,255,255,.16);color:#fff;transform:rotate(-8deg) scale(1.06)}
.sbab-value:hover .sbab-value-title{color:#fff}
.sbab-value:hover .sbab-value-text{color:rgba(255,255,255,.88)}
.sbab-value:hover .sbab-value-num{-webkit-text-stroke-color:rgba(255,255,255,.3);transform:translateY(-4px)}

/* ==========================================================
   Expertise
   ========================================================== */
.sbab-exp{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:clamp(36px,5vw,90px)}
.sbab-exp-copy{position:sticky;top:120px}
.sbab .sbab-exp-text{margin:20px 0 30px;max-width:480px;color:var(--sbab-body);font-size:17px;line-height:1.7}
.sbab .sbab-skills{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.sbab .sbab-skills li{margin:0;padding:0;list-style:none}
.sbab .sbab-skills li::before{display:none}
.sbab .sbab-skill{
	position:relative;display:flex;align-items:center;gap:18px;overflow:hidden;isolation:isolate;
	padding:16px 20px 16px 16px;border-radius:18px;
	background:color-mix(in srgb,var(--sbab-card) 78%,transparent);border:1px solid color-mix(in srgb,var(--sbab-red) 9%,#fff);
	-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
	color:var(--sbab-ink);text-decoration:none!important;
	transition:transform .5s var(--sbab-ease),border-color .4s ease,box-shadow .5s var(--sbab-ease);
}
.sbab .sbab-skill::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--sbab-red) 9%,#fff),transparent 80%);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--sbab-ease)}
.sbab-skill-ico{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--sbab-red) 9%,#fff);color:var(--sbab-red);transition:background .4s ease,color .4s ease,transform .5s var(--sbab-ease)}
.sbab-skill-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sbab-skill-text{flex:1;min-width:0;font-size:clamp(15px,1.15vw,17px);font-weight:600;line-height:1.4}
.sbab-skill-arrow{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1px solid var(--sbab-line);color:var(--sbab-red);transition:background .4s ease,color .4s ease,border-color .4s ease,transform .5s var(--sbab-ease)}
.sbab-skill-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sbab .sbab-skill:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--sbab-red) 28%,#fff);box-shadow:0 20px 40px -30px rgba(120,10,20,.5)}
.sbab .sbab-skill:hover::before{transform:scaleX(1)}
.sbab .sbab-skill:hover .sbab-skill-ico{background:var(--sbab-red);color:#fff;transform:rotate(-8deg)}
.sbab .sbab-skill:hover .sbab-skill-arrow{background:var(--sbab-red);border-color:var(--sbab-red);color:#fff;transform:rotate(-45deg)}

/* ==========================================================
   Background effects
   ========================================================== */
.sbab-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--sbab-bg)}
.sbab--full .sbab-bg{left:50%;right:auto;width:100vw;transform:translateX(-50%)}
.sbab--full.sbab-js .sbab-bg{left:var(--sbab-bg-left,0px);width:var(--sbab-bg-width,100vw);transform:none}
.sbab-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:calc(.9 * var(--sbab-fx));will-change:transform;transition:translate 1.2s var(--sbab-ease)}
.sbab-blob--1{width:min(600px,70vw);height:min(600px,70vw);left:-10%;top:-8%;background:var(--fx-blob-a);animation:sbabF1 22s ease-in-out infinite alternate}
.sbab-blob--2{width:min(480px,60vw);height:min(480px,60vw);right:-8%;top:30%;background:var(--fx-blob-b);animation:sbabF2 26s ease-in-out infinite alternate}
.sbab-blob--3{width:min(520px,60vw);height:min(520px,60vw);left:20%;bottom:-6%;background:var(--fx-blob-c);animation:sbabF3 30s ease-in-out infinite alternate}
@keyframes sbabF1{to{transform:translate(18%,22%) scale(1.15)}}
@keyframes sbabF2{to{transform:translate(-22%,18%) scale(.9)}}
@keyframes sbabF3{to{transform:translate(-30%,-24%) scale(1.2)}}
.sbab-pattern{position:absolute;inset:0;opacity:var(--sbab-fx);-webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.4) 40%,rgba(0,0,0,.7) 70%,#000);mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.4) 40%,rgba(0,0,0,.7) 70%,#000)}
.sbab-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 top;animation:sbabGrid 40s linear infinite}
.sbab-pattern--dots{background-image:radial-gradient(color-mix(in srgb,var(--sbab-red) 22%,transparent) 1.2px,transparent 1.7px);background-size:24px 24px;animation:sbabGrid 40s linear infinite}
@keyframes sbabGrid{to{background-position:56px 56px}}
.sbab-word{position:absolute;left:50%;top:38%;transform:translateX(-50%);white-space:nowrap;font-family:inherit;font-size:clamp(80px,22vw,340px);font-weight:800;line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--fx-word);opacity:var(--sbab-fx);user-select:none;background:linear-gradient(180deg,var(--fx-word),transparent 75%);-webkit-background-clip:text;background-clip:text}
.sbab-ring{position:absolute;fill:none;stroke:var(--fx-ring);stroke-width:1;opacity:var(--sbab-fx);transition:translate 1.2s var(--sbab-ease)}
.sbab-ring .sbab-ring-dash{stroke-dasharray:2 9;stroke-width:1.6}
.sbab-ring--1{width:clamp(240px,30vw,460px);right:-8%;top:-4%;animation:sbabSpin 70s linear infinite}
.sbab-ring--2{width:clamp(180px,20vw,320px);left:-6%;top:52%;animation:sbabSpin 55s linear infinite reverse}
@keyframes sbabSpin{to{transform:rotate(360deg)}}
.sbab-dot{position:absolute;border-radius:50%;background:var(--sbab-red);opacity:calc(.55 * var(--sbab-fx));animation:sbabBob 7s ease-in-out infinite alternate;transition:translate 1.2s var(--sbab-ease)}
.sbab-dot--1{width:10px;height:10px;left:6%;top:9%}
.sbab-dot--2{width:6px;height:6px;right:16%;top:44%;animation-delay:-2s}
.sbab-dot--3{width:14px;height:14px;right:6%;bottom:12%;opacity:calc(.25 * var(--sbab-fx));animation-delay:-4s}
.sbab-plus{position:absolute;width:16px;height:16px;opacity:calc(.5 * var(--sbab-fx));animation:sbabBob 9s ease-in-out infinite alternate-reverse}
.sbab-plus::before,.sbab-plus::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:2px;margin:-1px 0 0 -50%;border-radius:2px;background:var(--sbab-red)}
.sbab-plus::after{transform:rotate(90deg)}
.sbab-plus--1{left:44%;top:4%}
.sbab-plus--2{left:10%;bottom:30%;width:11px;height:11px;animation-delay:-3s}
@keyframes sbabBob{to{transform:translateY(-22px) rotate(25deg)}}
.sbab-spot{position:absolute;inset:0;background:radial-gradient(560px circle at var(--sx,50%) var(--sy,30%),var(--fx-spot),transparent 62%);opacity:0;transition:opacity .6s ease}
.sbab.is-pointer .sbab-spot{opacity:var(--sbab-fx)}
.sbab-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:sbabGrain 1.2s steps(4) infinite}
@keyframes sbabGrain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}
.sbab-js:not(.is-visible) .sbab-bg *,.sbab-js:not(.is-visible) .sbab-badge,.sbab-js:not(.is-visible) .sbab-stats-shine{animation-play-state:paused}

/* ==========================================================
   Responsive (follows the width of the section itself, so it
   also works inside narrow theme columns)
   ========================================================== */
@container sbab (max-width:1000px){
	.sbab-inner{--sbab-gap:clamp(64px,10cqi,100px)}
	.sbab-intro{grid-template-columns:minmax(0,1fr)}
	.sbab-visual{max-width:620px;margin:0 auto}
	.sbab-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
	.sbab-stat:nth-child(odd)::before{display:none}
	.sbab-stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.2)}
	.sbab-vgrid{grid-template-columns:repeat(min(var(--sbab-vcols,4),2),minmax(0,1fr))}
	.sbab-exp{grid-template-columns:minmax(0,1fr)}
	.sbab-exp-copy{position:static}
}
@container sbab (max-width:620px){
	.sbab-inner{--sbab-gap:60px}
	.sbab-vgrid,.sbab-mv{grid-template-columns:minmax(0,1fr)}
	.sbab-btns .sbab-btn{flex:1 1 auto;justify-content:center}
	.sbab-visual{aspect-ratio:1/.92}
	.sbab-stack{width:92%;margin:0 auto}
	.sbab .sbab-screen--1{width:86%}
	.sbab .sbab-screen--2{width:70%}
	.sbab .sbab-screen--3{display:none}
	.sbab-badge{font-size:13px}
	.sbab-badge--1{left:0;bottom:6%}
	.sbab-badge--2{right:0;top:-4%}
	.sbab-stat{padding:22px 18px}
	.sbab-stat-num{font-size:clamp(32px,10cqi,42px)}
	.sbab-stat-label{font-size:14px}
	.sbab .sbab-skill{gap:14px;padding:12px 14px 12px 12px}
	.sbab-skill-ico{width:42px;height:42px}
	.sbab-value:hover{transform:translateY(-4px)}
}
@media (max-width:767px){
	.sbab-blob{filter:blur(50px)}
	.sbab-ring--2,.sbab-plus--2{display:none}
	.sbab-pattern--grid{background-size:40px 40px}
}
@media (hover:none){
	.sbab-value::before{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
	.sbab *,.sbab *::before,.sbab *::after{transition-duration:.01ms!important;animation:none!important}
	.sbab--animate.sbab-js .sbab-rv{opacity:1;transform:none}
}
