/* ===== Section 04: "What our customers built with Beezr". Namespaced: .s04r / s04r- / --s04r-* ===== */
.s04r,.s04r-dlg{--s04r-ink:#07090f;--s04r-yellow:#ffd100;--s04r-btn-ink:#151b2b;--s04r-font:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--s04r-mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;--s04r-ease:cubic-bezier(.22,1,.36,1);font-family:var(--s04r-font);color:#fff;font-size:16px;line-height:1.4}
:where(.s04r,.s04r-dlg) *{box-sizing:border-box}
:where(.s04r,.s04r-dlg) ul{list-style:none}
:where(.s04r,.s04r-dlg) a{color:inherit;text-decoration:none}
:where(.s04r,.s04r-dlg) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.s04r{position:relative;min-height:100vh;min-height:max(100svh,760px);display:flex;align-items:center;padding:32px 0 80px;overflow:hidden;background:var(--s04r-ink);isolation:isolate}
.s04r-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:220px 220px}
.s04r-wrap{position:relative;z-index:1;width:min(1240px,calc(100% - 48px));margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}

.s04r-idx{font:400 12px/1 var(--s04r-mono);letter-spacing:.04em;color:rgba(255,255,255,.4)}
.s04r h2{margin-top:18px;text-wrap:balance;font-weight:500;font-size:36px;line-height:1.15;letter-spacing:-.022em;color:rgba(255,255,255,.72)}

/* ---------- the roller ---------- */

.s04r-roller{--s04r-boxh:1.34em;position:relative;width:calc(100% + 48px);margin-top:0;height:calc(var(--s04r-boxh) + 44px);
  font-size:clamp(40px,5vw,72px);cursor:default;outline:none;-webkit-tap-highlight-color:transparent}
