/* ===== 12 PAZARLAMA — masa/magnet · sosyal · arama · web sipariş ===== */
.v12 {
  --cycle: 18s;
  --bc-orange: #f97316;
  --bc-orange-d: #ea580c;
  background:
    radial-gradient(ellipse 50% 42% at 18% 18%, rgba(var(--brand-rgb),.14), transparent 55%),
    radial-gradient(ellipse 45% 38% at 88% 72%, rgba(249,115,22,.1), transparent 50%),
    #0a0c10;
  color: #e8ecf4;
  font-family: Outfit, "IBM Plex Sans", sans-serif;
}
.v12 .story { position: absolute; inset: 0; }
.v12 .beat {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding: .5rem .65rem .85rem; box-sizing: border-box;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.v12 .b1 { animation: v12b1 var(--cycle) linear infinite; }
.v12 .b2 { animation: v12b2 var(--cycle) linear infinite; }
.v12 .b3 { animation: v12b3 var(--cycle) linear infinite; }
.v12 .b4 { animation: v12b4 var(--cycle) linear infinite; }
.v12 .b5 { animation: v12b5 var(--cycle) linear infinite; }
/* intro 0–16 · masa/magnet 16–32 · sosyal 32–46 · arama 46–60 · web 60–76 · hold 76–100 */
@keyframes v12b1 {
  0%,15.5%{opacity:0;visibility:hidden;transform:translateY(8px)}
  16.5%,31%{opacity:1;visibility:visible;transform:none}
  32.5%,100%{opacity:0;visibility:hidden}
}
@keyframes v12b2 {
  0%,31.5%{opacity:0;visibility:hidden;transform:translateY(8px)}
  32.5%,45%{opacity:1;visibility:visible;transform:none}
  46.5%,100%{opacity:0;visibility:hidden}
}
@keyframes v12b3 {
  0%,45.5%{opacity:0;visibility:hidden;transform:translateY(8px)}
  46.5%,59%{opacity:1;visibility:visible;transform:none}
  60.5%,100%{opacity:0;visibility:hidden}
}
@keyframes v12b4 {
  0%,59.5%{opacity:0;visibility:hidden;transform:translateY(8px)}
  60.5%,75%{opacity:1;visibility:visible;transform:none}
  76.5%,100%{opacity:0;visibility:hidden}
}
@keyframes v12b5 {
  0%,75.5%{opacity:0;visibility:hidden;transform:scale(1.02)}
  77%{opacity:1;visibility:visible;transform:scale(1)}
  100%{opacity:1;visibility:visible;transform:scale(1)}
}
.v12 .rail {
  position: absolute; left: 50%; bottom: .35rem; transform: translateX(-50%);
  display: flex; gap: .28rem; z-index: 8;
}
.v12 .rail i {
  width: 22px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.14);
}
.v12 .rail i:nth-child(1){animation:v12r1 var(--cycle) linear infinite}
.v12 .rail i:nth-child(2){animation:v12r2 var(--cycle) linear infinite}
.v12 .rail i:nth-child(3){animation:v12r3 var(--cycle) linear infinite}
.v12 .rail i:nth-child(4){animation:v12r4 var(--cycle) linear infinite}
.v12 .rail i:nth-child(5){animation:v12r5 var(--cycle) linear infinite}
@keyframes v12r1 {
  0%,15%{background:rgba(255,255,255,.14)} 16%,31%{background:var(--brand)} 32%,100%{background:rgba(255,255,255,.14)}
}
@keyframes v12r2 {
  0%,31%{background:rgba(255,255,255,.14)} 32%,45%{background:#dd2a7b} 46%,100%{background:rgba(255,255,255,.14)}
}
@keyframes v12r3 {
  0%,45%{background:rgba(255,255,255,.14)} 46%,59%{background:#4285f4} 60%,100%{background:rgba(255,255,255,.14)}
}
@keyframes v12r4 {
  0%,59%{background:rgba(255,255,255,.14)} 60%,75%{background:var(--bc-orange)} 76%,100%{background:rgba(255,255,255,.14)}
}
@keyframes v12r5 {
  0%,75%{background:rgba(255,255,255,.14)} 76%,100%{background:#7dffb2}
}
.v12 .eyebrow {
  margin: 0 0 .08rem; font: 700 .5rem Outfit, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--brand-rgb),.95);
}
.v12 .title {
  margin: 0 0 .1rem; font: 800 1rem Outfit, sans-serif;
  letter-spacing: -.02em; color: #fff; line-height: 1.15;
}
.v12 .lead {
  margin: 0 0 .35rem; font: 500 .58rem "IBM Plex Sans", sans-serif;
  color: #aeb6c6; max-width: 48em; line-height: 1.35;
}
.v12 .final-h {
  margin: 0 0 .3rem; text-align: center;
  font: 800 1.1rem Outfit, sans-serif; letter-spacing: -.02em; color: #fff;
}

/* —— b1 masa QR + magnet → buzdolabı —— */
.v12 .touch-row {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1.05fr auto 1fr; gap: .4rem; align-items: stretch;
}
.v12 .touch-card {
  background: #151922; border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: .45rem; display: flex; flex-direction: column; gap: .3rem;
  min-height: 0; overflow: hidden;
  opacity: 0; transform: translateY(8px);
  animation: v12in var(--cycle) var(--snap) infinite;
}
.v12 .touch-card.home { animation-delay: .15s; }
@keyframes v12in {
  0%,17%{opacity:0;transform:translateY(10px)}
  22%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
.v12 .touch-card h4 {
  margin: 0; font: 700 .58rem Outfit, sans-serif; color: #fff;
}
.v12 .touch-card p {
  margin: 0; font: 500 .48rem "IBM Plex Sans", sans-serif; color: #8b93a7;
}
.v12 .touch-imgs {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
}
.v12 .touch-imgs figure {
  margin: 0; border-radius: 10px; overflow: hidden; position: relative;
  border: 1px solid rgba(255,255,255,.08); background: #0e1014;
}
.v12 .touch-imgs figure.wide { grid-column: 1 / -1; }
.v12 .touch-imgs img {
  width: 100%; height: 100%; object-fit: cover; display: block; min-height: 56px;
}
.v12 .touch-imgs figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .25rem .35rem;
  background: linear-gradient(transparent, rgba(8,10,14,.9));
  font: 700 .48rem Outfit, sans-serif; color: #fff;
}
.v12 .arrow {
  align-self: center; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  font: 700 .48rem Outfit, sans-serif; color: #7dffb2; white-space: nowrap;
  opacity: 0; animation: v12arr var(--cycle) var(--punch) infinite;
}
.v12 .arrow i {
  width: 28px; height: 2px; background: #7dffb2; position: relative;
  display: block;
}
.v12 .arrow i::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  border: 5px solid transparent; border-left-color: #7dffb2;
  transform: translateY(-50%);
}
@keyframes v12arr {
  0%,20%{opacity:0;transform:translateX(-6px)}
  26%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
.v12 .fridge {
  flex: 1; min-height: 0; border-radius: 12px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #c5cede 0%, #9aa3b5 40%, #7a8496 100%);
  border: 2px solid #6b7280; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.v12 .fridge::before {
  content: ""; position: absolute; left: 50%; top: 8%; bottom: 8%;
  width: 3px; background: rgba(0,0,0,.18); transform: translateX(-50%);
}
.v12 .fridge .handle {
  position: absolute; right: 10%; top: 22%; width: 6px; height: 28%;
  border-radius: 4px; background: #4b5563;
}
.v12 .fridge .mag {
  position: absolute; left: 18%; top: 28%; width: 42%;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  border: 2px solid #fff;
  animation: v12mag var(--cycle) var(--punch) infinite;
}
.v12 .fridge .mag img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
@keyframes v12mag {
  0%,22%{opacity:0;transform:translateY(-18px) scale(.85) rotate(-6deg)}
  28%{opacity:1;transform:translateY(2px) scale(1.04) rotate(1deg)}
  32%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
.v12 .fridge .lbl {
  position: absolute; left: .4rem; right: .4rem; bottom: .35rem;
  font: 700 .48rem Outfit, sans-serif; color: #1f2937; text-align: center;
  background: rgba(255,255,255,.75); border-radius: 6px; padding: .2rem;
}

/* —— b2 sosyal IG / FB / WA —— */
.v12 .social-row {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem;
}
.v12 .soc {
  background: #151922; border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: .4rem; display: flex; flex-direction: column; gap: .3rem;
  min-height: 0; overflow: hidden;
  opacity: 0; transform: translateY(8px);
  animation: v12soc var(--cycle) var(--snap) infinite;
}
.v12 .soc:nth-child(1){animation-delay:0s}
.v12 .soc:nth-child(2){animation-delay:.08s}
.v12 .soc:nth-child(3){animation-delay:.16s}
@keyframes v12soc {
  0%,34%{opacity:0;transform:translateY(10px)}
  38%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
.v12 .soc .sh {
  display: flex; align-items: center; justify-content: space-between; gap: .25rem;
}
.v12 .soc .sh strong {
  display: flex; align-items: center; gap: .25rem;
  font: 700 .55rem Outfit, sans-serif; color: #fff;
}
.v12 .soc .sh strong i {
  width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center;
  font-style: normal; font-size: .48rem; font-weight: 800; color: #fff;
}
.v12 .soc .sh strong i.ig { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }
.v12 .soc .sh strong i.fb { background: #1877f2; }
.v12 .soc .sh strong i.wa { background: #25d366; color: #0a0c10; }
.v12 .soc .sh em {
  font: 600 .42rem Outfit, sans-serif; font-style: normal; color: #7dffb2;
}
.v12 .soc .preview {
  flex: 1; min-height: 0; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); background: #0e1014;
  display: flex; flex-direction: column;
}
.v12 .soc .preview .ph {
  flex: 1; min-height: 48px;
  background: center/cover no-repeat url("/demos/assets/magaza/afis-poster.webp");
}
.v12 .soc.fb .preview .ph {
  background-image: url("/demos/assets/magaza/brosur.webp");
}
.v12 .soc.wa .preview {
  background: #0b141a; padding: .35rem; gap: .25rem;
}
.v12 .soc.wa .bubble {
  align-self: flex-start; max-width: 92%;
  background: #005c4b; color: #e9edef; border-radius: 8px;
  padding: .35rem .4rem; font: 500 .48rem "IBM Plex Sans", sans-serif; line-height: 1.3;
}
.v12 .soc.wa .bubble b { display: block; font: 700 .52rem Outfit, sans-serif; margin-bottom: .1rem; color: #fff; }
.v12 .soc.wa .cta {
  align-self: stretch; text-align: center; margin-top: auto;
  padding: .28rem; border-radius: 8px; background: #25d366; color: #0a0c10;
  font: 800 .5rem Outfit, sans-serif;
}
.v12 .soc .preview .meta {
  padding: .3rem .35rem; font: 500 .45rem "IBM Plex Sans", sans-serif; color: #8b93a7;
}
.v12 .soc .preview .meta b { display: block; font: 700 .5rem Outfit, sans-serif; color: #fff; margin-bottom: .05rem; }

/* —— b3 arama Google ağırlıklı —— */
.v12 .search-layout {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1.55fr .75fr; gap: .4rem;
}
.v12 .g-panel, .v12 .alt-engines {
  background: #151922; border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: .45rem; min-height: 0;
  display: flex; flex-direction: column; gap: .3rem;
  opacity: 0; transform: translateY(8px);
  animation: v12sr var(--cycle) var(--snap) infinite;
}
.v12 .alt-engines { animation-delay: .1s; }
@keyframes v12sr {
  0%,48%{opacity:0;transform:translateY(10px)}
  52%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
.v12 .g-panel .gh {
  display: flex; align-items: center; justify-content: space-between;
}
.v12 .g-panel .gh strong {
  display: flex; align-items: center; gap: .3rem;
  font: 700 .62rem Outfit, sans-serif; color: #fff;
}
.v12 .g-panel .gh strong i {
  width: 22px; height: 22px; border-radius: 6px; background: #fff; color: #4285f4;
  display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .75rem;
}
.v12 .g-panel .gh em {
  font: 700 .45rem Outfit, sans-serif; font-style: normal; color: #0a0c10;
  background: #fbbc04; padding: .12rem .4rem; border-radius: 99px;
}
.v12 .g-card {
  background: #fff; color: #202124; border-radius: 10px; padding: .45rem .5rem;
  display: flex; flex-direction: column; gap: .15rem; border: 1px solid #e5e7eb;
}
.v12 .g-card.main {
  box-shadow: 0 0 0 2px rgba(66,133,244,.35);
  animation: v12gpulse var(--cycle) var(--punch) infinite;
}
@keyframes v12gpulse {
  0%,52%{box-shadow:0 0 0 2px rgba(66,133,244,.25)}
  58%{box-shadow:0 0 0 4px rgba(66,133,244,.45)}
  66%,100%{box-shadow:0 0 0 2px rgba(66,133,244,.25)}
}
.v12 .g-card .sponsored {
  font: 600 .42rem Outfit, sans-serif; color: #70757a; text-transform: uppercase; letter-spacing: .04em;
}
.v12 .g-card .url { font: 500 .48rem "IBM Plex Sans", sans-serif; }
.v12 .g-card .url b { color: #0d652d; font-weight: 600; }
.v12 .g-card h4 {
  margin: 0; font: 600 .7rem Outfit, sans-serif; color: #1a0dab; line-height: 1.2;
}
.v12 .g-card p {
  margin: 0; font: 500 .5rem "IBM Plex Sans", sans-serif; color: #4d5156; line-height: 1.3;
}
.v12 .g-card .chips { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .1rem; }
.v12 .g-card .chips span {
  font: 600 .42rem Outfit, sans-serif; padding: .12rem .3rem; border-radius: 5px;
  background: #f1f3f4; color: #3c4043;
}
.v12 .g-stack { display: flex; flex-direction: column; gap: .28rem; flex: 1; justify-content: center; }
.v12 .g-card.dim { opacity: .5; }
.v12 .alt-engines h4 {
  margin: 0; font: 700 .55rem Outfit, sans-serif; color: #fff;
}
.v12 .alt-engines > p {
  margin: 0; font: 500 .48rem "IBM Plex Sans", sans-serif; color: #8b93a7;
}
.v12 .eng {
  flex: 1; display: flex; flex-direction: column; gap: .25rem; justify-content: center;
}
.v12 .eng article {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: .4rem .45rem;
  display: flex; align-items: center; gap: .4rem;
}
.v12 .eng article .mk {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  font: 800 .55rem Outfit, sans-serif; color: #fff; flex-shrink: 0;
}
.v12 .eng article.bing .mk { background: #008373; }
.v12 .eng article.yandex .mk { background: #fc3f1d; }
.v12 .eng article strong { display: block; font: 700 .55rem Outfit, sans-serif; color: #fff; }
.v12 .eng article span { font: 500 .45rem "IBM Plex Sans", sans-serif; color: #8b93a7; }
.v12 .eng .note-sm {
  font: 600 .48rem Outfit, sans-serif; color: #fbbc04; text-align: center; margin-top: .15rem;
}

/* —— b4 burgerscafe desktop + mobile —— */
.v12 .web-row {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1.35fr .72fr; gap: .4rem; align-items: stretch;
}
.v12 .desk, .v12 .phone-wrap {
  min-height: 0; opacity: 0; transform: translateY(8px);
  animation: v12web var(--cycle) var(--snap) infinite;
}
.v12 .phone-wrap { animation-delay: .1s; }
@keyframes v12web {
  0%,62%{opacity:0;transform:translateY(10px)}
  66%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
.v12 .desk {
  background: #eef0f3; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  display: flex; flex-direction: column; color: #111;
}
.v12 .desk .chrome {
  display: flex; align-items: center; gap: .3rem;
  padding: .22rem .4rem; background: #dde1e6; flex-shrink: 0;
}
.v12 .desk .chrome .dots { display: flex; gap: .18rem; }
.v12 .desk .chrome .dots i { width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; }
.v12 .desk .chrome .urlbar {
  flex: 1; font: 500 .45rem "IBM Plex Sans", sans-serif; color: #4b5563;
  background: #fff; border-radius: 5px; padding: .14rem .35rem;
}
.v12 .bc-top {
  display: flex; align-items: center; gap: .35rem;
  padding: .3rem .4rem; background: #fff; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.v12 .bc-top img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.v12 .bc-top .nm { flex: 1; min-width: 0; }
.v12 .bc-top .nm b { display: block; font: 700 .52rem Outfit, sans-serif; color: #1f2937; }
.v12 .bc-top .nm span { font: 500 .4rem "IBM Plex Sans", sans-serif; color: #6b7280; }
.v12 .bc-top .nm span::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #22c55e; margin-right: .2rem; vertical-align: middle;
}
.v12 .bc-top .tel {
  font: 700 .42rem Outfit, sans-serif; color: #fff; background: var(--bc-orange);
  padding: .18rem .4rem; border-radius: 6px; white-space: nowrap;
}
.v12 .bc-ban {
  margin: .3rem .4rem 0; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  aspect-ratio: 2.6 / 1; background: #111 center/cover no-repeat;
  background-image: url("/demos/assets/burgerscafe/banner1.webp");
  position: relative;
}
.v12 .bc-ban .cta {
  position: absolute; left: .4rem; bottom: .35rem;
  font: 800 .45rem Outfit, sans-serif; color: #fff; background: var(--bc-orange);
  padding: .18rem .45rem; border-radius: 6px;
}
.v12 .bc-cats {
  display: flex; gap: .2rem; flex-wrap: wrap; padding: .3rem .4rem; flex-shrink: 0;
}
.v12 .bc-cats span {
  font: 600 .4rem Outfit, sans-serif; padding: .12rem .32rem; border-radius: 99px;
  background: #fff; border: 1px solid #e5e7eb; color: #4b5563;
}
.v12 .bc-cats span.on { background: var(--bc-orange); border-color: var(--bc-orange); color: #fff; }
.v12 .bc-grid {
  flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem;
  padding: 0 .4rem .4rem;
}
.v12 .bc-grid article {
  background: #fff; border-radius: 8px; border: 1px solid #e5e7eb; overflow: hidden;
  display: flex; flex-direction: column;
}
.v12 .bc-grid .pic {
  aspect-ratio: 1; background: #f3f4f6 center/contain no-repeat;
}
.v12 .bc-grid article:nth-child(1) .pic { background-image: url("/demos/assets/burgerscafe/kola.webp"); }
.v12 .bc-grid article:nth-child(2) .pic { background-image: url("/demos/assets/burgerscafe/fanta.webp"); }
.v12 .bc-grid article:nth-child(3) .pic { background-image: url("/demos/assets/burgerscafe/ayran.webp"); }
.v12 .bc-grid b {
  padding: .2rem .25rem .05rem; font: 700 .42rem Outfit, sans-serif; color: #111;
}
.v12 .bc-grid em {
  padding: 0 .25rem .25rem; font: 600 .4rem Outfit, sans-serif; font-style: normal; color: var(--bc-orange-d);
}

.v12 .phone-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.v12 .phone {
  width: 100%; max-width: 168px; height: 100%; max-height: 100%;
  background: #111; border-radius: 22px; padding: 8px 6px 10px;
  border: 2px solid #3a3f4a; box-shadow: 0 12px 28px rgba(0,0,0,.4);
  display: flex; flex-direction: column; min-height: 0;
}
.v12 .phone .notch {
  width: 42%; height: 8px; background: #1a1d24; border-radius: 0 0 8px 8px;
  margin: 0 auto 6px; flex-shrink: 0;
}
.v12 .phone .screen {
  flex: 1; min-height: 0; background: #f5f5f5; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; color: #111;
}
.v12 .phone .m-top {
  display: flex; align-items: center; gap: .25rem;
  padding: .3rem .35rem; background: #fff; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.v12 .phone .m-top img { width: 20px; height: 20px; border-radius: 50%; }
.v12 .phone .m-top b { font: 700 .45rem Outfit, sans-serif; flex: 1; }
.v12 .phone .m-ban {
  margin: .3rem; border-radius: 8px; aspect-ratio: 16/9; flex-shrink: 0;
  background: #111 center/cover no-repeat url("/demos/assets/burgerscafe/banner1.webp");
}
.v12 .phone .m-camp {
  margin: 0 .3rem; padding: .3rem; border-radius: 8px; background: #fff;
  border: 1px solid #e5e7eb; flex-shrink: 0;
}
.v12 .phone .m-camp strong {
  display: block; font: 700 .42rem Outfit, sans-serif; color: var(--bc-orange-d); margin-bottom: .15rem;
}
.v12 .phone .m-camp span {
  display: block; font: 500 .4rem "IBM Plex Sans", sans-serif; color: #4b5563; line-height: 1.25;
}
.v12 .phone .m-foot {
  margin-top: auto; display: flex; justify-content: space-around;
  padding: .25rem .15rem; background: #fff; border-top: 1px solid #e5e7eb; flex-shrink: 0;
}
.v12 .phone .m-foot span {
  font: 600 .32rem Outfit, sans-serif; color: #6b7280; text-align: center;
}
.v12 .phone .m-foot span.on { color: var(--bc-orange); }
.v12 .dev-lbl {
  margin-top: .25rem; font: 700 .45rem Outfit, sans-serif; color: #8b93a7; letter-spacing: .06em;
  text-transform: uppercase;
}

/* —— b5 özet —— */
.v12 .funnel {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; align-content: center;
}
.v12 .ch {
  background: #151922; border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: .5rem .35rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  opacity: 0; transform: translateY(8px);
  animation: v12ch var(--cycle) var(--snap) infinite;
}
.v12 .ch:nth-child(1){animation-delay:0s}
.v12 .ch:nth-child(2){animation-delay:.06s}
.v12 .ch:nth-child(3){animation-delay:.12s}
.v12 .ch:nth-child(4){animation-delay:.18s}
@keyframes v12ch {
  0%,77%{opacity:0;transform:translateY(10px)}
  82%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
.v12 .ch .ico {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font: 800 .65rem Outfit, sans-serif; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
}
.v12 .ch:nth-child(1) .ico { background: rgba(var(--brand-rgb),.2); border-color: rgba(var(--brand-rgb),.45); color: #ffb4b1; }
.v12 .ch:nth-child(2) .ico { background: rgba(221,42,123,.2); border-color: rgba(221,42,123,.45); color: #f9a8d4; }
.v12 .ch:nth-child(3) .ico { background: rgba(66,133,244,.2); border-color: rgba(66,133,244,.45); color: #93c5fd; }
.v12 .ch:nth-child(4) .ico { background: rgba(249,115,22,.2); border-color: rgba(249,115,22,.45); color: #fdba74; }
.v12 .ch strong { font: 700 .58rem Outfit, sans-serif; color: #fff; }
.v12 .ch span { font: 500 .45rem "IBM Plex Sans", sans-serif; color: #8b93a7; line-height: 1.25; }
.v12 .note {
  margin: .35rem 0 0; text-align: center;
  font: 600 .55rem Outfit, sans-serif; color: #aeb6c6;
}
.v12 .note b { color: #7dffb2; }