/* chattersocial.io — landing page */

.page-home .content { overflow-x: clip; }
.lead { font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 54ch; }
.tag { display: inline-block; margin-left: 0.4em; padding: 0.2em 0.55em; font-size: 0.62rem; letter-spacing: 0.14em; border-radius: 999px; background: var(--teal); color: #012b2c; vertical-align: middle; }
.demo-note { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--ink-3); }

/* ---------- avatars / small bits ---------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-size: 0.85rem; font-weight: 600; color: #012b2c; background: linear-gradient(135deg, var(--teal-2), var(--teal-deep)); border: 2px solid rgba(5, 4, 3, 0.9); font-style: normal; }
.avatar--a { background: linear-gradient(135deg, #EDC55C, #BF921F); }
.avatar--b { background: linear-gradient(135deg, #62DEDF, #028385); }
.avatar--c { background: linear-gradient(135deg, #FF8A8E, #E5392E); color: #fff; }
.avatar--more { background: var(--surface-2); color: var(--ink); font-size: 0.75rem; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 12px var(--live); animation: pulse 1.6s infinite; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { display: block; width: 3px; height: 40%; border-radius: 2px; background: var(--teal); animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: 0.15s; } .eq i:nth-child(3) { animation-delay: 0.3s; } .eq i:nth-child(4) { animation-delay: 0.1s; } .eq i:nth-child(5) { animation-delay: 0.25s; }
.eq--live i { background: var(--live); }
@keyframes eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.pill { display: inline-block; padding: 0.35em 0.8em; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-2); border: 1px solid rgba(0, 206, 209, 0.45); border-radius: 999px; }

/* ---------- phone mockup (CSS 3D) ---------- */
.phone { position: relative; width: min(380px, 78vw); aspect-ratio: 1000 / 2050; margin: 0 auto; transform-style: preserve-3d; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease-out); will-change: transform; }
.phone-frame { position: absolute; inset: 0; border-radius: 12% / 6%; background: #0b0b0b; padding: 2.6%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 120px -20px var(--glow); overflow: hidden; }
.phone-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05) 30%, rgba(0, 206, 209, 0.25) 70%, rgba(255, 255, 255, 0.15)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3; }
.phone-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 10% / 5%; background: #000; }
.phone-island { position: absolute; top: 4.4%; left: 50%; width: 29%; height: 2.2%; transform: translateX(-50%); background: #000; border-radius: 999px; z-index: 2; }
.phone-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 45%); mix-blend-mode: screen; opacity: 0.9; }
.phone::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -8%; height: 12%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 206, 209, 0.35), transparent 70%); filter: blur(18px); z-index: -1; }
.float-card { position: absolute; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.7em 1em; font-size: 0.9rem; color: var(--ink); background: rgba(20, 18, 16, 0.72); border: 1px solid var(--line-2); border-radius: 16px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8); white-space: nowrap; transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform 0.5s var(--ease-out); animation: floaty 6s ease-in-out infinite; }
.float-card em { font-style: normal; color: var(--teal-2); font-weight: 600; }
.float-card--tip { top: 22%; left: -22%; animation-delay: -1s; }
.float-card--live { top: 54%; right: -18%; animation-delay: -3s; }
.float-card--speak { bottom: 18%; left: -14%; animation-delay: -5s; }
.float-card--stage { top: 30%; right: -20%; }
.float-card--thread { bottom: 24%; left: -24%; flex-direction: column; align-items: flex-start; gap: 0.15em; }
.float-card--thread span { font-size: 0.8rem; color: var(--teal-2); }
.float-card--bell { top: 20%; right: -16%; }
.bell { display: inline-block; animation: ring 2.4s ease-in-out infinite; transform-origin: top center; }
@keyframes ring { 0%, 60%, 100% { transform: rotate(0); } 65% { transform: rotate(14deg); } 70% { transform: rotate(-12deg); } 75% { transform: rotate(8deg); } 80% { transform: rotate(-6deg); } 85% { transform: rotate(0); } }
@keyframes floaty { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }
@media (max-width: 700px) { .float-card { font-size: 0.8rem; } .float-card--tip, .float-card--speak, .float-card--thread { left: -6%; } .float-card--live, .float-card--stage, .float-card--bell { right: -6%; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + 5vh) 0 8vh; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 30% 20%, rgba(2, 131, 133, 0.35), transparent 60%), radial-gradient(60% 50% at 85% 70%, rgba(0, 206, 209, 0.16), transparent 60%), var(--bg); }
.hero-bg::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s ease; }
.hero-canvas.is-ready { opacity: 1; }
.hero-fallback { position: absolute; inset: 0; display: none; }
.hero.no-webgl .hero-fallback { display: block; }
.hero-fallback i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #62DEDF, #028385 55%, #003233 100%); opacity: 0.85; filter: blur(0.5px); animation: drift 14s ease-in-out infinite; }
.hero-fallback i:nth-child(1) { width: 32vmin; height: 32vmin; left: 55%; top: 10%; }
.hero-fallback i:nth-child(2) { width: 18vmin; height: 18vmin; left: 78%; top: 30%; animation-delay: -4s; }
.hero-fallback i:nth-child(3) { width: 10vmin; height: 10vmin; left: 70%; top: 62%; animation-delay: -8s; }
.hero-fallback i:nth-child(4) { width: 6vmin; height: 6vmin; left: 88%; top: 58%; animation-delay: -2s; }
.hero-fallback i:nth-child(5) { width: 4vmin; height: 4vmin; left: 62%; top: 48%; animation-delay: -6s; }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3vmin, 4vmin); } }

.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: clamp(24px, 5vw, 80px); width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.hero-title { margin: 0 0 1rem; font-size: clamp(3rem, 7.4vw, 6.75rem); line-height: 0.95; letter-spacing: -0.045em; }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .word { display: inline-block; transform: translateY(110%) rotate(3deg); opacity: 0; animation: wordIn 1.1s var(--ease-out) forwards; transform-origin: 0 100%; }
.hero-title .word:nth-child(2) { animation-delay: 0.12s; }
.hero-title .line:nth-child(2) .word { animation-delay: 0.26s; }
@keyframes wordIn { to { transform: none; opacity: 1; } }
.hero-lead { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--ink-2); max-width: 52ch; margin-bottom: 1.6rem; }
.hero-lead strong { color: var(--ink); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.45em 0.9em; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-2); border: 1px solid rgba(0, 206, 209, 0.35); border-radius: 999px; background: rgba(0, 206, 209, 0.06); }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 10px var(--live); }
.hero-visual { position: relative; }
.phone--hero { width: min(380px, 74vw); animation: heroFloat 7s ease-in-out infinite; }
@keyframes heroFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.hero-scroll { position: absolute; left: 50%; bottom: 28px; z-index: 2; width: 26px; height: 42px; margin-left: -13px; border: 1.5px solid var(--line-2); border-radius: 999px; }
.hero-scroll span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--teal); animation: scrollHint 1.8s ease-in-out infinite; }
@keyframes scrollHint { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + 3vh); min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-copy .eyebrow { justify-content: center; }
  .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-cta, .chips { justify-content: center; }
  .hero-visual { margin-top: 3rem; }
  .phone--hero { width: min(300px, 70vw); }
  .hero-scroll { display: none; }
}

/* ---------- feature sections ---------- */
.feature { position: relative; padding: clamp(64px, 10vw, 140px) 0; }
.feature-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 96px); max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.feature--flip .feature-copy { order: 2; }
.feature--flip .feature-visual { order: 1; }
.feature-visual { position: relative; }
.feature h2 { max-width: 12ch; }
@media (max-width: 900px) {
  .feature { padding: clamp(48px, 10vw, 96px) 0; }
  .feature-inner { grid-template-columns: 1fr; }
  .feature--flip .feature-copy { order: 1; }
  .feature--flip .feature-visual { order: 2; }
  .feature-visual { margin-top: 2.5rem; }
  .feature h2 { max-width: none; }
}

