/* AI companions on the public pages (home, listings, client welcome): a night
   band that stands out from the light pages without restyling them. */
.ais-section { position: relative; background:
    radial-gradient(900px 500px at 10% 0%, rgba(255, 79, 139, .22), transparent 60%),
    radial-gradient(800px 520px at 100% 100%, rgba(130, 16, 64, .55), transparent 60%),
    #0e0509; color: #fbeef3; overflow: hidden; }
.ais-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ais-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 196, 220, .14); font-size: 12px; font-weight: 700; color: #e3c5d1; }
.ais-head h2 { margin: 14px 0 0; font: 700 clamp(28px, 4.4vw, 46px)/1.08 "Sora", system-ui, sans-serif; letter-spacing: -0.03em; color: #fff; }
.ais-head h2 em { font-style: italic; background: linear-gradient(120deg, #ff8fb4, #ff4f8b 45%, #f5c890); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ais-head p { margin: 10px 0 0; max-width: 56ch; color: #e3c5d1; font-size: 15px; line-height: 1.55; }
.ais-all { color: #ff8fb4; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ais-all:hover { color: #fff; }
.ais-live, .ais-online i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; animation: aisLive 1.8s infinite; }
@keyframes aisLive { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); } 70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }

.ais-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
@media (max-width: 900px) { .ais-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ais-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-right: -20px; padding-right: 20px; scrollbar-width: none; } .ais-cards::-webkit-scrollbar { display: none; } .ais-card { flex: 0 0 72%; scroll-snap-align: start; } }
.ais-card { position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #1a0a12; border: 1px solid rgba(255, 196, 220, .12); color: #fff; text-decoration: none; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95); transition: transform .25s, border-color .25s, box-shadow .25s; }
.ais-card:hover { transform: translateY(-4px); border-color: rgba(255, 79, 139, .5); box-shadow: 0 40px 70px -34px rgba(255, 40, 110, .5); color: #fff; }
.ais-media { position: relative; display: block; aspect-ratio: 3 / 4; background: radial-gradient(circle at 50% 30%, #4a1630, #1a0a12); }
.ais-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; transition: transform .6s; }
.ais-card:hover .ais-media img { transform: scale(1.05); }
.ais-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(14, 5, 9, .6) 75%, #1a0a12); }
.ais-ini { position: absolute; inset: 0; display: grid; place-items: center; font: 700 80px "Sora", sans-serif; color: rgba(255, 143, 180, .55); }
.ais-online { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(14, 5, 9, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11.5px; font-weight: 700; }
.ais-body { position: relative; z-index: 2; margin-top: -58px; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.ais-body b { font: 700 20px "Sora", sans-serif; display: flex; align-items: baseline; gap: 7px; }
.ais-body b small { font-size: 15px; font-weight: 500; color: #e3c5d1; }
.ais-tag { font-size: 13px; color: #e3c5d1; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ais-cta { margin-top: 6px; display: block; text-align: center; padding: 11px 12px; border-radius: 999px; background: linear-gradient(135deg, #ff6b9d, #e91e63 55%, #b0124c); font-weight: 800; font-size: 14px; box-shadow: 0 14px 30px -14px rgba(255, 64, 129, .8); }

/* compact strip */
.ais-strip { margin: 16px 0; }
.ais-strip-in { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 20px; text-decoration: none; color: #fbeef3; background:
    radial-gradient(500px 200px at 0% 0%, rgba(255, 79, 139, .35), transparent 70%),
    linear-gradient(120deg, #1f0b15, #3a0f24); border: 1px solid rgba(255, 79, 139, .35); box-shadow: 0 20px 40px -26px rgba(233, 30, 99, .7); transition: transform .2s, box-shadow .2s; }
.ais-strip-in:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 26px 50px -26px rgba(233, 30, 99, .9); }
.ais-faces { display: flex; flex: none; }
.ais-face { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; margin-left: -12px; border: 2px solid #2a0d1a; background: #4a1630; display: grid; place-items: center; font-weight: 800; color: #ff8fb4; }
.ais-face:first-child { margin-left: 0; }
.ais-face img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.ais-strip-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ais-strip-txt b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ais-strip-txt small { color: #e3c5d1; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ais-strip-go { flex: none; padding: 9px 16px; border-radius: 999px; background: linear-gradient(135deg, #ff6b9d, #e91e63 55%, #b0124c); color: #fff; font-weight: 800; font-size: 13.5px; }
@media (max-width: 520px) { .ais-strip-go { display: none; } .ais-face { width: 38px; height: 38px; } }

/* header link */
.nav-ai { position: relative; display: inline-flex; align-items: center; gap: 6px; font-weight: 800 !important; background: linear-gradient(120deg, #ff6b9d, #e91e63); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.nav-ai .ais-live { width: 7px; height: 7px; }