:root {
  --ink: #182032;
  --muted: #758096;
  --soft: #f7f8fc;
  --line: #e8eaf2;
  --purple: #6046d8;
  --purple-deep: #36257f;
  --lavender: #eeeaff;
  --blue: #3d7ce7;
  --teal: #3ab7b2;
  --orange: #f49d63;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: #f7f8fd;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #f7f8fd; }
body { overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; border: 0; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(96,70,216,.4); outline-offset: 3px; }

.app-shell { min-height: 100vh; position: relative; }
.main-app { min-height: 100vh; opacity: 0; transform: translateY(12px); pointer-events: none; background: #f8f9fd; }
.main-app.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }

/* Intro */
.splash { position: fixed; inset: 0; z-index: 20; overflow: hidden; color: white; background: linear-gradient(155deg, #8ad7ff 0%, #78c4f4 45%, #c8e7f4 100%); transition: opacity .8s var(--ease-out), visibility .8s; }
.splash.done { opacity: 0; visibility: hidden; pointer-events: none; }
.sun-glow { position: absolute; width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; right: 9%; top: -20%; background: radial-gradient(circle, rgba(255,250,207,.87) 0, rgba(255,235,183,.22) 33%, transparent 68%); filter: blur(8px); }
.cloud { position: absolute; width: 240px; height: 45px; border-radius: 50px; background: rgba(255,255,255,.3); filter: blur(2px); animation: cloud-drift 22s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 95px; height: 95px; left: 35px; bottom: 0; }
.cloud::after { width: 70px; height: 70px; left: 110px; bottom: -1px; }
.cloud-a { top: 17%; left: -70px; transform: scale(.85); opacity: .8; }
.cloud-b { top: 39%; right: -80px; transform: scale(1.15); opacity: .5; animation-delay: -8s; }
.cloud-c { top: 64%; left: 12%; transform: scale(.5); opacity: .25; animation-delay: -14s; }
@keyframes cloud-drift { 0% { margin-left: -4vw; } 50% { margin-left: 7vw; } 100% { margin-left: -4vw; } }
.horizon { position: absolute; bottom: -25%; left: -5%; right: -5%; height: 58%; background: radial-gradient(ellipse at 33% 0%, rgba(90,171,139,.5), transparent 55%), linear-gradient(165deg, #9ac9a5 0%, #4e9d87 68%, #367b78 100%); border-radius: 50% 50% 0 0 / 19% 19% 0 0; transform: rotate(-2deg); }
.horizon::after { content: ""; position: absolute; inset: 0; opacity: .28; background-image: radial-gradient(#f6fff0 1px, transparent 1px); background-size: 19px 19px; mix-blend-mode: overlay; }
.splash-kicker { position: absolute; top: 48px; left: 6vw; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; font-weight: 700; }
.splash-mark { position: absolute; z-index: 3; top: 42%; left: 50%; transform: translate(-50%, -50%) scale(1.5); opacity: 0; font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.1em; font-size: clamp(100px, 17vw, 210px); line-height: .8; animation: mark-reveal 1.2s 2.4s var(--ease-out) forwards; text-shadow: 0 14px 28px rgba(31,74,117,.15); }
.splash-mark span { color: #fff; }
.splash-mark i { color: #ffe279; font-style: normal; margin-left: .02em; }
@keyframes mark-reveal { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); filter: blur(12px); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); filter: blur(0); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.arm { position: absolute; z-index: 2; height: 120px; width: min(47vw, 680px); top: 43%; opacity: 0; animation-duration: 1.5s; animation-timing-function: var(--ease-out); animation-fill-mode: forwards; }
.arm-left { left: -30px; transform-origin: left center; animation-name: arm-left-in; animation-delay: .65s; }
.arm-right { right: -30px; transform-origin: right center; animation-name: arm-right-in; animation-delay: .92s; }
.sleeve { position: absolute; top: 23px; width: 68%; height: 87px; background: linear-gradient(165deg, #6f4cd0, #3e2a9a); box-shadow: 0 17px 20px rgba(43,70,130,.12); }
.arm-left .sleeve { left: -10px; border-radius: 0 52px 52px 0; transform: rotate(-8deg); }
.arm-right .sleeve { right: -10px; border-radius: 52px 0 0 52px; transform: rotate(8deg); }
.hand { position: absolute; top: 21px; width: 115px; height: 66px; background: linear-gradient(145deg, #d99578, #efb190 62%, #c77b67); box-shadow: 0 15px 22px rgba(50,79,113,.16); }
.hand::before { content: ""; position: absolute; width: 78px; height: 42px; top: -26px; background: inherit; border-radius: 42px 44px 18px 18px; }
.hand::after { content: ""; position: absolute; width: 53px; height: 33px; top: 30px; background: #d0866f; border-radius: 0 20px 20px 22px; opacity: .55; }
.hand-left { right: -5px; border-radius: 0 38px 38px 12px; transform: rotate(-5deg); }
.hand-left::before { right: 4px; transform: rotate(-9deg); border-radius: 36px 36px 14px 14px; }
.hand-left::after { right: 0; }
.hand-right { left: -5px; border-radius: 38px 0 12px 38px; transform: rotate(5deg); }
.hand-right::before { left: 4px; transform: rotate(9deg); border-radius: 36px 36px 14px 14px; }
.hand-right::after { left: 0; }
@keyframes arm-left-in { 0% { opacity: 0; transform: translateX(-20vw) rotate(-12deg); } 100% { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes arm-right-in { 0% { opacity: 0; transform: translateX(20vw) rotate(12deg); } 100% { opacity: 1; transform: translateX(0) rotate(0); } }
.impact { position: absolute; z-index: 4; top: 43%; left: 50%; width: 190px; height: 190px; transform: translate(-50%, -50%); opacity: 0; animation: impact-bloom .75s 1.98s var(--ease-out) forwards; }
.impact span { position: absolute; inset: 28px; border: 1px solid rgba(255,255,255,.9); border-radius: 54% 46% 56% 44%; transform: rotate(20deg); animation: ripple 1.2s 2.03s ease-out forwards; }
.impact span:nth-child(2) { inset: 13px; transform: rotate(88deg); animation-delay: 2.1s; border-color: rgba(255,239,162,.85); }
.impact span:nth-child(3) { inset: -3px; transform: rotate(151deg); animation-delay: 2.18s; border-color: rgba(255,255,255,.45); }
.impact b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 38px; color: #fff6ae; text-shadow: 0 0 20px #fff; }
@keyframes impact-bloom { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); } 40% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes ripple { 0% { opacity: .9; transform: scale(.25) rotate(20deg); } 100% { opacity: 0; transform: scale(1.6) rotate(140deg); } }
.splash-copy { position: absolute; z-index: 5; top: 67%; left: 7vw; max-width: 470px; opacity: 0; animation: copy-in .9s 3s var(--ease-out) forwards; }
.splash-copy .eyebrow { color: rgba(255,255,255,.76); }
.splash-copy h1 { margin: 13px 0 12px; font: 600 clamp(32px, 4.5vw, 64px)/.98 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.splash-copy h1 em { color: #fff1a0; font-style: normal; }
.splash-copy p { margin: 0; color: rgba(255,255,255,.76); font-size: 15px; }
@keyframes copy-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.splash-skip { position: absolute; z-index: 8; right: 6vw; bottom: 47px; color: rgba(255,255,255,.8); background: transparent; font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 8px; }
.splash-skip span { padding-left: 8px; font-size: 15px; }
.splash-progress { position: absolute; z-index: 8; left: 6vw; bottom: 51px; width: 150px; height: 2px; background: rgba(255,255,255,.25); border-radius: 4px; overflow: hidden; }
.splash-progress span { display: block; height: 100%; width: 0; background: #fff; animation: progress 4.8s linear forwards; }
@keyframes progress { to { width: 100%; } }

/* Main app */
.topbar { height: 82px; padding: 0 42px; border-bottom: 1px solid rgba(229,232,242,.8); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.78); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 10; }
.brand { display: inline-flex; align-items: baseline; font: 700 32px/1 "Space Grotesk", sans-serif; letter-spacing: -.13em; text-decoration: none; }
.brand-hi { color: var(--purple); }
.brand-five { color: #3d7ce7; margin-left: 4px; letter-spacing: -.12em; }
.location-pill { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; color: #4e586e; background: #f7f8fc; padding: 10px 16px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.pin-dot { width: 7px; height: 7px; background: var(--purple); border-radius: 50%; box-shadow: 0 0 0 4px #e9e3ff; }
.chevron { color: #a1a8ba; font-size: 14px; margin-left: 2px; }
.top-actions { display: flex; align-items: center; gap: 17px; }
.icon-btn { position: relative; width: 35px; height: 35px; background: transparent; color: #656e83; font-size: 21px; }
.bell-icon { display: block; transform: rotate(45deg); font-size: 19px; }
.notification-dot { position: absolute; top: 5px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #ed795c; border: 2px solid white; box-sizing: content-box; }
.avatar { display: grid; place-items: center; color: white; border-radius: 50%; background: linear-gradient(145deg, #efb095, #a66080); font-size: 11px; font-weight: 700; }
.avatar-top { width: 34px; height: 34px; }
.content-area { max-width: 1440px; margin: 0 auto; padding: 36px 42px 110px; }
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.eyebrow { display: block; color: #8b96aa; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow.violet { color: var(--purple); }
.eyebrow.light { color: rgba(255,255,255,.62); }
h2, h3, h4, p { margin-top: 0; }
h2 { margin: 8px 0 0; font: 600 clamp(26px, 3vw, 40px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -.055em; }
h2 span { color: #f6b36b; font-size: .65em; vertical-align: 14%; margin-left: 5px; }
h3 { margin: 6px 0 0; font: 600 21px/1.1 "Space Grotesk", sans-serif; letter-spacing: -.045em; }
h4 { margin: 0; font-size: 13px; font-weight: 700; }
.create-btn { padding: 12px 17px; color: white; background: var(--purple); border-radius: 12px; font-size: 12px; font-weight: 700; box-shadow: 0 8px 20px rgba(96,70,216,.2); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.create-btn span { font-size: 18px; vertical-align: -2px; padding-right: 5px; font-weight: 400; }
.create-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(96,70,216,.28); background: #5339c6; }
.create-btn:active, .light-btn:active, .category-pill:active { transform: scale(.97); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .85fr); gap: 26px; }
.map-card, .feed-card { background: white; border: 1px solid rgba(231,233,241,.8); border-radius: 22px; box-shadow: 0 12px 38px rgba(41,42,76,.045); overflow: hidden; }
.map-card { min-height: 495px; position: relative; }
.map-toolbar { position: absolute; z-index: 4; top: 17px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; }
.map-mode-tabs { display: flex; padding: 4px; gap: 2px; border-radius: 9px; background: rgba(255,255,255,.9); box-shadow: 0 5px 16px rgba(61,72,115,.12); }
.map-mode-tabs button { padding: 7px 13px; color: #8790a2; border-radius: 6px; background: transparent; font-size: 11px; font-weight: 700; }
.map-mode-tabs button.active { color: var(--purple); background: #f0edff; }
.map-control { width: 32px; height: 32px; color: var(--purple); background: white; border-radius: 50%; box-shadow: 0 5px 16px rgba(61,72,115,.12); font-size: 22px; }
.map-canvas { position: absolute; inset: 0 0 37px; overflow: hidden; background: #eff1e7; }
.map-canvas::before { content: ""; position: absolute; inset: 0; opacity: .4; background: repeating-linear-gradient(35deg, transparent 0 45px, rgba(255,255,255,.55) 46px 48px), repeating-linear-gradient(128deg, transparent 0 80px, rgba(206,214,201,.65) 81px 83px); }
.map-canvas::after { content: ""; position: absolute; inset: 0; opacity: .23; background-image: radial-gradient(#bdc9c0 .8px, transparent .8px); background-size: 13px 13px; }
.road { position: absolute; z-index: 1; height: 7px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(202,208,204,.5); transform-origin: left center; }
.road::after { content: ""; display: block; height: 2px; margin-top: 2px; border-top: 1px dashed #d8ddd8; }
.road-1 { width: 95%; left: -4%; top: 58%; transform: rotate(-21deg); }
.road-2 { width: 95%; left: 15%; top: 33%; transform: rotate(31deg); }
.road-3 { width: 72%; left: 36%; top: 69%; transform: rotate(23deg); }
.road-4 { width: 62%; left: -4%; top: 76%; transform: rotate(36deg); }
.road-5 { width: 75%; left: 29%; top: 11%; transform: rotate(92deg); }
.road-6 { width: 48%; left: 12%; top: 93%; transform: rotate(-67deg); }
.road-7 { width: 60%; left: 43%; top: 93%; transform: rotate(-43deg); }
.waterway { position: absolute; z-index: 0; left: 43%; top: -15%; width: 24%; height: 135%; border: 16px solid rgba(150,211,218,.45); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(33deg); }
.park-shape { position: absolute; z-index: 0; background: rgba(178,211,165,.5); border-radius: 50% 38% 55% 31%; }
.park-one { width: 240px; height: 106px; left: 62%; top: 7%; transform: rotate(-11deg); }
.park-two { width: 180px; height: 88px; left: 17%; top: 55%; transform: rotate(24deg); }
.park-three { width: 135px; height: 63px; left: 70%; top: 62%; transform: rotate(28deg); }
.map-label { position: absolute; z-index: 2; color: #879486; font-size: 10px; font-weight: 600; letter-spacing: .03em; }
.label-echo { left: 20%; top: 38%; }.label-silver { left: 59%; top: 40%; }.label-hollywood { left: 65%; top: 20%; }.label-downtown { left: 73%; top: 80%; }.label-park { left: 75%; top: 12%; }
.map-marker { position: absolute; z-index: 3; display: grid; place-items: center; width: 39px; height: 39px; color: white; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 7px 14px rgba(80,68,150,.28); transition: transform .18s var(--ease-out), filter .18s ease; }
.map-marker span { transform: rotate(45deg); font-size: 16px; font-weight: 700; }
.map-marker:hover, .map-marker.active { filter: brightness(1.08); transform: rotate(-45deg) scale(1.16); }
.marker-hike { left: 67%; top: 25%; background: var(--purple); }.marker-run { left: 24%; top: 29%; background: #ed9564; }.marker-yoga { left: 52%; top: 57%; background: #3b88d7; }.marker-basketball { left: 78%; top: 65%; background: #e67b69; }.marker-art { left: 38%; top: 72%; background: #7f70db; }.marker-music { left: 82%; top: 34%; background: #38b1a5; }
.you-are-here { position: absolute; z-index: 4; left: 45%; top: 42%; width: 22px; height: 22px; display: grid; place-items: center; background: white; border: 5px solid rgba(61,124,231,.22); border-radius: 50%; box-shadow: 0 2px 10px rgba(44,99,182,.25); }
.you-are-here span { width: 8px; height: 8px; background: #4b8ef0; border-radius: 50%; }.you-are-here i { position: absolute; top: 23px; color: #6480a1; font-size: 9px; font-style: normal; font-weight: 700; }
.map-legend { position: absolute; left: 19px; right: 19px; bottom: 0; height: 37px; display: flex; align-items: center; gap: 18px; color: #8e98aa; font-size: 10px; font-weight: 600; }
.map-legend span { display: flex; align-items: center; gap: 6px; }.legend-dot { width: 7px; height: 7px; border-radius: 50%; }.violet-dot { background: var(--purple); }.teal-dot { background: var(--teal); }.map-legend button { margin-left: auto; color: #6c7385; background: transparent; font-size: 10px; font-weight: 700; }.map-legend button span { display: inline; font-size: 14px; padding-left: 4px; }
.side-rail { min-width: 0; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px; }.text-btn { color: var(--purple); background: transparent; font-size: 11px; font-weight: 700; }.text-btn span { font-size: 16px; padding-left: 4px; }.activity-stack { display: grid; gap: 10px; }.activity-card { display: flex; align-items: flex-start; position: relative; min-height: 112px; padding: 14px 14px 12px; border: 1px solid #ebeef5; border-radius: 16px; background: white; box-shadow: 0 7px 18px rgba(44,46,80,.025); cursor: pointer; transition: .2s var(--ease-out); }.activity-card:hover, .activity-card.selected { border-color: #d5cdf9; box-shadow: 0 8px 22px rgba(96,70,216,.09); transform: translateY(-2px); }.activity-icon { flex: 0 0 auto; width: 32px; height: 32px; margin-right: 11px; display: grid; place-items: center; border-radius: 10px; font-size: 18px; font-weight: 700; }.icon-green { color: #279b7f; background: #e0f6eb; }.icon-orange { color: #da754d; background: #fff0e7; }.icon-blue { color: #357dd9; background: #e5f0ff; }.activity-card-main { min-width: 0; flex: 1; }.card-title-row { display: flex; align-items: center; gap: 7px; padding-right: 13px; }.card-title-row h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.status-chip { flex: 0 0 auto; padding: 4px 6px; color: #319277; background: #e7f8ee; border-radius: 5px; font-size: 8px; font-weight: 700; }.status-chip.warm { color: #bf744d; background: #fff0e5; }.status-chip.teal { color: #338a9b; background: #e4f5fa; }.activity-card-main > p { margin: 6px 0 10px; color: #939bad; font-size: 10px; white-space: nowrap; }.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; }.mini-avatars { display: flex; align-items: center; }.mini-av, .mini-count { width: 20px; height: 20px; margin-left: -4px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; font-size: 7px; font-weight: 700; }.mini-av:first-child { margin-left: 0; }.av-purple { color: #684ac8; background: #dfd6ff; }.av-yellow { color: #a57827; background: #f8dfa4; }.av-pink { color: #bd608c; background: #f4c8da; }.av-blue { color: #3672bd; background: #c5dcf6; }.av-green { color: #328665; background: #c4e8d6; }.av-coral { color: #bc685f; background: #f5c5bc; }.av-lavender { color: #7356bc; background: #dcd2fa; }.av-teal { color: #308b8a; background: #bfebe8; }.mini-count { color: #7c8595; background: #f1f2f6; }.host-label { color: #939aaa; font-size: 9px; white-space: nowrap; }.card-arrow { position: absolute; right: 12px; top: 14px; color: #bbc0cd; font-size: 16px; }.mini-community { display: flex; gap: 12px; align-items: center; margin-top: 17px; padding: 13px; color: var(--ink); background: #f2f0ff; border: 1px solid #e2ddff; border-radius: 16px; }.community-art { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; color: white; font-size: 19px; background: linear-gradient(140deg, #3a85de, #7450d9); border-radius: 12px; }.mini-community h4 { margin: 4px 0 2px; }.mini-community p { margin: 0; color: #858b9f; font-size: 9px; }.mini-community button { margin-left: auto; color: var(--purple); background: transparent; font-size: 19px; }
.discover-strip { margin: 37px 0 32px; }.scroll-arrows { display: flex; gap: 6px; }.scroll-arrows button { width: 28px; height: 28px; color: #778095; background: white; border: 1px solid #e5e8f0; border-radius: 50%; }.category-row { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; padding: 1px 1px 4px; }.category-row::-webkit-scrollbar { display: none; }.category-pill { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 15px; color: #737d91; background: white; border: 1px solid #e5e8f0; border-radius: 11px; font-size: 11px; font-weight: 700; transition: .16s ease; }.category-pill span { color: #94a0b3; font-size: 16px; }.category-pill:hover { border-color: #cfc6fa; color: var(--purple); }.category-pill.active { color: white; background: var(--purple); border-color: var(--purple); box-shadow: 0 7px 15px rgba(96,70,216,.2); }.category-pill.active span { color: #fff; }
.lower-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 26px; }.feed-card { padding: 22px 24px; }.feed-card .section-heading { margin-bottom: 14px; }.feed-list { display: grid; }.feed-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #f0f1f5; }.feed-avatar { flex: 0 0 auto; width: 33px; height: 33px; display: grid; place-items: center; color: white; border-radius: 50%; font-size: 11px; font-weight: 700; }.feed-a { background: linear-gradient(145deg, #8c70dc, #4b75c1); }.feed-b { background: linear-gradient(145deg, #ed9f75, #a15b83); }.feed-c { background: linear-gradient(145deg, #60b5a4, #3a77aa); }.feed-item p { margin: 0 0 3px; font-size: 11px; }.feed-item p strong { font-weight: 700; }.feed-item span:not(.feed-avatar) { color: #99a0ae; font-size: 9px; }.feed-action { margin-left: auto; padding: 7px 10px; color: var(--purple); background: #f2efff; border-radius: 7px; font-size: 9px; font-weight: 700; }.hot-card { position: relative; min-height: 227px; padding: 25px; overflow: hidden; color: white; background: linear-gradient(135deg, #3d2c9b, #6651d8 58%, #8c70e6); border-radius: 22px; box-shadow: 0 12px 28px rgba(75,60,175,.18); }.hot-card::before { content: ""; position: absolute; width: 220px; height: 220px; top: -90px; right: -65px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255,255,255,.04), 0 0 0 44px rgba(255,255,255,.03); }.hot-card h3 { margin-top: 10px; font-size: 25px; line-height: .98; }.hot-card p { max-width: 180px; margin: 11px 0 15px; color: rgba(255,255,255,.68); font-size: 10px; line-height: 1.45; }.light-btn { padding: 9px 12px; color: var(--purple-deep); background: #fff; border-radius: 8px; font-size: 10px; font-weight: 700; transition: transform .16s ease; }.light-btn span { padding-left: 7px; font-size: 14px; }.hot-stats { position: absolute; right: 21px; bottom: 22px; display: flex; gap: 12px; }.hot-stats div { display: grid; }.hot-stats strong { font: 600 15px "Space Grotesk", sans-serif; }.hot-stats span { color: rgba(255,255,255,.58); font-size: 8px; }.orb-one, .orb-two { position: absolute; border-radius: 50%; filter: blur(1px); }.orb-one { width: 88px; height: 88px; right: 46px; top: 72px; background: radial-gradient(circle at 38% 30%, #f1c0ff, #8870e2 62%, transparent 68%); opacity: .62; }.orb-two { width: 48px; height: 48px; right: 132px; top: 133px; background: radial-gradient(circle at 35% 30%, #f6dfaa, #dc8ccf 66%, transparent 70%); opacity: .72; }
.bottom-nav { position: fixed; z-index: 12; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-around; width: min(92%, 580px); padding: 8px; background: rgba(255,255,255,.91); border: 1px solid rgba(228,230,239,.9); border-radius: 18px; box-shadow: 0 13px 35px rgba(42,44,84,.12); backdrop-filter: blur(15px); }.nav-item { position: relative; min-width: 72px; display: grid; gap: 3px; place-items: center; padding: 6px 8px; color: #9aa1b1; background: transparent; border-radius: 11px; font-size: 9px; font-weight: 700; transition: .16s ease; }.nav-icon { color: #9aa1b1; font-size: 20px; line-height: 1; }.nav-item.active { color: var(--purple); background: #f1efff; }.nav-item.active .nav-icon { color: var(--purple); }.nav-item:hover { color: var(--purple); background: #f6f4ff; }.nav-badge { position: absolute; top: 0; right: 17px; min-width: 14px; height: 14px; display: grid; place-items: center; color: white; background: #ed795c; border: 2px solid white; border-radius: 50%; font-size: 7px; }
/* Modal and feedback */
.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(24,28,52,.42); backdrop-filter: blur(7px); }.modal-backdrop[hidden] { display: none; }.modal { position: relative; width: min(100%, 460px); max-height: calc(100vh - 40px); overflow: auto; padding: 30px; background: white; border-radius: 22px; box-shadow: 0 25px 70px rgba(19,25,58,.23); animation: modal-in .28s var(--ease-out); }.modal-close { position: absolute; top: 15px; right: 16px; width: 28px; height: 28px; color: #7c8597; background: #f4f5f8; border-radius: 50%; font-size: 19px; line-height: 1; }.modal h3 { padding-right: 25px; font-size: 25px; }.modal .eyebrow { margin-bottom: 7px; }.detail-meta { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 21px 0; }.detail-meta div { padding: 12px; background: #f7f8fc; border-radius: 10px; }.detail-meta strong { display: block; margin-bottom: 4px; color: #455067; font-size: 11px; }.detail-meta span { color: #858fa2; font-size: 10px; }.detail-description { color: #677187; font-size: 12px; line-height: 1.6; }.detail-host { display: flex; align-items: center; gap: 10px; margin: 18px 0; padding: 12px; background: #fafaff; border-radius: 12px; }.detail-host p { margin: 0; color: #8a92a2; font-size: 10px; }.detail-host strong { color: var(--ink); font-size: 12px; }.modal-actions { display: flex; gap: 8px; }.modal-actions button { flex: 1; padding: 12px 10px; border-radius: 9px; font-size: 11px; font-weight: 700; }.primary-action { color: white; background: var(--purple); }.secondary-action { color: var(--purple); background: #f0edff; }.form-grid { display: grid; gap: 13px; margin-top: 21px; }.form-grid label { display: grid; gap: 6px; color: #68738a; font-size: 10px; font-weight: 700; }.form-grid input, .form-grid textarea, .form-grid select { width: 100%; padding: 11px 12px; color: var(--ink); background: #fafbfe; border: 1px solid #e2e5ee; border-radius: 9px; font-size: 12px; }.form-grid textarea { min-height: 72px; resize: vertical; }.form-submit { width: 100%; margin-top: 16px; padding: 12px; color: white; background: var(--purple); border-radius: 9px; font-size: 11px; font-weight: 700; }.search-panel { display: flex; gap: 8px; margin: 18px 0; }.search-panel input { flex: 1; padding: 12px; border: 1px solid #e3e6ee; border-radius: 9px; }.search-result { display: flex; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid #f1f2f5; }.search-result > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; color: var(--purple); background: #f0edff; border-radius: 8px; }.search-result p { margin: 0; font-size: 11px; }.search-result small { color: #9aa1ae; font-size: 9px; }.profile-head { display: flex; align-items: center; gap: 13px; margin: 21px 0; }.profile-avatar { width: 55px; height: 55px; display: grid; place-items: center; color: white; background: linear-gradient(145deg, #efb095, #9a6283); border-radius: 18px; font-size: 17px; font-weight: 700; }.profile-head p { margin: 4px 0 0; color: #8992a4; font-size: 11px; }.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }.profile-tags span { padding: 7px 9px; color: #6656ad; background: #f0edff; border-radius: 6px; font-size: 9px; font-weight: 700; }.toast { position: fixed; z-index: 50; right: 25px; bottom: 27px; display: flex; gap: 11px; align-items: center; min-width: 230px; padding: 13px 15px; color: white; background: #222a43; border-radius: 12px; box-shadow: 0 13px 30px rgba(25,32,63,.2); opacity: 0; transform: translateY(16px); pointer-events: none; transition: .28s var(--ease-out); }.toast.visible { opacity: 1; transform: translateY(0); }.toast > span { width: 27px; height: 27px; display: grid; place-items: center; color: #fbe5a4; background: rgba(255,255,255,.1); border-radius: 9px; }.toast strong { display: block; font-size: 11px; }.toast p { margin: 3px 0 0; color: #adb5c7; font-size: 9px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
@media (max-width: 960px) { .topbar { padding: 0 24px; }.content-area { padding: 28px 24px 110px; }.hero-grid { grid-template-columns: 1fr; }.map-card { min-height: 480px; }.side-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }.side-rail > .section-heading { grid-column: 1/-1; margin-bottom: -5px; }.activity-stack { grid-column: 1/-1; grid-template-columns: repeat(3, 1fr); }.mini-community { margin-top: 0; }.lower-grid { grid-template-columns: 1fr; }.hot-card { min-height: 220px; } }
@media (max-width: 620px) { .topbar { height: 68px; padding: 0 18px; }.brand { font-size: 27px; }.location-pill { left: 53%; padding: 8px 11px; font-size: 10px; }.avatar-top { width: 30px; height: 30px; }.icon-btn { width: 28px; }.top-actions { gap: 7px; }.content-area { padding: 25px 16px 105px; }.welcome-row { align-items: flex-start; flex-direction: column; gap: 17px; margin-bottom: 23px; }.create-btn { align-self: stretch; }.map-card { min-height: 420px; border-radius: 17px; }.map-canvas { inset-bottom: 34px; }.side-rail { display: block; margin-top: 30px; }.activity-stack { display: grid; grid-template-columns: 1fr; }.mini-community { margin-top: 14px; }.discover-strip { margin: 32px 0 28px; }.lower-grid { gap: 16px; }.feed-card { padding: 19px 17px; border-radius: 17px; }.feed-item { gap: 9px; }.feed-action { padding: 6px 8px; }.hot-card { border-radius: 17px; }.bottom-nav { bottom: 9px; width: calc(100% - 20px); padding: 6px; }.nav-item { min-width: 55px; font-size: 8px; }.nav-icon { font-size: 18px; }.nav-badge { right: 8px; }.splash-copy { top: 66%; left: 8vw; right: 8vw; }.splash-copy h1 { font-size: 38px; }.splash-kicker { top: 28px; left: 8vw; font-size: 9px; }.splash-progress { left: 8vw; bottom: 33px; }.splash-skip { right: 8vw; bottom: 28px; }.arm { top: 38%; }.splash-mark { top: 39%; font-size: 118px; } }

/* Trust and identity verification */
.trust-panel { display: flex; align-items: center; gap: 10px; margin: 15px 0 17px; padding: 12px; background: #f8f7ff; border: 1px solid #e6e0ff; border-radius: 12px; }
.trust-icon { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; color: #8b6a27; background: #fff0c2; border-radius: 9px; font-size: 14px; font-weight: 800; }
.trust-panel > div { min-width: 0; flex: 1; }
.trust-panel strong { display: block; color: #4f457c; font-size: 10px; }
.trust-panel p { margin: 3px 0 0; color: #9190a3; font-size: 9px; line-height: 1.35; }
.verification-steps { display: grid; gap: 9px; margin: 20px 0 16px; }
.verification-step { display: flex; gap: 10px; align-items: flex-start; padding: 11px; border: 1px solid #eceef4; border-radius: 11px; }
.verification-step.active { background: #faf9ff; border-color: #ddd6ff; }
.verification-step > span { flex: 0 0 auto; width: 21px; height: 21px; display: grid; place-items: center; color: #8b95a8; background: #f0f1f6; border-radius: 50%; font-size: 9px; font-weight: 700; }
.verification-step.active > span { color: white; background: var(--purple); }
.verification-step strong { display: block; color: #4d576d; font-size: 11px; }
.verification-step p { margin: 3px 0 0; color: #9098a8; font-size: 9px; line-height: 1.4; }
.consent-row { display: flex; gap: 8px; align-items: flex-start; color: #6d7688; font-size: 9px; line-height: 1.45; cursor: pointer; }
.consent-row input { flex: 0 0 auto; accent-color: var(--purple); margin-top: 1px; }
.consent-row u { color: var(--purple); text-underline-offset: 2px; }
.security-note { margin: 12px 0 0; color: #9aa1b1; text-align: center; font-size: 8px; }
.verification-launch { padding: 23px 15px 17px; text-align: center; background: #f8f8fd; border: 1px solid #e9eaf3; border-radius: 15px; }
.partner-logo { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 11px; color: white; background: linear-gradient(145deg, #283453, #55688f); border-radius: 16px; font: 700 17px "Space Grotesk", sans-serif; letter-spacing: -.08em; }
.partner-logo span { color: #83ded8; }
.verification-launch > strong { color: #444e65; font-size: 12px; }
.verification-launch p { margin: 8px auto 13px; max-width: 310px; color: #9098a8; font-size: 9px; line-height: 1.45; }
@media (max-width: 620px) { .modal { padding: 25px 20px; }.trust-panel { align-items: flex-start; }.trust-panel .status-chip { margin-left: auto; } }

.security-banner { display: flex; align-items: center; gap: 12px; margin: -8px 0 24px; padding: 12px 15px; background: linear-gradient(100deg, #f4f1ff, #f8fbff); border: 1px solid #e4defd; border-radius: 14px; }
.security-badge { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; color: white; background: var(--purple); border-radius: 9px; font-size: 16px; font-weight: 800; }
.security-banner > div:nth-child(2) { min-width: 0; flex: 1; }
.security-banner strong { display: block; margin-top: 4px; color: #474e67; font-size: 11px; }
.security-banner p { margin: 3px 0 0; color: #9098a8; font-size: 9px; }
.security-banner button { flex: 0 0 auto; padding: 8px 10px; color: var(--purple); background: white; border: 1px solid #d9d1fb; border-radius: 8px; font-size: 9px; font-weight: 700; }
.security-banner button span { padding-left: 4px; font-size: 13px; }
@media (max-width: 620px) { .security-banner { align-items: flex-start; flex-wrap: wrap; }.security-banner button { margin-left: 42px; }.security-banner p { max-width: 230px; } }

.waiver-details { margin: 16px 0 14px; border: 1px solid #e7e8ef; border-radius: 10px; background: #fbfbfe; }
.waiver-details summary { padding: 11px 12px; color: var(--purple); cursor: pointer; font-size: 10px; font-weight: 700; }
.waiver-copy { padding: 0 13px 13px; color: #6e7789; font-size: 9px; line-height: 1.5; }
.waiver-copy strong { display: block; margin-bottom: 7px; color: #4c566d; font-size: 10px; }
.waiver-copy p { margin: 0 0 8px; }
.waiver-copy p:last-child { margin-bottom: 0; }
.waiver-copy.compact { margin: 16px 0; padding: 14px; background: #fafaff; border: 1px solid #e7e8f3; border-radius: 11px; }

.social-section { margin-top: 3px; padding-top: 16px; border-top: 1px solid #eef0f5; }
.social-section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 8px; }
.social-section-heading > div { display: grid; gap: 4px; }
.social-section-heading strong { color: #4f586c; font-size: 11px; }
.social-section-heading small { color: #a0a7b5; font-size: 9px; }
.social-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid #f3f4f7; }
.social-logo { flex: 0 0 auto; width: 25px; height: 25px; display: grid; place-items: center; color: white; border-radius: 7px; font-size: 12px; font-weight: 800; }
.social-logo.facebook { background: #4a72ba; }.social-logo.instagram { background: linear-gradient(140deg, #f2b25f, #d35e8d 55%, #745fca); }.social-logo.linkedin { background: #2d78ab; font-size: 9px; }
.social-row > div { min-width: 0; flex: 1; display: grid; gap: 2px; }.social-row > div strong { color: #586278; font-size: 10px; }.social-row > div small { color: #9ba2b0; font-size: 8px; }
.social-connect, .social-visibility { flex: 0 0 auto; padding: 6px 8px; color: var(--purple); background: #f1efff; border-radius: 6px; font-size: 8px; font-weight: 700; }.social-connect.connected { color: #318e76; background: #e7f8ee; }.social-visibility { color: #7a8395; background: #f2f3f6; }
.social-note { margin: 8px 0 0; color: #9aa1ae; font-size: 8px; line-height: 1.35; }