.s04r-roller:focus-visible::before{content:'';position:absolute;left:24px;right:24px;top:0;bottom:0;border-radius:12px;box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
.s04r-terms{position:absolute;inset:0}
.s04r-term{position:absolute;left:0;right:0;top:0;height:var(--s04r-boxh);display:flex;align-items:center;justify-content:center;pointer-events:none}
.s04r-mask{display:block;width:100%;overflow:hidden;padding:.06em 0 .16em;text-align:center}
a.s04r-mask{color:inherit;text-decoration:none;pointer-events:none;-webkit-tap-highlight-color:transparent}
a.s04r-mask:focus-visible{outline:1.5px solid rgba(255,255,255,.4);outline-offset:-3px;border-radius:14px}
.s04r-term.cur .s04r-tx{pointer-events:auto}
.s04r-tx{display:inline-block;white-space:nowrap;font-weight:500;font-stretch:100%;letter-spacing:-.03em;line-height:1.12;padding-right:.03em;color:#fff;
  opacity:0;transform:translateY(40%);filter:blur(4px);will-change:transform,opacity,filter}
.s04r-tx a{color:inherit;font:inherit;text-decoration:none;text-underline-offset:6px}
.s04r-tx a:hover{text-decoration:underline}
.s04r-tx a:focus-visible{outline:1.5px solid rgba(255,255,255,.4);outline-offset:3px}
.s04r-tx.wr{display:block;white-space:normal;text-wrap:balance;margin:0 auto;padding-right:0}
.s04r-term.yours .s04r-tx{color:var(--s04r-yellow)}
.s04r-tx.on{opacity:1;transform:none;filter:blur(0);
  transition:transform .46s var(--s04r-ease) .09s,opacity .26s linear .09s,filter .4s var(--s04r-ease) .09s}
.s04r-tx.out{opacity:0;transform:translateY(-40%);filter:blur(4px);
  transition:transform .36s cubic-bezier(.5,0,.85,.45),opacity .2s cubic-bezier(.3,0,1,1),filter .28s ease-in}
.s04r-roller.meas .s04r-tx{transform:none!important;filter:none!important;transition:none!important}

.s04r-th{position:absolute;height:2px;pointer-events:none}
.s04r-th i{position:absolute;inset:0;background:var(--s04r-yellow);transform:scaleX(0);transform-origin:0 50%}
.s04r-th.on i{transform:scaleX(1);transition:transform .5s cubic-bezier(.65,0,.2,1)}
.s04r-th.ret i{transform:scaleX(0);transform-origin:100% 50%;transition:transform .26s cubic-bezier(.5,0,.9,.5)}
.s04r-lab{position:absolute;left:0;right:0;text-align:center;font:400 12px/16px var(--s04r-mono);letter-spacing:.02em;color:rgba(255,255,255,.45);opacity:0;pointer-events:none;transition:opacity .22s ease-in}
.s04r-lab.on{opacity:1;transition:opacity .4s ease-out .12s}
.s04r-term.yours .s04r-lab{color:rgba(255,209,0,.75)}
.s04r-lab svg{display:inline-block;width:10px;height:10px;margin-left:7px;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* the faint line that carries the thread down into the floor */
.s04r-drop{position:absolute;left:50%;width:1px;height:130px;margin-left:-.5px;background:linear-gradient(rgba(255,209,0,.18),rgba(255,209,0,0));transform:scaleY(0);transform-origin:50% 0;pointer-events:none}
.s04r-drop.on{transform:scaleY(1);transition:transform .7s var(--s04r-ease)}
.s04r-drop.ret{opacity:0;transition:opacity .2s ease-in}

/* ---------- logo strip ---------- */
.s04r-strip{position:relative;width:100%;height:72px;margin-top:46px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.s04r-track{display:flex;width:max-content;height:100%;animation:s04r-marq 42s linear infinite;will-change:transform}
.s04r-set{display:flex;flex:none;align-items:center;height:100%}
.s04r-set li{flex:none;margin-right:72px;display:flex;align-items:center}
.s04r-set img{display:block;opacity:.6;transition:opacity .25s ease;user-select:none;-webkit-user-drag:none}
.s04r-set img:hover{opacity:1}
.s04r-strip:hover .s04r-track,.s04r.idle .s04r-track{animation-play-state:paused}
@keyframes s04r-marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- close ---------- */
.s04r-close{margin-top:64px;display:flex;align-items:center;justify-content:center;gap:32px}
.s04r-close p{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.008em;color:#fff}
.s04r-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;height:48px;padding:0 24px;border-radius:10px;background:var(--s04r-yellow);color:var(--s04r-btn-ink);font-size:15px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;transition:background-color .2s ease}
.s04r-btn:hover{background:#ffdc33}
.s04r-btn:focus-visible{outline:1.5px solid #fff;outline-offset:3px}
.s04r-btn::after{content:'';position:absolute;inset:0;border:1.5px solid var(--s04r-yellow);border-radius:10px;opacity:0;pointer-events:none}
.s04r-btn.pulse::after{animation:s04r-ring 1.7s var(--s04r-ease) both}
@keyframes s04r-ring{0%{inset:0;opacity:.9;border-radius:10px}100%{inset:-16px;opacity:0;border-radius:26px}}

/* ---------- platform floor: a faint perspective grid behind everything ---------- */
.s04r-floor{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%)}
.s04r-floor .s04r-fm{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(ellipse 62% 78% at 50% 100%,#000 18%,transparent 72%);mask-image:radial-gradient(ellipse 62% 78% at 50% 100%,#000 18%,transparent 72%)}
.s04r-floor svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.s04r-floor line{stroke:rgba(255,255,255,.09);stroke-width:1;shape-rendering:crispEdges}

/* ---------- closing row buttons ---------- */
.s04r-close{flex-wrap:wrap;row-gap:20px}
.s04r-acts{display:flex;align-items:center;justify-content:center;gap:12px;flex:none;flex-wrap:wrap}
.s04r-text-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-size:15px;line-height:1.4;color:rgba(255,255,255,.7);text-underline-offset:4px}
.s04r-text-link:hover{color:#fff;text-decoration:underline}
.s04r-text-link:focus-visible{outline:1.5px solid #fff;outline-offset:3px}
.s04r-btn.s04r-ghost{background:transparent;color:#fff;font:inherit;font-size:15px;font-weight:500;letter-spacing:-.005em;border:1px solid rgba(255,255,255,.22);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.s04r-btn.s04r-ghost:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.04)}
.s04r-btn.s04r-ghost:focus-visible{outline:1.5px solid #fff;outline-offset:3px}

/* ---------- full list dialog ---------- */
.s04r-dlg{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:4vh 0;
  background:rgba(7,9,15,.82);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);opacity:0;pointer-events:none;
  transition:opacity .2s ease,backdrop-filter .2s ease,-webkit-backdrop-filter .2s ease}
.s04r-dlg.open{opacity:1;pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .26s ease,backdrop-filter .26s ease,-webkit-backdrop-filter .26s ease}
.s04r-dlg-panel{display:flex;flex-direction:column;width:min(1120px,92vw);max-height:90vh;background:#0b0f19;border:1px solid rgba(255,255,255,.10);border-radius:18px;overflow:hidden;
  box-shadow:0 48px 120px -24px rgba(0,0,0,.85),0 14px 36px -14px rgba(0,0,0,.6);
  opacity:0;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease;text-align:left}
.s04r-dlg.open .s04r-dlg-panel{opacity:1;transform:none;transition:opacity .26s ease,transform .26s var(--s04r-ease)}
.s04r-dlg-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 32px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.s04r-dlg-idx{font:400 11px/1 var(--s04r-mono);letter-spacing:.04em;color:rgba(255,255,255,.4)}
.s04r-dlg-head h3{margin-top:10px;font-weight:500;font-size:28px;line-height:1.12;letter-spacing:-.02em;color:#fff}
.s04r-dlg-head p{margin-top:6px;font-size:15.5px;line-height:1.4;color:rgba(255,255,255,.6);max-width:640px}
.s04r-dlg-x{flex:none;width:36px;height:36px;border-radius:10px;background:transparent;padding:0;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:border-color .2s ease,background-color .2s ease}
.s04r-dlg-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.s04r-dlg-x:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}
.s04r-dlg-x:focus-visible,.s04r-dlg a:focus-visible{outline:1.5px solid #fff;outline-offset:3px}
.s04r-dlg-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 32px 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:36px;row-gap:30px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.s04r-dlg-body::-webkit-scrollbar{width:8px}
.s04r-dlg-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
.s04r-dlg-body::-webkit-scrollbar-track{background:transparent}
.s04r-grp h4{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 12px/1.3 var(--s04r-mono);letter-spacing:.02em;color:rgba(255,255,255,.5);padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:16px}
.s04r-grp li{margin-bottom:15px}
.s04r-grp li:last-child{margin-bottom:0}
.s04r-grp li .s04r-nm{display:block;color:#fff;font-size:16px;line-height:1.25;font-weight:600;letter-spacing:-.005em;text-decoration:none}
.s04r-grp li a.s04r-nm{display:inline-block;cursor:pointer}
.s04r-grp li a.s04r-nm:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.s04r-nm-arrow{font-size:12px;color:rgba(255,255,255,.45)}
.s04r-nm:hover .s04r-nm-arrow{color:#fff}
.s04r-grp li p{margin-top:4px;font-size:13.5px;line-height:1.42;color:rgba(255,255,255,.58)}
.s04r-dlg-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:14px 32px;border-top:1px solid rgba(255,255,255,.08)}
.s04r-dlg-foot p{font-size:15px;line-height:1.4;color:rgba(255,255,255,.7)}
@media (min-width:1000px) and (max-height:820px){
  .s04r-dlg-panel{width:min(1180px,94vw)}
  .s04r-dlg-head{padding:16px 32px 14px}
  .s04r-dlg-head h3{margin-top:8px;font-size:26px}
  .s04r-dlg-body{padding:16px 32px 16px;column-gap:32px}
  .s04r-grp h4{padding-bottom:9px;margin-bottom:12px}
  .s04r-grp li{margin-bottom:11px}
  .s04r-dlg-foot{padding:10px 32px}
}
html.s04r-lock{overflow:hidden}

/* ---------- entrance ---------- */
.s04r.s04r-js .s04r-idx,.s04r.s04r-js h2,.s04r.s04r-js .s04r-roller,.s04r.s04r-js .s04r-strip,.s04r.s04r-js .s04r-close,.s04r.s04r-js .s04r-floor{opacity:0}
.s04r.s04r-js h2,.s04r.s04r-js .s04r-idx{transform:translateY(12px)}
.s04r.s04r-js.in .s04r-idx{opacity:1;transform:none;transition:opacity .7s ease,transform .7s var(--s04r-ease)}
.s04r.s04r-js.in h2{opacity:1;transform:none;transition:opacity .8s ease .08s,transform .8s var(--s04r-ease) .08s}
.s04r.s04r-js.in .s04r-roller{opacity:1}
.s04r.s04r-js.in .s04r-strip{opacity:1;transition:opacity 1.1s ease .55s}
.s04r.s04r-js.in .s04r-floor{opacity:1;transition:opacity 2s ease .3s}
.s04r.s04r-js.in .s04r-close{opacity:1;transition:opacity 1s ease 1s}

/* ---------- small screens ---------- */
@media (max-width:999px){
  .s04r-dlg-body{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .s04r h2{font-size:clamp(24px,5vw,32px)}
}
@media (max-width:699px){
  .s04r-dlg-body{grid-template-columns:minmax(0,1fr);padding:22px 20px 16px;row-gap:30px}
  .s04r-dlg-head{padding:22px 20px 18px}
  .s04r-dlg-head h3{font-size:24px}
  .s04r-dlg-foot{padding:16px 20px}
  .s04r-grp li{margin-bottom:12px}
  .s04r-grp li a.s04r-nm{display:inline-flex;align-items:center;min-height:44px}
  .s04r-grp li a.s04r-nm+p{margin-top:-8px}
  .s04r-dlg-panel{max-height:90vh}
}
@media (max-width:719px){
  .s04r-close{flex-direction:column;gap:20px}
  .s04r-acts{flex-direction:column-reverse;align-items:stretch;width:240px}
  .s04r-close p{font-size:18px;max-width:300px}
}
@media (max-width:599px){
  .s04r{padding:32px 0 72px}
  .s04r-wrap{width:calc(100% - 32px)}
  .s04r-roller{width:calc(100% + 32px);margin-top:22px}
  .s04r-strip{width:calc(100% + 32px)}
  .s04r-set li{margin-right:56px}
  .s04r-close{margin-top:48px}
  .s04r-strip{margin-top:40px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .s04r-tx,.s04r-tx.on,.s04r-tx.out{transform:none!important;filter:none!important}
  .s04r-tx.on{transition:opacity .3s linear}
  .s04r-tx.out{transition:opacity .2s linear}
  .s04r-th.on i,.s04r-th.ret i,.s04r-drop.on,.s04r-drop.ret{transition:none}
  .s04r-dlg,.s04r-dlg.open,.s04r-dlg-panel,.s04r-dlg.open .s04r-dlg-panel{transition:none!important}
  .s04r-dlg-panel{transform:none}
  .s04r-btn.pulse::after{animation:none}
  .s04r.s04r-js .s04r-idx,.s04r.s04r-js h2,.s04r.s04r-js .s04r-strip,.s04r.s04r-js .s04r-close,.s04r.s04r-js .s04r-floor{transition:none!important}
  .s04r.s04r-js .s04r-idx,.s04r.s04r-js h2{transform:none}
  .s04r-track{animation:none;width:auto;flex-direction:column;align-items:center;height:auto}
  .s04r-strip{height:auto;width:100%;overflow:visible;-webkit-mask-image:none;mask-image:none;margin-top:24px}
  .s04r-set{flex-wrap:wrap;justify-content:center;height:auto;gap:28px 56px}
  .s04r-set li{margin:0}
  .s04r-set[aria-hidden="true"]{display:none}
}
/* same dither layer as section 03, so the two sections meet without a step */
.s04r-dither{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.016;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2 -.45'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:160px 160px}