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

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

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

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

/* ---------- Card base ---------- */
.sbtl .sbtl-card{
	position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;
	--sbtl-pad:clamp(26px,2.4vw,36px);padding:var(--sbtl-pad);overflow:hidden;isolation:isolate;
	border:1px solid var(--sbtl-line);border-radius:var(--sbtl-radius);background:var(--sbtl-card);
	color:inherit;text-decoration:none!important;
	transition:transform .55s var(--sbtl-ease),box-shadow .55s var(--sbtl-ease),border-color .4s ease;
}
.sbtl-fill{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sbtl-num{position:absolute;top:18px;right:22px;z-index:-1;font-size:clamp(54px,5vw,76px);font-weight:800;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--sbtl-line);transition:-webkit-text-stroke-color .4s ease,transform .6s var(--sbtl-ease)}
.sbtl:not(.sbtl--numbers) .sbtl-num{display:none}
.sbtl-icon{
	display:grid;place-items:center;width:58px;height:58px;margin-bottom:clamp(28px,3vw,44px);
	border-radius:16px;background:color-mix(in srgb,var(--sbtl-red) 9%,#fff);color:var(--sbtl-red);
	transition:background .45s ease,color .45s ease,transform .6s var(--sbtl-ease);
}
.sbtl-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sbtl .sbtl-card-title{margin:0 0 10px;padding:0;color:var(--sbtl-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}
.sbtl .sbtl-card-text{margin:0;color:var(--sbtl-body);font-size:16px;line-height:1.65;transition:color .4s ease}
.sbtl-card-arrow{display:grid;place-items:center;width:40px;height:40px;margin-top:auto;padding-top:0;border-radius:50%;transform:translateY(0)}
.sbtl .sbtl-card--link .sbtl-card-text{margin-bottom:24px}
.sbtl-card-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--sbtl-ease)}
.sbtl-card--link:hover .sbtl-card-arrow svg{transform:translateX(4px) rotate(-45deg)}
.sbtl .sbtl-card:focus-visible{outline:3px solid var(--sbtl-red);outline-offset:3px}

