/* ===== Kept from the "Qahvejo Noir" test: creator marquee + globe card ===== */

/* Creator-types marquee */
.strip { padding: 34px 0 26px; border-block: 1px solid #f5ede312; background: #2b1e1a; }
.strip-title { text-align: center; color: var(--ink-mute, #d8bea5); font-size: 14px; margin: 0 0 18px; }
.strip-title em { font-style: normal; color: #f5ede3; font-weight: 700; }
.marquee { overflow: hidden; direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: qahvejo-marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes qahvejo-marquee { to { transform: translateX(-50%); } }
.marquee .tag { direction: rtl; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 15px; color: #b9c4cb;
  border: 1px solid rgba(245,237,227,.08); background: rgba(255,255,255,.028); transition: color .3s, border-color .3s, background .3s; }
.marquee .tag:hover { color: #f5ede3; border-color: rgba(234,106,141,.4); background: rgba(145,0,41,.12); }
.marquee .tag svg { width: 18px; height: 18px; fill: none; stroke: #ea6a8d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Globe card: tall tile on the side of the features grid */
@media (min-width: 961px) {
  .landing #features .features { grid-template-columns: repeat(3, 1fr); }
  .landing #features .features .globe-card { grid-column: 3; grid-row: 1 / span 3; }
}
.globe-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 520px;
  background: radial-gradient(ellipse 70% 45% at 0% 0%, rgba(145,0,41,.28), transparent 70%), #211714 !important; }
.globe-card h3 { font-size: 20px; margin-bottom: 8px; }
.globe-card p { position: relative; z-index: 1; }
.globe-wrap { position: relative; flex: 1; min-height: 300px; margin: 0 -28px -28px; }
#globe { position: absolute; inset: auto -20% -24% -20%; width: 140%; aspect-ratio: 1; margin: auto; opacity: 0; transition: opacity 1.2s; cursor: grab; }
#globe.ready { opacity: 1; }
.globe-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(0deg, rgba(20,23,29,.95), transparent); pointer-events: none; }
@media (max-width: 960px) {
  .globe-card { grid-column: 1 / -1; min-height: 460px; }
  .globe-wrap { max-width: 520px; margin-inline: auto; width: calc(100% + 56px); }
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }