@import url('/bento-fixes.css');

.hero-profile {
  background-image: linear-gradient(0deg, #350d1bed 3%, transparent 60%), url('/assets/profile-anna.webp');
  background-position: center 25%;
  cursor: grab;
  touch-action: pan-y;
  transition: transform .28s ease, opacity .28s ease;
}
.hero-profile[data-profile="1"] { background-image: linear-gradient(0deg, #350d1bed 3%, transparent 60%), url('/assets/profile-jakob.webp'); }
.hero-profile.dragging { cursor: grabbing; transition: none; }
.hero-profile.swipe-left { opacity: 0; transform: translateX(-120%) rotate(-15deg) !important; }
.hero-profile.swipe-right { opacity: 0; transform: translateX(120%) rotate(15deg) !important; }
.hero-gesture-hint { color: var(--muted); font-size: 9px; margin: -13px 0 8px; text-align: center; }
.hero-match-faces img { border: 5px solid #fff; border-radius: 50%; box-shadow: 0 8px 25px #310b182b; height: 95px; margin: 0 -6px; object-fit: cover; width: 95px; }
.hero-match-faces img:nth-child(2) { transform: rotate(7deg); }
.mini-match img { border: 4px solid #fff; border-radius: 50%; box-shadow: 0 8px 22px #3b0c1a22; height: 74px; object-fit: cover; width: 74px; }
.full-profile-card[data-profile="2"] { background-image: linear-gradient(0deg, #310c19f5 4%, transparent 58%), url('/assets/profile-marie.webp'); }
.full-profile-card.group-profile { background-image: linear-gradient(0deg, #310c19f5 4%, transparent 58%), url('/assets/hero-social.webp'); }
.hero-photo { background-image: linear-gradient(180deg, transparent 43%, #4b1027ee 91%), url('/assets/profile-david.webp'); }
.anatomy-photo { background-image: linear-gradient(0deg, #431020f2 5%, transparent 57%), url('/assets/profile-nora.webp'); }
.tour-event-art { background-image: linear-gradient(0deg, #4b1027e8, transparent), url('/assets/event-uferfunken.webp'); }
.tour-discovery-card { background: linear-gradient(0deg, #350d1bed 3%, transparent 60%), url('/assets/avatar-elias.webp') center 35%/cover; color: #fff; height: 475px; margin: 0 10px; overflow: hidden; position: relative; transition: .25s; }
.tour-discovery-card.alternate { background-image: linear-gradient(0deg, #350d1bed 3%, transparent 60%), url('/assets/profile-marie.webp'); }
.tour-discovery-card > span { background: #fff; border-radius: 99px; color: var(--red); font-size: 8px; font-weight: 900; left: 16px; padding: 7px 9px; position: absolute; top: 22px; }
.tour-discovery-card > div { bottom: 24px; left: 20px; position: absolute; right: 20px; }
.tour-discovery-card small { font-size: 9px; font-weight: 900; }
.tour-discovery-card h3 { font-size: 34px; margin: 10px 0 5px; }
.tour-discovery-card p { font-size: 11px; margin: 0; }
.tour-swipe-actions { display: flex; gap: 22px; justify-content: center; padding: 16px 0 8px; }
.tour-swipe-actions button { background: #fff; border: 1px solid var(--line); border-radius: 50%; color: var(--burgundy); cursor: pointer; font-size: 20px; font-weight: 900; height: 50px; width: 50px; }
.tour-swipe-actions button:last-child { background: var(--red); border-color: var(--red); color: #fff; }
.tour-swipe-hint { color: var(--muted); font-size: 9px; margin: 0; text-align: center; }
.guided-app.mobile-preview .app-workspace { position: relative; }
.guided-app.mobile-preview .demo-match-modal.embedded-match { border-radius: 34px; inset: 0; min-height: 100%; overflow: auto; padding: 22px 16px; position: absolute; }
.guided-app.mobile-preview .demo-match-modal.embedded-match .matched-faces { margin: 24px 0 18px; }
.guided-app.mobile-preview .demo-match-modal.embedded-match .matched-faces img { height: 96px; width: 96px; }
.guided-app.mobile-preview .demo-match-modal.embedded-match h2 { font-size: 42px; }
.messages .typing { color: var(--muted); font-style: italic; }
.hero-showcase { background: linear-gradient(118deg,transparent 0 13%,#fff7f914 13% 22%,#f7dfe54d 22% 34%,#b733576b 34% 54%,#64162bcf 54% 67%,#8e24454d 67% 76%,transparent 88% 100%); border-radius: 0; box-shadow: none; overflow: visible; }
.hero-showcase::before { animation: heroLightShift 9s ease-in-out infinite alternate; background: linear-gradient(122deg,transparent 0 21%,#f3ccd54f 21% 39%,#d94c6959 39% 58%,#f3ccd51f 67%,transparent 82% 100%); border: 0; border-radius: 0; clip-path: polygon(8% 4%,92% 0,78% 96%,0 100%); filter: blur(10px); height: 92%; inset: 4% auto auto 0; transform: none; width: 96%; }
.hero-showcase::after { animation: none; background-image: linear-gradient(#64162b12 1px,transparent 1px),linear-gradient(90deg,#64162b12 1px,transparent 1px); background-size: 38px 38px; border: 0; border-radius: 0; clip-path: polygon(24% 0,94% 0,72% 100%,0 100%); filter: none; height: 62%; inset: auto 6% 8% auto; opacity: .55; transform: skewX(-8deg); width: 70%; -webkit-mask-image:linear-gradient(100deg,transparent,#000 35%,#000 68%,transparent 92%); mask-image:linear-gradient(100deg,transparent,#000 35%,#000 68%,transparent 92%); }
.hero-phone { box-shadow: 22px 42px 80px #64162b38, -12px 18px 48px #d94d6928, 0 0 0 1px #ffffff24; }
.hero-stage-label { color: var(--burgundy); display: grid; gap: 4px; left: 26px; opacity: .62; position: absolute; top: 28px; z-index: 1; }
.hero-stage-label span { font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.hero-stage-label b { font-size: 13px; }
@keyframes heroLightShift { from { opacity: .55; translate: -4% 0; } to { opacity: 1; translate: 8% 0; } }
@media(max-width:600px) { .hero-showcase { background: linear-gradient(116deg,transparent 0 8%,#f6dbe244 8% 26%,#b7335773 26% 55%,#64162bd4 55% 76%,#f2ccd539 76% 91%,transparent 91%); } .hero-stage-label { left: 18px; top: 18px; } }