/* ===== Style: fill (red sweeps up on hover) ===== */
.sbtl--fill .sbtl-fill{
	background:
		radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.18),transparent 45%),
		linear-gradient(160deg,var(--sbtl-red),var(--sbtl-red-dark));
	clip-path:inset(100% 0 0 0 round var(--sbtl-radius));transition:clip-path .65s var(--sbtl-ease);
}
.sbtl--fill .sbtl-card::before{content:"";position:absolute;left:var(--sbtl-pad);right:var(--sbtl-pad);top:0;height:3px;border-radius:0 0 3px 3px;background:var(--sbtl-red);transform:scaleX(.16);transform-origin:left;transition:transform .6s var(--sbtl-ease),background .4s ease}
.sbtl--fill .sbtl-card:hover,.sbtl--fill .sbtl-card:focus-visible{transform:translateY(-8px);border-color:transparent;box-shadow:0 28px 50px -24px color-mix(in srgb,var(--sbtl-red) 75%,transparent)}
.sbtl--fill .sbtl-card:hover::before{transform:scaleX(1);background:rgba(255,255,255,.7)}
.sbtl--fill .sbtl-card:hover .sbtl-fill,.sbtl--fill .sbtl-card:focus-visible .sbtl-fill{clip-path:inset(0 0 0 0 round var(--sbtl-radius))}
.sbtl--fill .sbtl-card:hover .sbtl-card-title,.sbtl--fill .sbtl-card:hover .sbtl-card-text{color:#fff}
.sbtl--fill .sbtl-card:hover .sbtl-card-text{color:rgba(255,255,255,.88)}
.sbtl--fill .sbtl-card:hover .sbtl-icon{background:#fff;color:var(--sbtl-red);transform:rotate(-8deg) scale(1.06)}
.sbtl--fill .sbtl-card:hover .sbtl-num{-webkit-text-stroke-color:rgba(255,255,255,.35);transform:translateY(-4px)}
.sbtl--fill .sbtl-card-arrow{background:color-mix(in srgb,var(--sbtl-red) 9%,#fff);color:var(--sbtl-red);transition:background .4s ease}
.sbtl--fill .sbtl-card:hover .sbtl-card-arrow{background:#fff}

/* ===== Style: lines (minimal, like the original) ===== */
.sbtl--lines .sbtl-card{--sbtl-pad:0px;padding:28px 0 0;border:0;border-radius:0;background:transparent;overflow:visible}
.sbtl--lines .sbtl-card::before,.sbtl--lines .sbtl-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px}
.sbtl--lines .sbtl-card::before{background:var(--sbtl-ink)}
.sbtl--lines .sbtl-card::after{background:var(--sbtl-red);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--sbtl-ease)}
.sbtl--lines .sbtl-card:hover::after{transform:scaleX(1)}
.sbtl--lines .sbtl-num{position:static;order:-2;margin-bottom:18px;font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--sbtl-red);-webkit-text-stroke:0}
.sbtl--lines .sbtl-icon{width:auto;height:auto;margin-bottom:16px;background:none;border-radius:0}
.sbtl--lines .sbtl-card:hover .sbtl-icon{transform:translateY(-3px)}
.sbtl--lines .sbtl-card:hover .sbtl-card-title{color:var(--sbtl-red)}
.sbtl--lines .sbtl-card-arrow{width:auto;height:auto;color:var(--sbtl-red);justify-content:start}

/* ===== Style: red (bold red section with white cards) ===== */
.sbtl--red{--sbtl-bg:var(--sbtl-red);overflow:hidden}
.sbtl--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}
.sbtl--red .sbtl-inner{padding:0 clamp(16px,3vw,32px)}
.sbtl--red .sbtl-eyebrow{color:#fff}
.sbtl--red .sbtl-eyebrow i,.sbtl--red .sbtl-eyebrow i::after{background:#fff}
.sbtl--red .sbtl-title{color:#fff}
.sbtl--red .sbtl-title em{color:#fff}
.sbtl--red .sbtl-title em::after{opacity:.3}
.sbtl--red .sbtl-sub{color:rgba(255,255,255,.82)}
.sbtl--red .sbtl-btn{background:#fff;border-color:#fff;color:var(--sbtl-red)!important}
.sbtl--red .sbtl-btn:hover{background:var(--sbtl-ink);border-color:var(--sbtl-ink);color:#fff!important;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.sbtl--red .sbtl-card{border-color:transparent;box-shadow:0 20px 40px -28px rgba(60,0,0,.6)}
.sbtl--red .sbtl-card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -28px rgba(40,0,0,.75)}
.sbtl--red .sbtl-card:hover .sbtl-icon{background:var(--sbtl-red);color:#fff;transform:rotate(-8deg) scale(1.06)}
.sbtl--red .sbtl-card:hover .sbtl-num{-webkit-text-stroke-color:color-mix(in srgb,var(--sbtl-red) 35%,#fff)}
.sbtl--red .sbtl-card-arrow{background:var(--sbtl-red);color:#fff}



/* glowing border that follows the mouse */
.sbtl-glow{position:absolute;inset:0;z-index:3;border-radius:var(--sbtl-radius);padding:1.5px;pointer-events:none;opacity:0;transition:opacity .4s ease;
	background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),var(--sbtl-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)}
.sbtl--lines .sbtl-glow,.sbtl--fill .sbtl-glow{display:block}
.sbtl .sbtl-card:hover .sbtl-glow{opacity:1}
.sbtl--fill .sbtl-card:hover .sbtl-glow{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.9),transparent 65%)}

/* bold red section */
.sbtl--red .sbtl-card:hover .sbtl-more i{background:var(--sbtl-red);color:#fff}

/* 3D tilt */
.sbtl--tilt .sbtl-grid{perspective:1100px}
.sbtl--tilt.sbtl-js .sbtl-card{transform-style:preserve-3d}
.sbtl--tilt.sbtl-js .sbtl-card.is-tilting{transition:transform .12s linear,box-shadow .55s var(--sbtl-ease),border-color .4s ease;transform:translateY(-8px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}


/* ==========================================================
   Process timeline
   ========================================================== */
.sbtl-steps{position:relative;--node:58px}
.sbtl .sbtl-grid{position:relative;margin:0;padding:0;list-style:none}
.sbtl-step{position:relative;display:flex;flex-direction:column;align-items:center;margin:0;padding:0}
.sbtl-step::marker{content:none}

/* the line between the numbers */
.sbtl-track{position:absolute;top:calc(var(--node) / 2 - 1px);left:calc(100% / var(--sbtl-cols) / 2);right:calc(100% / var(--sbtl-cols) / 2);height:2px;border-radius:2px;
	background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--sbtl-red) 28%,transparent) 0 6px,transparent 6px 12px)}
.sbtl-track-fill{position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,var(--sbtl-red),var(--sbtl-red-dark));transform:scaleX(var(--sbtl-p,1));transform-origin:left;transition:transform .25s linear;box-shadow:0 0 14px color-mix(in srgb,var(--sbtl-red) 55%,transparent)}
.sbtl--progress.sbtl-js .sbtl-track-fill{transform:scaleX(var(--sbtl-p,0))}

/* number nodes */
.sbtl-node{position:relative;z-index:1;display:grid;place-items:center;width:var(--node);height:var(--node);margin-bottom:26px;border-radius:50%;
	background:#fff;border:2px solid color-mix(in srgb,var(--sbtl-red) 30%,#fff);color:var(--sbtl-red);
	font-size:20px;font-weight:800;box-shadow:0 10px 24px -14px color-mix(in srgb,var(--sbtl-red) 70%,transparent);
	transition:background .5s ease,color .5s ease,border-color .5s ease,transform .6s var(--sbtl-ease),box-shadow .5s ease}
.sbtl-node::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--sbtl-red) 30%,transparent);transition:border-color .5s ease;animation:sbtlSpin 14s linear infinite}
@keyframes sbtlSpin{to{transform:rotate(360deg)}}
.sbtl-node-num{position:relative}
.sbtl-pulse{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--sbtl-red);opacity:0}
.sbtl-step.is-done .sbtl-node,.sbtl:not(.sbtl--progress) .sbtl-node,.sbtl:not(.sbtl-js) .sbtl-node,.sbtl-step:hover .sbtl-node{background:linear-gradient(145deg,var(--sbtl-red),var(--sbtl-red-dark));border-color:transparent;color:#fff;box-shadow:0 14px 28px -12px color-mix(in srgb,var(--sbtl-red) 85%,transparent)}
.sbtl-step.is-done .sbtl-node::before,.sbtl:not(.sbtl--progress) .sbtl-node::before,.sbtl-step:hover .sbtl-node::before{border-color:rgba(255,255,255,.45)}
.sbtl-step.is-current .sbtl-pulse{animation:sbtlPulse 2s ease-out infinite}
.sbtl-step.is-current .sbtl-node{transform:scale(1.1)}
@keyframes sbtlPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}

/* step cards */
.sbtl .sbtl-card{width:100%;flex:1;align-items:flex-start;padding:clamp(22px,2vw,28px)}
.sbtl-step:hover .sbtl-card{transform:translateY(-6px)}
.sbtl-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-bottom:22px}
.sbtl .sbtl-card-top .sbtl-icon{width:50px;height:50px;margin:0;border-radius:14px}
.sbtl .sbtl-card-top .sbtl-icon svg{width:24px;height:24px}
.sbtl-time{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--sbtl-red) 8%,#fff);color:var(--sbtl-red);font-size:11.5px;font-weight:700;white-space:nowrap;transition:background .4s ease,color .4s ease}
.sbtl-time svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sbtl-step-label{display:block;margin-bottom:6px;color:var(--sbtl-red);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;transition:color .4s ease}
.sbtl:not(.sbtl--numbers) .sbtl-step-label{display:none}
.sbtl .sbtl-card .sbtl-card-title{font-size:clamp(18px,1.35vw,20px)}
.sbtl .sbtl-card .sbtl-card-text{font-size:15px}
.sbtl--fill .sbtl-step:hover .sbtl-time{background:rgba(255,255,255,.18);color:#fff}
.sbtl--fill .sbtl-step:hover .sbtl-step-label{color:rgba(255,255,255,.8)}
.sbtl--lines .sbtl-card{align-items:flex-start}
.sbtl--red .sbtl-node{background:#fff;border-color:rgba(255,255,255,.6)}
.sbtl--red .sbtl-step.is-done .sbtl-node,.sbtl--red .sbtl-step:hover .sbtl-node{background:#fff;color:var(--sbtl-red);box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}
.sbtl--red .sbtl-step.is-done .sbtl-node::before{border-color:color-mix(in srgb,var(--sbtl-red) 35%,transparent)}
.sbtl--red .sbtl-track{background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px)}
.sbtl--red .sbtl-track-fill{background:#fff;box-shadow:0 0 14px rgba(255,255,255,.6)}
.sbtl--red .sbtl-pulse{border-color:#fff}

/* tablet / mobile: vertical timeline on the left */
@media (max-width:1024px){
	.sbtl-steps{--node:50px}
	.sbtl .sbtl-grid{grid-template-columns:minmax(0,1fr)!important;gap:22px}
	.sbtl-step{display:grid;grid-template-columns:var(--node) minmax(0,1fr);column-gap:20px;align-items:start}
	.sbtl-node{margin:6px 0 0;font-size:18px}
	.sbtl-track{left:calc(var(--node) / 2 - 1px);right:auto;top:calc(var(--node) / 2 + 6px);bottom:calc(var(--node) / 2 + 30px);width:2px;height:auto;
		background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--sbtl-red) 28%,transparent) 0 6px,transparent 6px 12px)}
	.sbtl--red .sbtl-track{background:repeating-linear-gradient(180deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px)}
	.sbtl-track-fill{transform:scaleY(var(--sbtl-p,1));transform-origin:top;background:linear-gradient(180deg,var(--sbtl-red),var(--sbtl-red-dark))}
	.sbtl--progress.sbtl-js .sbtl-track-fill{transform:scaleY(var(--sbtl-p,0))}
	.sbtl-step:hover .sbtl-card{transform:translateY(-3px)}
}

/* ==========================================================
   Background effects
   ========================================================== */
.sbtl{
	--sbtl-fx:1;
	--fx-blob-a:color-mix(in srgb,var(--sbtl-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(--sbtl-red) 8%,transparent);
	--fx-ring:color-mix(in srgb,var(--sbtl-red) 20%,transparent);
	--fx-word:color-mix(in srgb,var(--sbtl-red) 16%,transparent);
	--fx-spot:color-mix(in srgb,var(--sbtl-red) 13%,transparent);
}
.sbtl--fx{isolation:isolate}
.sbtl--fx.sbtl--red{overflow:visible}
.sbtl--fx:not(.sbtl--red){--sbtl-bg:linear-gradient(180deg,#fff 0%,#fff6f6 55%,#fff 100%)}
.sbtl-inner{z-index:1}
.sbtl-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--sbtl-bg)}
.sbtl--fx.sbtl--full{background:transparent}
.sbtl--full .sbtl-bg{left:50%;right:auto;width:100vw;transform:translateX(-50%)}
.sbtl--full.sbtl-js .sbtl-bg{left:var(--sbtl-bg-left,0px);width:var(--sbtl-bg-width,100vw);transform:none}

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

/* pattern */
.sbtl-pattern{position:absolute;inset:0;opacity:var(--sbtl-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%)}
.sbtl-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:sbtlGrid 40s linear infinite}
.sbtl-pattern--dots{background-image:radial-gradient(color-mix(in srgb,var(--sbtl-red) 22%,transparent) 1.2px,transparent 1.7px);background-size:24px 24px;animation:sbtlGrid 40s linear infinite}
@keyframes sbtlGrid{to{background-position:56px 56px}}

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

/* spotlight */
.sbtl-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}
.sbtl.is-pointer .sbtl-spot{opacity:var(--sbtl-fx)}