/* orbiting audience (live rooms) */
@property --a { syntax: '<number>'; inherits: true; initial-value: 0; }
.orbit { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.orbit-ring { position: absolute; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(0, 206, 209, 0.18); container-type: size; animation: orbitA 28s linear infinite; }
.orbit-ring--1 { width: 96%; }
.orbit-ring--2 { width: 120%; animation-duration: 44s; animation-direction: reverse; }
@keyframes orbitA { to { --a: 360; } }
.orbit-ring .avatar { position: absolute; top: 50%; left: 50%; margin: -17px 0 0 -17px; box-shadow: 0 0 24px -4px var(--glow); transform: rotate(calc((var(--h) + var(--a)) * 1deg)) translateY(-50cqh) rotate(calc((var(--h) + var(--a)) * -1deg)); }
@media (max-width: 900px) { .orbit-ring--1 { width: 92%; } .orbit-ring--2 { display: none; } }
.demo--hand { margin-top: 1.5rem; }
.js-raise.is-on { background: var(--teal); color: #012b2c; border-color: transparent; }
.js-raise .icon, .js-raise svg { transition: transform 0.4s var(--ease-out); }
.js-raise.is-on svg { transform: translateY(-3px) rotate(-12deg); }

/* marquee (groups) */
.marquee { position: absolute; top: 0; left: 0; right: 0; overflow: hidden; padding: 0.9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 0.75rem; width: max-content; animation: marquee 40s linear infinite; }
.marquee-track span { padding: 0.45em 1em; font-size: 0.85rem; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; background: var(--glass); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
.feature--flip { padding-top: clamp(96px, 14vw, 180px); }
.stat-row { display: flex; gap: 2.5rem; margin: 1.5rem 0; }
.stat strong { display: block; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.stat span { font-size: 0.85rem; color: var(--ink-3); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.tile { position: relative; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease-out), border-color 0.3s, background 0.3s; }
.tile:hover { border-color: rgba(0, 206, 209, 0.4); background: var(--glass-2); }
.tile-icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; margin-bottom: 0.6rem; border-radius: 10px; background: rgba(0, 206, 209, 0.12); color: var(--teal-2); }
.tile-icon svg { width: 18px; height: 18px; }
.tile strong { display: block; font-size: 1rem; margin-bottom: 0.15rem; }
.tile span:last-child { font-size: 0.85rem; color: var(--ink-3); line-height: 1.4; }

/* rsvp card (upcoming) */
.rsvp { margin-top: 1.75rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); max-width: 440px; position: relative; overflow: hidden; }
.rsvp-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.8rem; }
.rsvp-time { color: var(--ink-2); font-weight: 500; }
.rsvp-badge { padding: 0.3em 0.7em; border-radius: 999px; border: 1px solid rgba(0, 206, 209, 0.4); color: var(--teal-2); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; font-weight: 600; }
.rsvp h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.rsvp-people { display: flex; align-items: center; margin-bottom: 1.1rem; }
.rsvp-people .avatar { width: 32px; height: 32px; margin-right: -8px; }
.rsvp-usually { margin-left: 1rem; font-size: 0.85rem; color: var(--ink-3); }
.js-rsvp.is-on { background: var(--surface-2); color: var(--ink); }
.rsvp .burst { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-2); pointer-events: none; animation: burst 0.9s var(--ease-out) forwards; }
@keyframes burst { to { transform: translate(var(--bx), var(--by)) scale(0); opacity: 0; } }

/* card stack (moments) */
.stack { position: relative; height: 176px; max-width: 420px; margin-top: 1.75rem; margin-bottom: 2.5rem; }
.stack-card { position: absolute; inset: 0 auto auto 0; width: 100%; padding: 1.1rem 1.2rem; border: 1px solid var(--line-2); border-radius: 20px; background: linear-gradient(160deg, #24211d, #15130f); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); cursor: grab; user-select: none; touch-action: pan-y; transform: translateY(calc((3 - var(--i)) * 14px)) scale(calc(1 - (3 - var(--i)) * 0.05)); transition: transform 0.55s var(--ease-out), opacity 0.4s; z-index: var(--i); }
.stack-card[data-i="1"] { --i: 3; } .stack-card[data-i="2"] { --i: 2; } .stack-card[data-i="3"] { --i: 1; }
.stack-card.is-dragging { transition: none; cursor: grabbing; }
.stack-card.is-out { opacity: 0; }
.stack-card header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.stack-card header span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.stack-card header em { font-style: normal; font-size: 0.8rem; color: var(--ink-3); }
.stack-card footer { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.wave i { flex: 1; height: 30%; border-radius: 2px; background: var(--teal); opacity: 0.85; animation: wave 1.4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 0.07s); }
.wave i:nth-child(2n) { --n: 1; } .wave i:nth-child(3n) { --n: 2; } .wave i:nth-child(5n) { --n: 3; } .wave i:nth-child(7n) { --n: 4; }
@keyframes wave { 0%, 100% { height: 25%; } 50% { height: 95%; } }
.stack-hint { position: absolute; left: 0; right: 0; bottom: -2.2rem; margin: 0; font-size: 0.85rem; color: var(--ink-3); }

/* ---------- money / launchpad ---------- */
.money { position: relative; padding: clamp(64px, 10vw, 140px) 0; }
.money::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 80% 50%, rgba(2, 131, 133, 0.25), transparent 65%); pointer-events: none; }
.money-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 96px); max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.money h2 { max-width: 12ch; }
.money-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.money-list li { display: flex; gap: 1rem; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.money-list strong { flex: 0 0 11rem; color: var(--ink); }
.money-list span { color: var(--ink-3); font-size: 0.95rem; }
.launchpad { position: relative; min-height: 460px; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(0, 206, 209, 0.05), rgba(0, 0, 0, 0.35)); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; }
.launchpad-sky { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 50% at 50% 0%, rgba(0, 206, 209, 0.18), transparent 70%); }
.launchpad-total { position: absolute; top: 1.4rem; left: 1.5rem; }
.launchpad-total > span { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.launchpad-total strong { display: block; white-space: nowrap; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -0.04em; line-height: 1.1; color: var(--ink); }
.launchpad-host { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 1rem 0.6rem 0.6rem; border-radius: 999px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; }
.launchpad-host .avatar { width: 40px; height: 40px; font-size: 1rem; }
.launchpad-host strong { display: block; font-size: 0.95rem; line-height: 1.15; }
.launchpad-host span { display: flex; align-items: center; gap: 0.4em; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--live); }
.launchpad-host.is-hit { animation: hostHit 0.5s var(--ease-out); }
@keyframes hostHit { 30% { transform: translate(-50%, -50%) scale(1.08); } }
.launchpad-toasts { position: absolute; top: 1.4rem; right: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; }
.toast { padding: 0.5em 0.9em; font-size: 0.85rem; border-radius: 999px; background: rgba(0, 206, 209, 0.14); border: 1px solid rgba(0, 206, 209, 0.4); color: var(--ink); animation: toastIn 0.5s var(--ease-out), toastOut 0.5s ease 2.6s forwards; }
@keyframes toastIn { from { transform: translateX(20px); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-8px); opacity: 0; } }
.launchpad-packs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.pack { padding: 0.9em 0.5em; font-size: 1.05rem; font-weight: 600; color: var(--ink); background: var(--glass); border: 1px solid var(--line-2); border-radius: 16px; cursor: pointer; transition: transform 0.25s var(--ease-out), background 0.25s, border-color 0.25s; }
.pack:hover { background: var(--glass-2); border-color: var(--teal); transform: translateY(-3px); }
.pack:active { transform: scale(0.95); }
.pack--hot { background: linear-gradient(135deg, rgba(0, 206, 209, 0.25), rgba(2, 131, 133, 0.25)); border-color: rgba(0, 206, 209, 0.5); }
.launchpad .demo-note { position: relative; margin: 0; }
.rocket { position: absolute; bottom: 110px; left: var(--x, 50%); font-size: 30px; line-height: 1; transform: translateX(-50%); animation: launch 1.5s cubic-bezier(0.3, 0, 0.2, 1) forwards; pointer-events: none; z-index: 3; filter: drop-shadow(0 0 12px rgba(0, 206, 209, 0.8)); }
.rocket::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: 70px; margin-left: -1.5px; background: linear-gradient(180deg, rgba(0, 206, 209, 0.9), transparent); border-radius: 3px; }
@keyframes launch { 0% { transform: translate(-50%, 0) scale(0.7); opacity: 0; } 15% { opacity: 1; transform: translate(-50%, -10px) scale(1); } 100% { transform: translate(calc(-50% + var(--dx, 0px)), -560px) scale(0.9); opacity: 0; } }
.spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--teal-2); pointer-events: none; animation: burst 1s var(--ease-out) forwards; }
.money .amount-pop { position: absolute; font-weight: 600; color: var(--teal-2); pointer-events: none; animation: amountPop 1.2s var(--ease-out) forwards; }
@keyframes amountPop { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-120px); opacity: 0; } }
@media (max-width: 900px) { .money-inner { grid-template-columns: 1fr; } .money h2 { max-width: none; } .launchpad { min-height: 380px; } .money-list strong { flex-basis: 9rem; } }

