/* umego.app homepage — 2026-11 redesign. Tokens live in site.20261104.css. */

.home section { position: relative; }
.sec-head { max-width: 760px; display: grid; gap: 18px; }
.sec-head.center { margin: 0 auto; text-align: center; justify-items: center; }
.sec-head.center .u-lede { margin: 0 auto; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { margin-top: calc(-1 * var(--u-nav-h)); padding: calc(var(--u-nav-h) + clamp(24px, 3vw, 40px)) 0 0; overflow: hidden; isolation: isolate; }
.hero-glow {
  position: absolute; left: -10%; right: -10%; top: 0; height: min(118svh, 1180px); z-index: -2; pointer-events: none;
  background:
    radial-gradient(48% 40% at 50% 11%, var(--u-glow-sun), transparent 70%),
    radial-gradient(64% 40% at 50% 84%, var(--u-glow-sky), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 82%, transparent 100%);
  animation: glow-drift 18s ease-in-out infinite alternate;
}
@keyframes glow-drift { to { transform: translate3d(-1.5%, 0, 0) scale(1.03); } }
.hero-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--u-dot) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 55% at 72% 44%, #000 20%, transparent 72%);
  mask-image: radial-gradient(60% 55% at 72% 44%, #000 20%, transparent 72%);
}
.hero-in {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center;
  min-height: min(760px, calc(100svh - var(--u-nav-h) - 150px));
}
.hero-copy { display: grid; justify-items: start; }
.hero-copy .u-h1 { margin: 28px 0 26px; font-size: clamp(60px, 7.4vw, 108px); line-height: .92; }
.h1-tag { display: block; margin-top: .14em; font-size: .56em; line-height: 1.04; letter-spacing: -.02em; }
.hero-copy .u-lede { max-width: 27em; }
.h1-name { display: block; letter-spacing: -.035em; }
.swash { position: relative; white-space: nowrap; z-index: 0; }
.swash svg { position: absolute; left: -2%; bottom: .17em; width: 104%; height: .24em; z-index: -1; overflow: visible; }
.swash path { fill: none; stroke: var(--u-solar); stroke-width: 15; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: swash 1.1s .55s var(--u-ease) forwards; }
@keyframes swash { to { stroke-dashoffset: 0; } }
.hero-actions { margin-top: 38px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero-proof { margin-top: 30px; display: flex; align-items: center; gap: 16px; text-align: left; }
.hero-proof .stack { display: flex; }
.hero-proof .stack img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--u-paper); box-shadow: 0 2px 8px rgb(0 0 0 / .1); }
.hero-proof .stack img + img { margin-left: -12px; }
.hero-proof p { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; }
.hero-proof p span { font-weight: 400; color: var(--u-muted); }

.stage { position: relative; height: clamp(580px, 70vh, 740px); perspective: 1600px; }
.stage-phone { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.stage-phone .u-phone { width: 318px; }
.float { position: absolute; padding: 14px; animation: bob 7s ease-in-out infinite; z-index: 2; transition: translate .5s var(--u-ease); }
.float:nth-of-type(odd) { animation-duration: 8.5s; animation-delay: -2s; }
@keyframes bob { 50% { transform: translateY(-10px); } }
.f-cap { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--u-faint); }

.f-stories { left: -4%; top: 30%; display: grid; gap: 8px; justify-items: start; }
.f-stories .f-row { display: flex; }
.f-stories .u-ring + .u-ring { margin-left: -10px; }
.f-stories .u-ring img { width: 44px; height: 44px; }
.f-stories b { font-size: 14px; }

.f-room { right: -7%; top: 6%; width: 218px; display: grid; gap: 8px; }
.f-room .f-top { display: flex; align-items: center; gap: 8px; }
.f-room > b { font: 700 17px/1.15 var(--u-display); }
.f-speakers { display: flex; align-items: center; gap: 6px; }
.spk { position: relative; }
.spk img { width: 38px; height: 38px; }
.spk.on img { box-shadow: 0 0 0 2.5px var(--u-card), 0 0 0 4.5px var(--u-sky); }
.spk .u-bars { position: absolute; right: -5px; bottom: -3px; height: 14px; padding: 2px 3px; border-radius: 6px; background: var(--u-sky); color: var(--u-on-sky); }
.spk .u-bars i { width: 2px; }
.f-more { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--u-mist); font-size: 12.5px; font-weight: 700; color: var(--u-muted); }
.f-room small { color: var(--u-muted); font-size: 13px; }

.f-cross { right: -9%; bottom: 9%; width: 284px; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; }
.f-map { position: relative; width: 84px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--u-map-bg); flex: none; }
.f-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.f-map .road { fill: none; stroke: var(--u-map-road); stroke-width: 7; stroke-linecap: round; }
.f-map .road.thin { stroke-width: 4; }
.f-map .trail { fill: none; stroke: var(--u-sky); stroke-width: 3.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.f-map .me { fill: var(--u-sky); stroke: var(--u-card); stroke-width: 2.5; }
.f-map .them { fill: var(--u-ink); stroke: var(--u-card); stroke-width: 2.5; }
.f-cross-text { display: grid; gap: 1px; min-width: 0; }
.f-cross-text b { font-size: 15px; line-height: 1.25; }
.f-cross-text small { font-size: 12.5px; color: var(--u-muted); }
.f-like { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--u-like-bg); color: var(--u-live); flex: none; }
.f-like svg { width: 18px; height: 18px; }

.f-chat { right: 2%; bottom: 24%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 12px; }
.bubble { padding: 9px 14px; border-radius: 18px; font-size: 15px; line-height: 1.3; white-space: nowrap; flex: none; }
.bubble.me { background: var(--u-sky); color: var(--u-on-sky); border-bottom-right-radius: 6px; font-weight: 500; }
.bubble.them { align-self: flex-start; background: var(--u-mist); border-bottom-left-radius: 6px; padding: 12px 14px; }

.hearts { position: absolute; left: 58%; bottom: 18%; width: 1px; height: 1px; z-index: 3; pointer-events: none; }
.hearts span { position: absolute; left: 0; bottom: 0; font-size: 22px; animation: rise 2.4s var(--u-ease) forwards; }
@keyframes rise {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  12% { opacity: 1; transform: translate(0, -18px) scale(1); }
  100% { transform: translate(var(--dx, 20px), -220px) scale(.9); opacity: 0; }
}

/* ── Feature rail: one card per feature, each a working piece of it ───── */
.rail { margin-top: 10px; padding: 18px 0 64px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.rail::-webkit-scrollbar { display: none; }
.rail.drag { cursor: grabbing; }
.rail-track { display: flex; gap: 16px; width: max-content; padding: 0 var(--u-gutter); }
.fc {
  --fg: var(--u-ink); --fg-2: var(--u-muted);
  position: relative; flex: none; width: 236px; height: 300px; padding: 18px; border-radius: 28px;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate;
  text-decoration: none; color: var(--fg); background: var(--u-card);
  box-shadow: inset 0 0 0 1px var(--u-line), var(--u-shadow-1);
  transition: transform .45s var(--u-spring), box-shadow .45s var(--u-ease);
  -webkit-user-drag: none; user-select: none;
}
.fc:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--u-line), var(--u-shadow-3); }
.fc img { -webkit-user-drag: none; }
.fc-cap { display: grid; gap: 2px; position: relative; z-index: 2; }
.fc-cap b { font: 700 21px/1.1 var(--u-display); letter-spacing: -.015em; }
.fc-cap > span { font-size: 14px; color: var(--fg-2); line-height: 1.35; }
.fc-art { position: relative; z-index: 1; }
.fc.sky { --fg: #11110F; --fg-2: rgb(17 17 15 / .68); background: var(--u-sky); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), var(--u-shadow-1); }
.fc.soft { background: var(--u-sky-soft); box-shadow: var(--u-shadow-1); }
.fc.night { --fg: #F4F4F2; --fg-2: #9C9CA3; background: #111114; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), var(--u-shadow-1); }
.fc.gold { --fg: #EFE8DA; --fg-2: #A39A8A; background: radial-gradient(90% 60% at 100% 0%, rgb(205 166 91 / .3), transparent 70%), #0C0A07; box-shadow: inset 0 0 0 1px rgb(205 166 91 / .28), var(--u-shadow-1); }
.fc.gold .fc-cap b { color: transparent; background: linear-gradient(100deg, #FFE9B5, #CDA65B 60%, #A57D3F); -webkit-background-clip: text; background-clip: text; }
.fc.photo { --fg: #fff; --fg-2: rgb(255 255 255 / .82); background: #111; }
.fc.photo .fc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 1.2s var(--u-ease); }
.fc.photo:hover .fc-bg { transform: scale(1.06); }
.fc.photo::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(0 0 0 / .35), transparent 30%, transparent 55%, rgb(0 0 0 / .7)); }

/* Stories */
.art-stories .rings { display: flex; gap: 6px; }
.art-stories .rings > span { position: relative; }
.art-stories .rings img { width: 46px; height: 46px; }
.art-stories .mine img { border: 2.5px solid var(--u-card); box-shadow: 0 0 0 1.5px var(--u-line-2); }
.art-stories .mine i { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--u-solar); color: #11110F; border: 2px solid var(--u-card); font: 700 13px/14px var(--u-body); text-align: center; font-style: normal; }
.mini-reply { margin-top: 18px; display: flex; align-items: center; gap: 8px; }
.mini-reply span { flex: 1; height: 36px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--u-line-2); display: flex; align-items: center; padding: 0 14px; font-size: 13px; color: var(--u-faint); }
.mini-reply b { font-size: 20px; animation: beat 2.4s ease-in-out infinite; }
@keyframes beat { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.25); } 90% { transform: scale(.95); } }
/* Chat bubbles shared by Chats and Umi */
.fc .b { margin: 0 0 7px; padding: 8px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.35; width: fit-content; max-width: 92%; }
.fc .b.them { background: rgb(255 255 255 / .92); color: #11110F; border-bottom-left-radius: 5px; }
.fc .b.me { background: #11110F; color: #fff; margin-left: auto; border-bottom-right-radius: 5px; }
.fc .b.t { padding: 10px 12px; }
.fc.soft .b.them { background: var(--u-card); color: var(--u-ink); }
.fc.soft .b.me { background: var(--u-sky); color: #11110F; }
/* Spaces */
.art-room { display: grid; gap: 10px; justify-items: start; }
.art-room .room-t { font: 700 18px/1.15 var(--u-display); }
.room-spk { display: flex; gap: 8px; }
.room-spk span { position: relative; }
.room-spk img { width: 44px; height: 44px; }
.room-spk .on img { box-shadow: 0 0 0 2.5px #111114, 0 0 0 4.5px var(--u-sky); animation: talk2 1.2s ease-in-out infinite; }
@keyframes talk2 { 50% { box-shadow: 0 0 0 2.5px #111114, 0 0 0 7px rgb(0 191 255 / .5); } }
.room-spk .u-bars { position: absolute; right: -4px; bottom: -2px; height: 13px; padding: 2px 3px; border-radius: 6px; background: var(--u-sky); color: #11110F; }
.room-spk .u-bars i { width: 2px; }
.art-room small { color: #9C9CA3; font-size: 13px; }
/* Live */
.live-top { display: flex; justify-content: space-between; align-items: center; }
.eye { height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; background: rgb(0 0 0 / .4); color: #fff; font-size: 12px; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.live-cmts { margin-top: 112px; display: grid; gap: 6px; justify-items: start; }
.live-cmts p { margin: 0; padding: 5px 10px; border-radius: 12px; background: rgb(0 0 0 / .38); color: #fff; font-size: 12.5px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Map */
.art-map { height: 150px; border-radius: 18px; overflow: hidden; }
.art-map .mapimg { width: 100%; height: 100%; object-fit: cover; }
.art-map .mb { fill: var(--u-map-bg); }
.art-map .water { fill: var(--u-map-water); }
.art-map .road path { fill: none; stroke: var(--u-map-road); stroke-width: 9; stroke-linecap: round; }
.art-map .road.thin path { stroke-width: 4; }
.mp, .mdot { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; }
.mp img { width: 34px; height: 34px; border: 2.5px solid #fff; box-shadow: 0 4px 10px rgb(0 0 0 / .2); }
.mdot { width: 14px; height: 14px; border-radius: 50%; background: var(--u-sky); border: 3px solid #fff; box-shadow: 0 0 0 6px rgb(0 191 255 / .2); animation: mping 2s ease-in-out infinite; }
@keyframes mping { 50% { box-shadow: 0 0 0 11px rgb(0 191 255 / .08); } }
/* Crossed Paths */
.art-cross { height: 150px; }
.art-cross svg { width: 100%; height: 120px; overflow: visible; }
.art-cross .trail { fill: none; stroke: var(--u-sky-ink); stroke-width: 3; stroke-dasharray: 3 7; stroke-linecap: round; animation: march 1.4s linear infinite; }
@keyframes march { to { stroke-dashoffset: -20; } }
.art-cross .you { fill: var(--u-sky); stroke: var(--u-card); stroke-width: 4; }
.art-cross .them { position: absolute; right: 8px; top: 2px; width: 46px; height: 46px; border: 3px solid var(--u-card); box-shadow: 0 0 0 2.5px var(--u-sky); }
.art-cross .dist { position: absolute; left: 80px; top: 52px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--u-card); box-shadow: var(--u-shadow-1); }
.art-cross .heart { position: absolute; right: 2px; bottom: 6px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--u-live); color: #fff; font-size: 16px; animation: beat 2.4s ease-in-out infinite; }
/* Calls */
.art-call { display: grid; justify-items: center; text-align: center; gap: 2px; padding-top: 4px; }
.art-call .big { width: 76px; height: 76px; margin-bottom: 8px; box-shadow: 0 0 0 3px #111114, 0 0 0 6px rgb(0 191 255 / .5); }
.art-call b { font-size: 16px; }
.art-call small { color: #9C9CA3; font-size: 12.5px; }
.call-btns { display: flex; gap: 12px; margin-top: 14px; }
.call-btns i { width: 36px; height: 36px; border-radius: 50%; background: rgb(255 255 255 / .12); }
.call-btns i.end { background: var(--u-live); }
/* Shops */
.art-shop img { width: 100%; height: 96px; object-fit: cover; border-radius: 16px; }
.shop-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; }
.shop-row span { display: grid; line-height: 1.2; }
.shop-row b { font-size: 14px; }
.shop-row small { font-size: 12px; color: var(--u-muted); }
.shop-row em { font: 700 18px/1 var(--u-display); font-style: normal; }
.bag { display: inline-flex; margin-top: 10px; height: 30px; padding: 0 14px; align-items: center; border-radius: 999px; background: var(--u-ink); color: var(--u-paper); font-size: 12.5px; font-weight: 600; }
/* Reels */
.art-reel { height: 100%; display: grid; align-content: start; }
.art-reel .play { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); margin: 70px auto 0; }
.art-reel .play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.reel-bar { margin-top: 56px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .35); overflow: hidden; }
.reel-bar i { display: block; height: 100%; width: 24%; background: #fff; animation: reelfill 8s linear infinite; }
@keyframes reelfill { from { width: 4%; } to { width: 100%; } }
.art-reel small { color: rgb(255 255 255 / .8); font-size: 12px; margin-top: 6px; }
/* Games */
.c4 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; padding: 10px; border-radius: 18px; background: #11110F; width: 100%; }
.c4 i { aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .1); }
.c4 i.w { background: #fff; }
.c4 i.k { background: var(--u-solar); }
.c4 i.drop { background: #fff; animation: drop 2.6s var(--u-ease) infinite; }
@keyframes drop { 0%, 15% { transform: translateY(-160px); opacity: 0; } 45% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(-8px); } 65%, 100% { transform: translateY(0); } }
/* Communities */
.art-comm { display: grid; gap: 6px; justify-items: start; }
.art-comm .faces { display: flex; align-items: center; margin-bottom: 6px; }
.art-comm .faces img { width: 36px; height: 36px; border: 2.5px solid var(--u-card); }
.art-comm .faces img + img { margin-left: -10px; }
.art-comm .faces span { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--u-muted); }
.art-comm b { font: 700 17px/1.15 var(--u-display); }
.art-comm small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--u-muted); }
.art-comm small i { width: 7px; height: 7px; border-radius: 50%; background: var(--u-live); animation: u-blink 1.6s infinite; }
.art-comm .join { margin-top: 8px; height: 30px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--u-ink); font-size: 12.5px; font-weight: 700; }
/* Nikah */
.art-nikah { display: flex; flex-wrap: wrap; gap: 7px; }
.nk-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #EFE8DA; background: rgb(205 166 91 / .12); box-shadow: inset 0 0 0 1px rgb(205 166 91 / .35); }
.nk-chip svg { width: 15px; height: 15px; fill: none; stroke: var(--u-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nk-btn { margin-top: 10px; height: 34px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; background: linear-gradient(100deg, #FFE9B5, #CDA65B); color: #1A1408; font-size: 13px; font-weight: 700; }
/* Marketplace */
.art-market { display: grid; gap: 4px; justify-items: start; }
.art-market .area { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-sky-ink); }
.art-market .price { font: 800 40px/1 var(--u-display); letter-spacing: -.03em; margin-top: 4px; }
.art-market .item { font-size: 14px; color: var(--u-muted); }
.art-market .msg-btn { margin-top: 12px; height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--u-mist); font-size: 12.5px; font-weight: 600; }


/* ── Moments ──────────────────────────────────────────────────────────── */
.moments { padding: clamp(80px, 10vw, 130px) 0 40px; }
.moments-head { display: grid; gap: 18px; }
.reel { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 46px 0 70px; -webkit-overflow-scrolling: touch; cursor: grab; }
.reel::-webkit-scrollbar { display: none; }
.reel.drag { cursor: grabbing; }
.reel-track { display: flex; gap: 18px; width: max-content; padding: 0 var(--u-gutter) 0 max(var(--u-gutter), calc((100vw - var(--u-maxw)) / 2 + var(--u-gutter))); }
.tile {
  position: relative; width: 224px; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 24px; overflow: hidden; cursor: pointer;
  background: var(--u-mist-2); box-shadow: var(--u-shadow-2); flex: none;
  transform: translateY(calc(var(--odd, 0) * 28px)) rotate(calc(var(--odd, 0) * 1deg - .5deg));
  transition: transform .5s var(--u-ease), box-shadow .5s var(--u-ease);
}
.tile:nth-child(even) { --odd: 1; }
.tile:hover { transform: translateY(calc(var(--odd, 0) * 28px - 8px)) rotate(0deg) scale(1.02); box-shadow: var(--u-shadow-3); }
.tile > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--u-ease); }
.tile:hover > img { transform: scale(1.05); }
.tile::before { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; height: 3px; border-radius: 3px; z-index: 2; background: linear-gradient(90deg, #fff 0 46%, rgb(255 255 255 / .4) 46% 52%, rgb(255 255 255 / .4) 52%); background-size: 100% 100%; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .38), transparent 26%, transparent 70%, rgb(0 0 0 / .25)); pointer-events: none; }
.tile-who { position: absolute; left: 12px; top: 22px; z-index: 2; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; font-weight: 600; text-shadow: 0 1px 6px rgb(0 0 0 / .35); }
.tile-who img { width: 30px; height: 30px; border: 2px solid #fff; }
.tile-who small { font-weight: 400; opacity: .8; }

/* ── Story viewer ─────────────────────────────────────────────────────── */
.viewer { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; }
.viewer[hidden] { display: none; }
.viewer-scrim { position: absolute; inset: 0; background: rgb(8 8 10 / .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.viewer-card {
  position: relative; height: min(88svh, 780px); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #000;
  box-shadow: 0 40px 120px rgb(0 0 0 / .6); animation: pop .4s var(--u-spring);
}
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.viewer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewer-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .45), transparent 22%, transparent 66%, rgb(0 0 0 / .55)); pointer-events: none; }
.viewer-bars { position: absolute; z-index: 3; left: 12px; right: 12px; top: 12px; display: flex; gap: 4px; }
.viewer-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .35); overflow: hidden; }
.viewer-bars span i { display: block; height: 100%; width: 0; background: #fff; }
.viewer-bars span.done i { width: 100%; }
.viewer-bars span.run i { animation: fill var(--dur, 5s) linear forwards; }
.viewer.paused .viewer-bars span.run i { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }
.viewer-head { position: absolute; z-index: 3; left: 14px; right: 8px; top: 26px; display: flex; align-items: center; gap: 10px; color: #fff; }
.viewer-head img { width: 36px; height: 36px; border: 2px solid #fff; }
.viewer-head b { font-size: 15px; }
.viewer-head small { opacity: .75; font-size: 13px; }
.viewer-x { margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.viewer-x svg { width: 22px; height: 22px; }
.viewer-cap { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 84px; margin: 0; color: #fff; font-size: 18px; line-height: 1.35; font-weight: 500; text-shadow: 0 1px 10px rgb(0 0 0 / .4); }
.viewer-tap { position: absolute; z-index: 2; top: 80px; bottom: 80px; border: 0; background: transparent; cursor: pointer; }
.viewer-tap.prev { left: 0; width: 32%; }
.viewer-tap.next { right: 0; width: 68%; }
.viewer-reply { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 16px; display: flex; gap: 10px; align-items: center; }
.viewer-input { flex: 1; height: 46px; border-radius: 999px; border: 1.5px solid rgb(255 255 255 / .55); color: rgb(255 255 255 / .8); display: flex; align-items: center; padding: 0 18px; font-size: 15px; }
.viewer-reacts { display: flex; gap: 2px; }
.viewer-reacts button { width: 42px; height: 42px; border: 0; background: transparent; font-size: 24px; cursor: pointer; border-radius: 50%; transition: transform .2s var(--u-spring); }
.viewer-reacts button:active { transform: scale(1.3); }
.viewer-burst { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.viewer-burst span { position: absolute; bottom: 70px; font-size: 34px; animation: burst 1.5s var(--u-ease) forwards; }
@keyframes burst { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: 1; transform: translateY(-30px) scale(1.15); } 100% { transform: translate(var(--dx, 0), -380px) scale(.9) rotate(var(--rot, 0deg)); opacity: 0; } }

/* ── Features ─────────────────────────────────────────────────────────── */
.features { background: var(--u-mist); padding: clamp(80px, 10vw, 130px) 0 clamp(60px, 8vw, 110px); }
.chapters { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 80px; margin-top: 30px; }
.chapter { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; max-width: 540px; opacity: .3; transition: opacity .6s var(--u-ease); }
.chapter.on { opacity: 1; }
.chapter-n { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--u-sky-ink); }
.chapter .u-h3 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -.025em; margin: 14px 0 16px; }
.chapter p { margin: 0; color: var(--u-muted); font-size: 18px; }
.chapter-shot { display: none; }
.chapter-phone { position: sticky; top: calc(50vh - 330px); height: 660px; display: flex; align-items: center; justify-content: center; gap: 26px; }
.chapter-phone .u-phone { width: 304px; }
.chapter-phone .slot { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--u-ease), transform 1s var(--u-ease); }
.chapter-phone .slot.on { opacity: 1; transform: none; }
.chapter-phone .slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.chapter-dots { display: grid; gap: 8px; }
.chapter-dots i { width: 6px; height: 6px; border-radius: 6px; background: var(--u-line-2); transition: height .4s var(--u-ease), background .4s; }
.chapter-dots i.on { height: 26px; background: var(--u-ink); }

.gadget { margin-top: 26px; }
.react { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; position: relative; }
.react button { height: 42px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--u-card); box-shadow: var(--u-shadow-1), inset 0 0 0 1px var(--u-line); cursor: pointer; font-size: 17px; display: inline-flex; align-items: center; gap: 6px; transition: transform .2s var(--u-spring); position: relative; }
.react button b { font-size: 14px; font-weight: 600; color: var(--u-ink-2); font-variant-numeric: tabular-nums; }
.react button:active { transform: scale(1.12); }
.react button.mine { box-shadow: var(--u-shadow-1), inset 0 0 0 1.5px var(--u-ink); }
.react .pop { position: absolute; left: 50%; top: 0; font-size: 26px; pointer-events: none; animation: pop-up 1s var(--u-ease) forwards; }
@keyframes pop-up { from { transform: translate(-50%, 0) scale(.6); opacity: 1; } to { transform: translate(calc(-50% + var(--dx, 0px)), -90px) scale(1.2); opacity: 0; } }
.gadget-hint { font-size: 13px; color: var(--u-faint); margin-left: 4px; }

.voice { display: flex; align-items: center; gap: 12px; width: min(100%, 380px); padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--u-card); box-shadow: var(--u-shadow-1), inset 0 0 0 1px var(--u-line); }
.vn-play { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--u-sky); color: var(--u-on-sky); display: grid; place-items: center; cursor: pointer; flex: none; }
.vn-play svg { width: 18px; height: 18px; }
.vn-play .s, .voice.playing .vn-play .p { display: none; }
.voice.playing .vn-play .s { display: block; }
.vn-wave { flex: 1; height: 30px; display: flex; align-items: center; gap: 2.5px; }
.vn-wave i { flex: 1; border-radius: 3px; background: var(--u-line-2); transition: background .15s; }
.vn-wave i.p { background: var(--u-ink); }
.vn-time { font-size: 13.5px; color: var(--u-muted); font-variant-numeric: tabular-nums; min-width: 32px; }

.spaces { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sp-people { display: flex; gap: 14px; }
.sp { display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--u-muted); position: relative; }
.sp i { font-style: normal; }
.sp img { width: 48px; height: 48px; }
.sp.on img { box-shadow: 0 0 0 2.5px var(--u-mist), 0 0 0 5px var(--u-sky); animation: talk 1.2s ease-in-out infinite; }
@keyframes talk { 50% { box-shadow: 0 0 0 2.5px var(--u-mist), 0 0 0 8px rgb(0 191 255 / .45); } }
.sp.you { animation: pop .4s var(--u-spring); }
.you-dot { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--u-ink); color: var(--u-paper); font-size: 13px; font-weight: 700; position: relative; }
.you-dot::after { content: "✋"; position: absolute; right: -8px; top: -8px; font-size: 18px; }
#raise.on { background: var(--u-ink); color: var(--u-paper); box-shadow: none; }

.golive { display: flex; align-items: center; gap: 16px; }
#goLiveBtn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--u-live); }
#goLiveBtn.live { background: var(--u-live); color: #fff; }
#goLiveBtn.live .dot { background: #fff; animation: u-blink 1.2s infinite; }
.gl-viewers { font-size: 15px; color: var(--u-muted); }
.gl-viewers b { color: var(--u-ink); font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--u-card); box-shadow: inset 0 0 0 1px var(--u-line-2); cursor: pointer; font-size: 15px; font-weight: 500; transition: background .2s, color .2s, box-shadow .2s; }
.chips button[aria-pressed="true"] { background: var(--u-ink); color: var(--u-paper); box-shadow: none; }
.chips-out { margin-top: 14px !important; font-size: 15px !important; min-height: 1.6em; }

/* ── Map ──────────────────────────────────────────────────────────────── */
.map { padding: clamp(80px, 10vw, 130px) 0; }
.map-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.map-copy { display: grid; gap: 18px; justify-items: start; }
.map-tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--u-mist); margin-top: 8px; }
.map-tabs button { height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--u-muted); transition: background .25s, color .25s, box-shadow .25s; }
.map-tabs button[aria-selected="true"] { background: var(--u-card); color: var(--u-ink); box-shadow: var(--u-shadow-1); }
.map-note { margin: 0; font-size: 15px; color: var(--u-muted); min-height: 1.6em; }
.cp { margin-top: 10px; padding: 20px 20px 20px 22px; border-radius: 22px; background: var(--u-sky-soft); display: flex; align-items: center; gap: 20px; }
.cp b { font: 700 20px/1.1 var(--u-display); }
.cp p { margin: 6px 0 0; font-size: 15px; color: var(--u-ink-2); line-height: 1.5; }
.cp .u-btn { flex: none; }

.map-board { position: relative; aspect-ratio: 640 / 560; border-radius: 34px; overflow: hidden; background: var(--u-map-bg); box-shadow: var(--u-shadow-3), inset 0 0 0 1px var(--u-line); }
.map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-walk { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-walk .walk { fill: none; stroke: var(--u-sky); stroke-width: 7; stroke-dasharray: 2 16; stroke-linecap: round; opacity: 0; transition: opacity .4s; filter: drop-shadow(0 0 6px rgb(0 191 255 / .6)); }
.map-board.walking .map-walk .walk { opacity: 1; }
.map-credit { position: absolute; right: 10px; bottom: 8px; z-index: 1; font-size: 10px; line-height: 1.4; padding: 2px 7px; border-radius: 6px; color: rgb(17 17 15 / .55); background: rgb(255 255 255 / .6); }
:root[data-theme="moon"] .map-credit { color: rgb(255 255 255 / .55); background: rgb(0 0 0 / .4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="solar"]) .map-credit { color: rgb(255 255 255 / .55); background: rgb(0 0 0 / .4); } }
.map-svg .water { fill: var(--u-map-water); }
.map-svg .mb { fill: var(--u-map-bg); }
.map-svg .mk { fill: var(--u-map-block); }
.map-svg .park { fill: var(--u-map-park); }
.map-svg .roads path { fill: none; stroke: var(--u-map-road); stroke-width: 12; stroke-linecap: round; }
.map-svg .roads.thin path { stroke-width: 5.5; }
.map-svg .labels text { font: 700 11px var(--u-body); letter-spacing: .18em; fill: var(--u-map-label); }
.map-svg .walk { fill: none; stroke: var(--u-sky); stroke-width: 4; stroke-dasharray: 2 10; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.map-board.walking .map-svg .walk { opacity: 1; }
.layer { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--u-ease); pointer-events: none; }
.map-board[data-layer="friends"] .layer-friends,
.map-board[data-layer="nearby"] .layer-nearby,
.map-board[data-layer="explore"] .layer-explore { opacity: 1; }
.pin, .blob, .mstory, .m-me, .m-ghost { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; }
.pin { display: grid; justify-items: center; gap: 6px; transition: transform .5s var(--u-spring); }
.layer-friends .pin { transform: scale(.6); }
.map-board[data-layer="friends"] .pin { transform: none; }
.pin img { width: 46px; height: 46px; border: 3px solid #fff; box-shadow: 0 6px 16px rgb(0 0 0 / .18); }
.pin em, .mstory em, .blob em { font-style: normal; font-size: 12px; font-weight: 600; background: var(--u-card); padding: 4px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgb(0 0 0 / .1); white-space: nowrap; }
.blob { width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgb(0 191 255 / .38), rgb(0 191 255 / .12) 55%, transparent 72%); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); } }
.mstory { display: grid; justify-items: center; gap: 6px; }
.mstory img { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; border: 3px solid #fff; outline: 2.5px solid var(--u-sky); box-shadow: 0 8px 20px rgb(0 0 0 / .18); }
.m-me { width: 20px; height: 20px; border-radius: 50%; background: var(--u-sky); border: 3.5px solid #fff; box-shadow: 0 2px 10px rgb(0 0 0 / .2); z-index: 3; }
.m-me i { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--u-sky); animation: ping 2s var(--u-ease) infinite; }
@keyframes ping { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.m-ghost { z-index: 2; opacity: 0; transform: scale(.3); transition: opacity .4s, transform .5s var(--u-spring); }
.m-ghost img { width: 40px; height: 40px; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--u-sky), 0 6px 16px rgb(0 0 0 / .2); }
.map-board.met .m-ghost { opacity: 1; transform: none; }
.cp-toast { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px; animation: toast .5s var(--u-spring); }
.cp-toast[hidden] { display: none; }
@keyframes toast { from { transform: translateY(30px); opacity: 0; } }
.cp-toast > div { display: grid; gap: 2px; min-width: 0; }
.cp-toast b { font-size: 16px; }
.cp-toast small { font-size: 13.5px; color: var(--u-muted); line-height: 1.35; }
.cp-like { margin-left: auto; width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--u-like-bg); color: var(--u-live); cursor: pointer; transition: transform .3s var(--u-spring), background .3s, color .3s; }
.cp-like svg { width: 22px; height: 22px; }
.cp-like.on { background: var(--u-live); color: #fff; transform: scale(1.1); }

/* ── Nikah ────────────────────────────────────────────────────────────── */
.nikah { background: #0C0A07; color: #EFE8DA; padding: clamp(90px, 11vw, 150px) 0; overflow: hidden; isolation: isolate; }
.nikah-glow { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(40% 50% at 78% 50%, rgb(205 166 91 / .22), transparent 70%),
  radial-gradient(30% 40% at 10% 10%, rgb(255 233 181 / .07), transparent 70%); }
.nikah-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 60px; align-items: center; }
.nikah .u-h2 { color: #FBF6EC; }
.gold-text { background: linear-gradient(100deg, #FFE9B5 0%, #E2C27F 35%, #CDA65B 60%, #A57D3F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.u-eyebrow.gold { color: var(--u-gold); }
.nikah .u-lede { color: #B8AE9C; margin-top: 22px; }
.nikah-copy .u-h2 { margin-top: 18px; }
.nikah-list { list-style: none; padding: 0; margin: 42px 0 0; display: grid; gap: 24px; }
.nikah-list li { display: flex; gap: 16px; align-items: flex-start; }
.nikah-list .ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--u-gold); background: rgb(205 166 91 / .1); box-shadow: inset 0 0 0 1px rgb(205 166 91 / .35); }
.nikah-list .ic svg { width: 22px; height: 22px; }
.nikah-list b { font: 700 20px/1.2 var(--u-display); color: #FBF6EC; }
.nikah-list p { margin: 4px 0 0; color: #A39A8A; font-size: 16px; line-height: 1.55; }
.nikah-visual { position: relative; display: grid; place-items: center; }
.nikah-visual .u-phone { width: 300px; }
.nikah-visual .u-phone::before { box-shadow: 0 40px 120px rgb(205 166 91 / .24), 0 20px 50px rgb(0 0 0 / .6); }
.ghotok-tip { position: absolute; left: max(-20px, calc(50% - 300px)); bottom: 9%; width: 268px; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 10px; background: rgb(28 24 18 / .88) !important; box-shadow: inset 0 0 0 1px rgb(205 166 91 / .28), 0 20px 50px rgb(0 0 0 / .5) !important; }
.nikah-note { position: absolute; bottom: -34px; left: 0; right: 0; margin: 0; text-align: center; font-size: 12.5px; color: #7D7466; letter-spacing: .02em; }
.ghotok-tip img { width: 52px; height: auto; flex: none; }
.ghotok-tip p { margin: 0; font-size: 13.5px; line-height: 1.4; color: #D9D0BF; }
.ghotok-tip b { display: block; color: var(--u-gold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }

/* ── Create (bento) ───────────────────────────────────────────────────── */
.create { padding: clamp(80px, 10vw, 130px) 0; }
.bento { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-auto-rows: minmax(180px, auto); gap: 18px; margin-top: 56px; }
.b-live { grid-column: 1 / 6; grid-row: 1 / 4; position: relative; margin: 0; border-radius: 30px; overflow: hidden; background: #111; min-height: 560px; }
.b-live video, .b-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-live::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .35), transparent 25%, transparent 55%, rgb(0 0 0 / .6)); pointer-events: none; }
.b-live figcaption { position: absolute; z-index: 2; left: 18px; right: 18px; top: 18px; display: flex; justify-content: space-between; align-items: center; }
.b-viewers { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: rgb(0 0 0 / .4); color: #fff; font-size: 13px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.b-viewers svg { width: 15px; height: 15px; }
.b-comments { position: absolute; z-index: 2; left: 18px; bottom: 18px; display: grid; gap: 8px; justify-items: start; }
.b-comments p { margin: 0; padding: 7px 12px; border-radius: 14px; background: rgb(0 0 0 / .38); color: #fff; font-size: 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(10px); }
.b-live.in .b-comments p { animation: cmt .6s var(--u-ease) forwards; }
.b-live.in .b-comments p:nth-child(2) { animation-delay: 1.2s; }
.b-live.in .b-comments p:nth-child(3) { animation-delay: 2.4s; }
@keyframes cmt { to { opacity: 1; transform: none; } }
.b-comments b { margin-right: 6px; }
.b-card { position: relative; border-radius: 30px; padding: 28px; background: var(--u-mist); overflow: hidden; }
.b-card .u-h3 { margin: 18px 0 8px; }
.b-card p { margin: 0; color: var(--u-muted); font-size: 16px; }
.b-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--u-card); display: grid; place-items: center; box-shadow: var(--u-shadow-1); }
.b-ic svg { width: 22px; height: 22px; }
.b-shop { grid-column: 6 / 11; grid-row: 1 / 2; }
.b-reel { grid-column: 6 / 8; grid-row: 2 / 4; padding: 0; background: #111; min-height: 360px; }
.b-reel .rv { position: absolute; inset: 0; transform: translateY(100%); transition: transform .8s var(--u-ease); }
.b-reel .rv.on { transform: none; }
.b-reel .rv.out { transform: translateY(-100%); }
.b-reel .rv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-who { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; color: #fff; font-size: 13.5px; text-shadow: 0 1px 8px rgb(0 0 0 / .4); }
.rv-who span { grid-column: 1 / -1; margin-top: 4px; }
.b-reel .b-reel-cap { top: 16px; bottom: auto; }
.b-reel .b-reel-cap span { display: none; }
.b-reel::after { background: linear-gradient(180deg, rgb(0 0 0 / .55), transparent 32%, transparent 58%, rgb(0 0 0 / .7)) !important; }
.rv-who img { width: 28px; height: 28px; border: 2px solid #fff; }
.rv-who span { opacity: .85; }
.b-reel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / .65)); }
.b-reel-cap { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 16px; color: #fff; display: grid; gap: 2px; }
.b-reel-cap b { font: 700 20px/1.1 var(--u-display); }
.b-reel-cap span { font-size: 14px; opacity: .85; }
.b-comm { grid-column: 8 / 11; grid-row: 2 / 3; }
.b-market { grid-column: 8 / 11; grid-row: 3 / 4; }
.b-shop { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 22px; padding-bottom: 0; }
.b-shop-copy { padding-bottom: 28px; }
.b-shop-shot { align-self: end; height: 250px; border-radius: 24px 24px 0 0; overflow: hidden; background: var(--u-card); box-shadow: 0 -2px 0 6px var(--u-card), var(--u-shadow-2); }
.b-shop-shot img { width: 100%; height: auto; }
.shop-item { margin-top: 20px; display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 18px; background: #fff; box-shadow: var(--u-shadow-1); }
.shop-item img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.shop-item div { display: grid; min-width: 0; }
.shop-item b { font-size: 15.5px; line-height: 1.3; }
.shop-item small { color: var(--u-muted); font-size: 13px; }
.shop-item .price { margin-left: auto; font: 700 20px/1 var(--u-display); }
.pay-row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.pay-row span { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--u-card); box-shadow: inset 0 0 0 1px var(--u-line); }

/* ── Umi ──────────────────────────────────────────────────────────────── */
.umi { background: var(--u-mist); padding: clamp(80px, 10vw, 130px) 0; }
.umi-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.umi-copy { display: grid; gap: 18px; }
.umi-chat { padding: 16px; width: 100%; max-width: 500px; justify-self: end; background: var(--u-card) !important; }
.umi-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 14px; border-bottom: 1px solid var(--u-line); }
.umi-head img { width: 34px; height: auto; }
.umi-head div { display: grid; line-height: 1.15; }
.umi-head b { font-size: 16px; }
.umi-head small { font-size: 12.5px; color: var(--u-faint); }
.umi-ex { margin-left: auto; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--u-faint); padding: 4px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--u-line); }
.umi-log { min-height: 250px; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 4px; scrollbar-width: thin; }
.msg { max-width: 84%; padding: 10px 14px; border-radius: 18px; font-size: 15.5px; line-height: 1.45; animation: msg .35s var(--u-ease); }
@keyframes msg { from { opacity: 0; transform: translateY(8px); } }
.msg.them { background: var(--u-mist); align-self: flex-start; border-bottom-left-radius: 6px; }
.msg.me { background: var(--u-sky); color: var(--u-on-sky); align-self: flex-end; border-bottom-right-radius: 6px; }
.umi-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.umi-chips button { padding: 9px 14px; border-radius: 999px; border: 0; background: var(--u-card); box-shadow: inset 0 0 0 1px var(--u-line-2); cursor: pointer; font-size: 14.5px; line-height: 1.3; text-align: left; transition: box-shadow .2s; }
.umi-chips button:hover { box-shadow: inset 0 0 0 1.5px var(--u-ink); }
.umi-chips button:disabled { opacity: .45; cursor: default; box-shadow: inset 0 0 0 1px var(--u-line-2); }

/* ── Safety ───────────────────────────────────────────────────────────── */
.safety { padding: clamp(80px, 10vw, 130px) 0; }
.safe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.safe, .safe > a { display: block; border-radius: 26px; }
.safe { padding: 28px; background: var(--u-mist); transition: transform .4s var(--u-ease), box-shadow .4s; }
.safe > a { margin: -28px; padding: 28px; text-decoration: none; }
.safe:has(a):hover { transform: translateY(-3px); box-shadow: var(--u-shadow-2); }
.safe .ic { width: 48px; height: 48px; border-radius: 50%; background: var(--u-card); display: grid; place-items: center; box-shadow: var(--u-shadow-1); margin-bottom: 18px; }
.safe .ic svg { width: 23px; height: 23px; }
.safe b { display: block; font: 700 20px/1.2 var(--u-display); margin-bottom: 6px; }
.safe p { margin: 0; color: var(--u-muted); font-size: 15.5px; }

/* ── Vision ───────────────────────────────────────────────────────────── */
.vision { padding: clamp(60px, 8vw, 110px) 0 clamp(80px, 10vw, 130px); }
.vision-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 70px; align-items: center; }
.vision-copy { display: grid; gap: 18px; }
.goals { list-style: none; counter-reset: g; padding: 0; margin: 18px 0 0; display: grid; gap: 18px; }
.goals li { counter-increment: g; position: relative; padding-left: 50px; font-size: 17px; color: var(--u-muted); line-height: 1.55; }
.goals li::before { content: counter(g); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--u-ink); color: var(--u-paper); display: grid; place-items: center; font: 700 15px/1 var(--u-display); }
.goals b { color: var(--u-ink); }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(12, 46px); gap: 14px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; box-shadow: var(--u-shadow-1); }
.m1 { grid-column: 1; grid-row: 1 / 6; }
.m2 { grid-column: 2; grid-row: 2 / 7; }
.m3 { grid-column: 1; grid-row: 6 / 9; }
.m4 { grid-column: 2; grid-row: 7 / 13; }
.m5 { grid-column: 1; grid-row: 9 / 13; object-position: 50% 30%; }

/* ── Premium ──────────────────────────────────────────────────────────── */
.premium { background: var(--u-mist); padding: clamp(80px, 10vw, 130px) 0; }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 940px; margin: 56px auto 0; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; padding: 34px; border-radius: 32px; background: var(--u-card); box-shadow: inset 0 0 0 1px var(--u-line), var(--u-shadow-1); }
.tier header h3 { margin: 0; font: 750 28px/1.1 var(--u-display); letter-spacing: -.02em; }
.tier header p { margin: 6px 0 0; color: var(--u-muted); font-size: 16px; }
.tier-price { margin-top: 26px; display: flex; align-items: baseline; gap: 10px; }
.tier-price b { font: 800 54px/1 var(--u-display); letter-spacing: -.03em; }
.tier-price span { color: var(--u-muted); font-size: 16px; }
.tier-alt { margin: 6px 0 0; font-size: 15px; color: var(--u-muted); }
.tier-alt b { color: var(--u-ink); }
.tier ul { list-style: none; padding: 0; margin: 26px 0 32px; display: grid; gap: 12px; }
.tier li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.tier li svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--u-sky-ink); }
.tier .u-btn { margin-top: auto; }
.tier.nk { background: #0C0A07; color: #EFE8DA; box-shadow: 0 30px 80px rgb(12 10 7 / .28); }
.tier.nk::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(70% 50% at 100% 0%, rgb(205 166 91 / .22), transparent 70%); pointer-events: none; }
.tier.nk header h3 { color: transparent; background: linear-gradient(100deg, #FFE9B5, #CDA65B 60%, #A57D3F); -webkit-background-clip: text; background-clip: text; }
.tier.nk header p, .tier.nk .tier-price span, .tier.nk .tier-alt { color: #A39A8A; }
.tier.nk .tier-alt b, .tier.nk .tier-price b { color: #FBF6EC; }
.tier.nk li svg { color: var(--u-gold); }
.tier.nk li.all { color: var(--u-gold-light); font-weight: 600; }
.tier-badge { position: absolute; right: 24px; top: 26px; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: #1A1408; background: linear-gradient(100deg, #FFE9B5, #E2C27F); }
/* Umego Premium stays white and calm; touched, it is lit like the hero:
   sun from above, sky from below. */
.tier.lit, .pp-tier.lit { isolation: isolate; overflow: hidden; }
.tier.lit::before, .pp-tier.lit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(75% 42% at 50% -6%, var(--u-glow-sun), transparent 72%), radial-gradient(85% 48% at 50% 108%, var(--u-glow-sky), transparent 72%);
  opacity: 0; transition: opacity .6s var(--u-ease);
}
.tier.lit { transition: transform .5s var(--u-ease), box-shadow .5s var(--u-ease); }
.tier.lit:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px rgb(0 191 255 / .4), 0 30px 70px rgb(0 140 210 / .16); }
.tier.lit:hover::before, .pp-tier.lit:hover::before, .pp-tier.lit[aria-checked="true"]::before { opacity: 1; }
.tiers-note { max-width: 640px; margin: 28px auto 0; text-align: center; font-size: 15px; color: var(--u-muted); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { padding: clamp(80px, 10vw, 130px) 0; }
.faq-in { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 60px; align-items: start; }
.faq-head { display: grid; gap: 16px; position: sticky; top: 40px; }
.faq-head a { color: var(--u-ink); font-weight: 600; }
.faq-list details { border-bottom: 1px solid var(--u-line); }
.faq-list details:first-child { border-top: 1px solid var(--u-line); }
.faq-list summary { list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative; font: 650 20px/1.3 var(--u-display); letter-spacing: -.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: var(--u-ink); transition: transform .35s var(--u-ease); }
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0deg); }
.faq-list details > div { padding: 0 44px 24px 0; color: var(--u-muted); }
.faq-list details > div p { margin: 0; }
.faq-list details > div a { color: var(--u-ink); }

/* ── Download CTA ─────────────────────────────────────────────────────── */
.cta { background: var(--u-night); color: #fff; padding: clamp(100px, 12vw, 160px) 0; overflow: hidden; isolation: isolate; text-align: center; }
.cta-glow { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(40% 60% at 50% 110%, rgb(0 191 255 / .35), transparent 70%),
  radial-gradient(30% 40% at 50% 0%, rgb(255 235 0 / .1), transparent 70%); }
.cta-in { display: grid; justify-items: center; gap: 18px; }
.cta-bn { margin: 0; font: 700 clamp(64px, 11vw, 150px)/1 'Anek Bangla', var(--u-display); color: var(--u-solar); letter-spacing: -.02em; }
.cta .u-h2 { color: #fff; }
.cta .u-lede { color: #A3A3A8; margin: 0 auto; }
.cta .u-stores { justify-content: center; margin-top: 14px; }
.u-link-arrow.on-dark { color: #fff; margin-top: 6px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-in { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .hero-copy { text-align: center; display: grid; justify-items: center; padding-top: 10px; }
  .hero-actions { align-items: center; }
  .u-stores { justify-content: center; }
  .stage { height: 640px; max-width: 640px; width: 100%; margin: 20px auto 0; }
  .chapters { grid-template-columns: 1fr; gap: 0; }
  .chapter-phone { display: none; }
  .chapter { min-height: 0; opacity: 1; max-width: 640px; margin: 0 auto; padding: 56px 0; display: grid; justify-items: start; border-bottom: 1px solid var(--u-line); }
  .chapter:last-child { border-bottom: 0; }
  .chapter-shot { display: block; justify-self: center; margin-top: 40px; }
  .chapter-shot .u-phone { width: 280px; }
  .map-in, .nikah-in, .umi-in, .vision-in, .faq-in { grid-template-columns: 1fr; }
  .map-board { max-width: 680px; width: 100%; justify-self: center; }
  .nikah-visual { margin-top: 20px; }
  .umi-chat { justify-self: start; }
  .faq-head { position: static; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-live { grid-column: 1 / -1; grid-row: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .b-shop { grid-column: 1 / -1; grid-row: auto; }
  .b-reel { grid-column: 1; grid-row: auto / span 2; min-height: 420px; }
  .b-comm, .b-market { grid-column: 2; grid-row: auto; }
  .mosaic { max-width: 640px; }
}
@media (max-width: 700px) {
  body.u-page { font-size: 16px; }
  .stage { height: 560px; }
  .stage-phone .u-phone { width: 236px; }
  .float { scale: .82; }
  .f-stories { left: -2%; top: 14%; transform-origin: left top; }
  .f-room { right: -3%; top: 4%; }
  .f-cross { right: -4%; bottom: 6%; width: 268px; }
  .f-chat { right: -1%; bottom: 25%; }
  .fc { width: 206px; height: 270px; padding: 16px; border-radius: 24px; }
  .live-cmts { margin-top: 92px; }
  .art-map, .art-cross { height: 128px; }
  .rail { padding-bottom: 48px; }
  .tile { width: 172px; border-radius: 20px; }
  .reel { padding: 34px 0 56px; }
  .cp { flex-direction: column; align-items: flex-start; }
  .map-tabs button { padding: 0 14px; }
  .map-board { border-radius: 24px; }
  .pin img { width: 36px; height: 36px; border-width: 2.5px; }
  .pin em, .mstory em, .blob em { font-size: 10.5px; padding: 3px 7px; }
  .mstory img { width: 48px; height: 48px; border-radius: 14px; }
  .map-svg .labels text { font-size: 13px; }
  .cp-toast { left: 10px; right: 10px; bottom: 10px; padding: 10px; }
  .cp-toast b { font-size: 14.5px; }
  .cp-toast small { font-size: 12.5px; }
  .ghotok-tip { left: 0; right: 0; margin: 0 auto; bottom: -24px; width: min(300px, 92%); }
  .nikah-visual { padding-bottom: 40px; }
  .nikah-note { bottom: -58px; }
  .bento { grid-template-columns: 1fr; }
  .b-reel, .b-comm, .b-market, .b-shop, .b-live { grid-column: 1; grid-row: auto; }
  .b-live { aspect-ratio: 4 / 5; }
  .b-reel { aspect-ratio: 4 / 5; min-height: 0; }
  .b-card { padding: 24px; border-radius: 26px; }
  .b-shop { grid-template-columns: 1fr; padding-bottom: 0; }
  .b-shop-copy { padding-bottom: 0; }
  .b-shop-shot { justify-self: center; width: 240px; height: 230px; }
  .safe-grid { grid-template-columns: 1fr; gap: 12px; }
  .safe { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 20px; border-radius: 22px; }
  .safe > a { grid-column: 1 / -1; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; margin: -20px; padding: 20px; }
  .safe .ic { margin-bottom: 0; grid-row: span 2; }
  .safe b { font-size: 18px; }
  .umi-log { min-height: 170px; }
  .tiers { grid-template-columns: 1fr; }
  .tier { padding: 28px 24px; border-radius: 28px; }
  .tier-price b { font-size: 46px; }
  .tier-badge { position: static; justify-self: start; margin-bottom: 16px; width: max-content; }
  .mosaic { grid-template-rows: repeat(12, 34px); gap: 10px; }
  .mosaic img { border-radius: 18px; }
  .faq-list summary { font-size: 18px; padding: 20px 40px 20px 0; }
  .viewer-card { height: 100svh; border-radius: 0; aspect-ratio: auto; width: 100vw; }
}
@media (max-width: 400px) {
  .stage { height: 520px; }
  .float { scale: .74; }
  .f-cross { right: -8%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow, .float { animation: none !important; }
  .swash path { stroke-dashoffset: 0; animation: none; }
}

/* ── Dark theme touches ───────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="solar"]) .tier.nk { box-shadow: inset 0 0 0 1px rgb(205 166 91 / .3), 0 30px 80px rgb(0 0 0 / .5); }
  :root:not([data-theme="solar"]) .nikah { background: #0C0A07; border-top: 1px solid rgb(205 166 91 / .14); border-bottom: 1px solid rgb(205 166 91 / .14); }
  :root:not([data-theme="solar"]) .cta { border-top: 1px solid var(--u-line); }
}
:root[data-theme="moon"] .tier.nk { box-shadow: inset 0 0 0 1px rgb(205 166 91 / .3), 0 30px 80px rgb(0 0 0 / .5); }
:root[data-theme="moon"] .nikah { border-top: 1px solid rgb(205 166 91 / .14); border-bottom: 1px solid rgb(205 166 91 / .14); }
:root[data-theme="moon"] .cta { border-top: 1px solid var(--u-line); }

/* ── The 3D cast ──────────────────────────────────────────────────────── */
.cast { position: relative; margin: 0; flex: none; width: 140px; aspect-ratio: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.cast img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: transform .5s var(--u-spring); }
.cast:hover img { transform: translateY(-4px) scale(1.04); }
.cast-say {
  position: absolute; left: 50%; bottom: calc(100% - 6px); translate: -50% 0; z-index: 3;
  padding: 8px 13px; border-radius: 16px; white-space: nowrap; pointer-events: none;
  background: var(--u-card); color: var(--u-ink); font-size: 14px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--u-line), var(--u-shadow-2);
  opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 50% 100%;
  transition: opacity .3s var(--u-ease), transform .45s var(--u-spring);
}
.cast-say::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; translate: -50% 0; rotate: 45deg; background: inherit; box-shadow: 1px 1px 0 0 var(--u-line); }
.cast.saying .cast-say { opacity: 1; transform: none; }
/* Section heads: the host stands at the right of the heading. */
.moments-head, .create .sec-head, .safety .sec-head { position: relative; }
.cast-head { position: absolute; right: 0; bottom: -18px; width: 168px; }
.create .cast-head { right: -260px; bottom: -40px; }
.cast-inline { width: 116px; margin: -24px 0 -24px auto; }
.spaces .cast-inline { margin-left: 4px; }
.chips-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.chips-row .chips-out { margin: 0 !important; flex: 1; }
.cp { position: relative; }
.cast-cp { position: absolute; right: -46px; top: -74px; width: 112px; }
.cast-tip { width: 76px; margin: -14px -4px -10px -8px; }
.ghotok-tip { width: 290px !important; z-index: 4; }
.ghotok-tip .cast img { width: 100%; }
.umi-head .cast-umi { width: 64px; margin: -18px 2px -10px -6px; }
.umi-head .cast-umi .cast-say { font-size: 13px; }
.safety .sec-head { padding-top: 0; }
.cast-safe { width: 150px; margin: -6px auto -26px; order: -1; }
.safety .sec-head.center { display: grid; justify-items: center; }
@media (max-width: 1100px) {
  .create .cast-head { right: 0; bottom: auto; top: -30px; width: 130px; }
  .cast-head { width: 140px; }
}
@media (max-width: 700px) {
  .cast-head { width: 112px; bottom: -6px; right: -6px; }
  .moments-head .u-lede { padding-right: 96px; }
  .create .cast-head { top: -14px; width: 104px; }
  .create .sec-head .u-h2 { padding-right: 70px; }
  .cast-inline { width: 96px; }
  .cast-cp { top: -76px; right: -8px; width: 92px; }
  .cast-safe { width: 120px; }
  .cast-say { font-size: 12.5px; padding: 7px 11px; }
  .spaces { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .cast:hover img { transform: none; } }
/* Finale: Ghotok and Umi, big, one on each side of "Come on over". */
.cta { position: relative; }
.cta-cast .cast-big { position: absolute; bottom: clamp(30px, 5vw, 70px); width: clamp(220px, 21vw, 320px); z-index: 1; }
.cta-g { left: max(12px, calc(50% - 650px)); }
.cta-u { right: max(12px, calc(50% - 650px)); }
.cast-big .cast-say { font-size: 16px; padding: 10px 16px; border-radius: 18px; bottom: calc(100% - 18px); }
@media (max-width: 860px) {
  .cta-cast { position: relative; display: flex; justify-content: space-between; align-items: flex-end; max-width: 400px; margin: 34px auto -30px; padding: 0 6px; }
  .cta-cast .cast-big { position: relative; inset: auto; width: 47%; }
  .cast-big .cast-say { font-size: 14px; padding: 8px 12px; }
  .cta-g .cast-say { left: 4px; translate: 0 0; }
  .cta-g .cast-say::after { left: 40%; }
  .cta-u .cast-say { left: auto; right: 4px; translate: 0 0; }
  .cta-u .cast-say::after { left: 60%; }
}