/* film grain */
.sbtl-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:sbtlGrain 1.2s steps(4) infinite}
@keyframes sbtlGrain{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 */
.sbtl-js:not(.is-visible) .sbtl-bg *{animation-play-state:paused}

/* glassy cards on top of the effects */
.sbtl--fx.sbtl--fill .sbtl-card{background:color-mix(in srgb,var(--sbtl-card) 74%,transparent);border-color:color-mix(in srgb,var(--sbtl-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)}
.sbtl--fx.sbtl--fill .sbtl-num{-webkit-text-stroke-color:color-mix(in srgb,var(--sbtl-red) 16%,transparent)}
.sbtl--fx.sbtl--fill .sbtl-icon{background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--sbtl-red) 12%,#fff));box-shadow:0 8px 18px -10px color-mix(in srgb,var(--sbtl-red) 60%,transparent),0 1px 0 #fff inset}
.sbtl--fx.sbtl--lines .sbtl-card{padding:28px 20px 24px;background:color-mix(in srgb,#fff 45%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:0 0 var(--sbtl-radius) var(--sbtl-radius)}
.sbtl--fx.sbtl--lines .sbtl-card::before,.sbtl--fx.sbtl--lines .sbtl-card::after{left:0;right:0}

/* effects in white for the bold red style */
.sbtl--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);
}
.sbtl--red .sbtl-dot,.sbtl--red .sbtl-plus::before,.sbtl--red .sbtl-plus::after{background:#fff}
.sbtl--red .sbtl-grain{mix-blend-mode:overlay;opacity:.12}
.sbtl--red.sbtl--fx .sbtl-bg{background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--sbtl-red) 80%,#ff5a66),var(--sbtl-red) 45%,var(--sbtl-red-dark))}
.sbtl--red.sbtl--fx::before{display:none}
.sbtl--red .sbtl-pattern--dots{background-image:radial-gradient(rgba(255,255,255,.28) 1.2px,transparent 1.7px)}

/* ---------- Header on the side ---------- */
.sbtl--head-side .sbtl-inner{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,2fr);gap:clamp(32px,5vw,80px);align-items:start}
.sbtl--head-side .sbtl-head{position:sticky;top:120px;flex-direction:column;align-items:flex-start;margin:0}
.sbtl--head-side .sbtl-grid{grid-template-columns:repeat(min(var(--sbtl-cols,2),2),minmax(0,1fr))}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
	.sbtl{--sbtl-cols:2}
	.sbtl--head-side .sbtl-inner{grid-template-columns:minmax(0,1fr)}
	.sbtl--head-side .sbtl-head{position:static}
	.sbtl--head-side .sbtl-grid{grid-template-columns:repeat(var(--sbtl-cols,2),minmax(0,1fr))}
}
@media (max-width:767px){
	.sbtl{--sbtl-cols:1}
	.sbtl-blob{filter:blur(50px)}
	.sbtl-ring--2,.sbtl-plus--2,.sbtl-dot--4{display:none}
	.sbtl-pattern--grid{background-size:40px 40px}
	.sbtl-head{align-items:flex-start}
	.sbtl .sbtl-sub{font-size:16px}
	.sbtl-icon{width:52px;height:52px;margin-bottom:24px}
	.sbtl--fill .sbtl-card:hover,.sbtl--red .sbtl-card:hover{transform:translateY(-4px)}
}
@media (hover:none){
	/* touch screens: show the brand accent without needing hover */
	.sbtl--fill .sbtl-card::before{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
	.sbtl-bg *{animation:none!important}
	.sbtl *,.sbtl *::before,.sbtl *::after{transition-duration:.01ms!important;animation:none!important}
	.sbtl--animate.sbtl-js .sbtl-rv{opacity:1;transform:none}
}