/* ---------- bento ---------- */
.bento { padding: clamp(64px, 10vw, 140px) 0 0; }
.bento-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.bento h2 { max-width: 16ch; }
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.bento-card { position: relative; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); overflow: hidden; transform-style: preserve-3d; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease-out), border-color 0.3s, background 0.3s; }
.bento-card:hover { border-color: rgba(0, 206, 209, 0.35); background: var(--glass-2); }
.bento-card--wide { grid-column: span 2; }
.bento-card h3 { font-size: 1.35rem; margin: 1.25rem 0 0.4rem; }
.bento-card p { margin: 0; color: var(--ink-3); font-size: 0.95rem; line-height: 1.55; }
.bento-visual { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); }
.tv { position: absolute; inset: 14px; border-radius: 10px; background: linear-gradient(135deg, #0f2a2b, #061313); overflow: hidden; }
.tv::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(0, 206, 209, 0.15) 50%, transparent 100%); animation: sweep 3.5s linear infinite; }
.tv-sync { position: absolute; top: 10px; left: 12px; padding: 0.3em 0.7em; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-2); border: 1px solid rgba(0, 206, 209, 0.4); border-radius: 999px; background: rgba(0, 0, 0, 0.4); }
.tv-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); }
.tv-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 45%; border-radius: 2px; background: var(--teal); animation: progress 6s linear infinite; }
@keyframes sweep { to { transform: translateX(100%); } }
@keyframes progress { from { width: 10%; } to { width: 90%; } }
.bento-visual--rocket { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 14px; }
.rc { padding: 0.45em 0.8em; font-size: 0.8rem; border-radius: 999px; background: rgba(0, 206, 209, 0.14); border: 1px solid rgba(0, 206, 209, 0.35); width: max-content; animation: rcRise 6s ease-in-out infinite; }
.rc--2 { animation-delay: -2s; background: rgba(237, 197, 92, 0.14); border-color: rgba(237, 197, 92, 0.4); } .rc--3 { animation-delay: -4s; }
@keyframes rcRise { 0% { transform: translateY(30px); opacity: 0; } 15%, 70% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
.bento-visual--discover { display: grid; place-items: center; }
.bento-visual--discover span { position: absolute; padding: 0.4em 0.9em; font-size: 0.8rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass); color: var(--ink-2); animation: orbitTag 12s linear infinite; animation-delay: calc(var(--d) * -2s); }
@keyframes orbitTag { from { transform: rotate(0) translateX(calc(48px + var(--d) * 7px)) rotate(0); } to { transform: rotate(360deg) translateX(calc(48px + var(--d) * 7px)) rotate(-360deg); } }
.bento-visual--tools { display: flex; align-items: flex-end; padding: 14px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 100%; flex: 1; }
.bars i { flex: 1; height: calc(var(--v) * 100%); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--teal-2), var(--teal-deep)); transform-origin: bottom; animation: grow 1.2s var(--ease-out) both; animation-delay: calc(var(--v) * 0.4s); }
@keyframes grow { from { transform: scaleY(0); } }
.bars-label { position: absolute; top: 10px; left: 12px; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) { .bento-grid { grid-template-columns: 1fr 1fr; } .bento-card--wide { grid-column: span 2; } }
@media (max-width: 600px) { .bento-grid { grid-template-columns: 1fr; } .bento-card--wide { grid-column: span 1; } }

/* ---------- who ---------- */
.who { padding: clamp(64px, 10vw, 140px) 0 0; }
.who-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.who-card { position: relative; padding: 2rem 1.6rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), transparent); transform-style: preserve-3d; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease-out), border-color 0.3s; }
.who-card:hover { border-color: rgba(0, 206, 209, 0.35); }
.who-num { display: block; margin-bottom: 2.5rem; font-size: 0.8rem; letter-spacing: 0.2em; color: var(--teal-2); }
.who-card h3 { font-size: 1.5rem; }
.who-card p { margin: 0; color: var(--ink-3); }
@media (max-width: 800px) { .who-grid { grid-template-columns: 1fr; } }

/* ---------- final cta ---------- */
.cta { position: relative; margin-top: clamp(64px, 10vw, 140px); padding: clamp(80px, 12vw, 160px) 0; text-align: center; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 100%, rgba(0, 206, 209, 0.22), transparent 70%); pointer-events: none; }
.cta-inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.cta .lead { margin: 0 auto 2rem; }
.cta h2 { font-size: clamp(2.5rem, 7vw, 6rem); }
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; }
.cta-bubbles { position: absolute; left: 50%; top: 50%; width: min(90vw, 900px); transform: translate(-50%, -50%); opacity: 0.12; color: var(--teal); pointer-events: none; }
.cta-bubbles svg { width: 100%; height: auto; animation: spin 90s linear infinite; }
.cta-bubbles circle { transform-origin: center; animation: breathe 6s ease-in-out infinite; }
.cta-bubbles circle:nth-child(2) { animation-delay: -1.5s; } .cta-bubbles circle:nth-child(3) { animation-delay: -3s; } .cta-bubbles circle:nth-child(4) { animation-delay: -4.5s; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .hero-title .word { animation: none; transform: none; opacity: 1; }
  .phone--hero, .float-card, .orbit-ring, .marquee-track, .eq i, .wave i, .rc, .bento-visual--discover span, .tv::before, .tv-bar::after, .cta-bubbles svg, .cta-bubbles circle, .bell { animation: none; }
}