/* muunu.ai — the app's look: warm canvas, violet accent, Sora + Manrope. */
:root {
  --canvas: #f5f2ed;
  --surface: #ffffff;
  --ink: #1c1917;
  --muted: #6b645c;
  --line: #e7e1d8;
  --accent: #7a3cf0;
  --accent-ink: #ffffff;
  --accent-soft: #efe7ff;
  --sky: #47bfff;
  --radius: 14px;
  --shadow: 0 1px 2px rgb(28 25 23 / 5%), 0 8px 30px rgb(28 25 23 / 6%);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #15131a;
    --surface: #1e1b24;
    --ink: #f4f1fa;
    --muted: #a8a1b3;
    --line: #2f2a38;
    --accent: #a07bff;
    --accent-ink: #120d1f;
    --accent-soft: #2a2140;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 30px rgb(0 0 0 / 25%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
/* Hidden means hidden, whatever display a rule below gives it. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 17px/1.6 "Manrope", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .wordmark { font-family: "Sora", system-ui, sans-serif; line-height: 1.15; }
a { color: var(--accent); }
main { overflow-x: clip; }

.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--canvas) 85%, transparent);
  backdrop-filter: blur(10px);
}
.wordmark { font-size: 26px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.wordmark .dot { color: var(--accent); }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font: 600 16px/1 "Manrope", system-ui, sans-serif;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
.button:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.button-small { padding: 9px 16px; font-size: 15px; }
.button-large { padding: 15px 28px; font-size: 17px; }
.button-quiet { background: transparent; color: var(--ink); border: 1px solid var(--line); }

.hero {
  position: relative;
  max-width: 880px; margin: 0 auto;
  padding: clamp(56px, 12vw, 120px) 16px clamp(48px, 9vw, 96px);
  text-align: center;
}
.glow {
  position: absolute; inset: 0 -20% auto; height: 120%; z-index: -1;
  background:
    radial-gradient(40% 50% at 35% 35%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(30% 40% at 70% 30%, color-mix(in srgb, var(--sky) 18%, transparent), transparent 70%);
  filter: blur(20px);
}
.eyebrow { margin: 0 0 14px; color: var(--accent); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(38px, 7vw, 68px); letter-spacing: -0.035em; }
.tagline { margin: 18px 0 0; font-family: "Sora", system-ui, sans-serif; font-size: 20px; color: var(--muted); }
.tagline em { color: var(--ink); font-style: normal; font-weight: 600; }
.lead { max-width: 640px; margin: 18px auto 32px; color: var(--muted); font-size: clamp(17px, 2.2vw, 19px); }

.section { max-width: 1080px; margin: 0 auto; padding: clamp(40px, 7vw, 72px) clamp(16px, 4vw, 40px); }
.section > h2 { margin: 0 0 28px; font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.02em; text-align: center; }

.audiences { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.audience {
  padding: 22px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.audience h3 { margin: 0 0 6px; font-size: 18px; }
.audience p { margin: 0; color: var(--muted); font-size: 15.5px; }

.features { display: grid; gap: 28px 32px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature h3 { margin: 12px 0 6px; font-size: 19px; }
.feature p { margin: 0; color: var(--muted); }
.feature-mark {
  display: block; width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--sky)));
}

.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #000; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.shots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 18px; }
.shots img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }

.waitlist .card {
  max-width: 560px; margin: 0 auto; padding: clamp(24px, 5vw, 40px);
  border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.waitlist h2 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.02em; }
.muted { color: var(--muted); margin: 0 0 22px; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
input, select {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--canvas); color: var(--ink);
  font: 16px "Manrope", system-ui, sans-serif;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-notice { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0; color: #c2410c; font-weight: 600; font-size: 15px; }
form .button { margin-top: 6px; width: 100%; }
.call { margin-top: 20px; padding: 18px; border-radius: 12px; background: var(--accent-soft); }
.call p { margin: 0 0 12px; font-weight: 600; }

.faq { max-width: 760px; }
details { border-bottom: 1px solid var(--line); padding: 16px 2px; }
summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { margin: 10px 0 0; color: var(--muted); }

.legal { max-width: 720px; margin: 0 auto; padding: 48px 16px 64px; }
.legal h1 { font-size: clamp(30px, 5vw, 42px); margin: 0 0 4px; }
.legal h2 { font-size: 21px; margin: 30px 0 6px; }

.footer {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center;
  max-width: 1080px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 40px;
  color: var(--muted); font-size: 14.5px; border-top: 1px solid var(--line);
}
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer a, .linklike { color: var(--muted); text-decoration: none; }
.footer a:hover, .linklike:hover { color: var(--ink); }
.linklike { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20;
  max-width: 520px; margin: 0 auto; padding: 16px 18px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 15px;
}
.consent p { margin: 0; flex: 1 1 240px; }
.consent-actions { display: flex; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}

/* The two halves: run your community, find your people. */
.halves { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.half {
  padding: clamp(24px, 4vw, 36px); border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.half-find {
  background:
    radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--sky) 14%, transparent), transparent 70%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--surface);
}
.half .eyebrow { margin-bottom: 8px; }
.half h2 { margin: 0 0 6px; font-size: clamp(26px, 3.4vw, 32px); letter-spacing: -0.02em; }
.half .muted { margin-bottom: 18px; }
.points { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.points li { position: relative; padding-left: 28px; }
.points li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--sky)));
}

/* How finding your people works. */
.discovery { text-align: center; }
.ask {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 auto 30px;
  padding: 14px 22px; border-radius: 999px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-family: "Sora", system-ui, sans-serif; font-weight: 600; font-size: clamp(15px, 2.2vw, 19px); text-align: left;
}
.ask-mark { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); text-align: left; }
.steps li { padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.steps h3 { margin: 12px 0 6px; font-size: 19px; }
.steps p { margin: 0; color: var(--muted); }
.step-number {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font: 700 16px "Sora", system-ui, sans-serif;
}
.note { max-width: 620px; margin: 24px auto 0; color: var(--muted); font-size: 15px; }

/* The box around both halves: the AI that powers them. */
.platform {
  position: relative; padding: clamp(18px, 3vw, 28px); border-radius: 30px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    color-mix(in srgb, var(--accent-soft) 45%, var(--canvas));
}
.platform-label {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 4px;
  font: 700 15px "Sora", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.spark {
  width: 18px; height: 18px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--sky));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.platform-text { margin: 0 auto 20px; max-width: 720px; text-wrap: balance; text-align: center; color: var(--muted); }
.points li { display: grid; gap: 2px; }
.points li strong { font-family: "Sora", system-ui, sans-serif; font-size: 16.5px; }
.points li span { color: var(--muted); font-size: 15.5px; }
.points li::before { top: .35em; }
/* Titles on one line each, so both lists start level. */
.half h2 { font-size: clamp(24px, 2.4vw, 28px); }
/* Both cards share their rows — title, intro, list — so they line up
   whatever the width. */
.halves { grid-template-rows: auto auto 1fr; }
.half { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.half > h2 { align-self: end; }
.half > .muted { align-self: start; }

/* The brand, big: muunu. — life's better. */
.lockup { margin: 0 0 clamp(28px, 5vw, 44px); }
.lockup-name {
  margin: 0; font: 700 clamp(76px, 15vw, 150px)/0.95 "Sora", system-ui, sans-serif; letter-spacing: -0.055em;
  background: linear-gradient(135deg, var(--ink) 35%, color-mix(in srgb, var(--accent) 80%, var(--ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lockup-name .dot { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.lockup-tagline {
  margin: clamp(6px, 1.4vw, 14px) 0 0; font: 600 clamp(26px, 4.4vw, 44px)/1.1 "Sora", system-ui, sans-serif;
  letter-spacing: -0.02em; color: var(--accent);
}
.hero h1 { font-size: clamp(30px, 4.8vw, 50px); }
.hero h1, .lead { text-wrap: balance; }

@media (min-width: 720px) {
  /* Exactly two equal columns. */
  .halves { grid-template-columns: 1fr 1fr; }
}

/* The brand video: plays once, holds on muunu. / life's better together. */
.brand-video { max-width: 920px; margin: 0 auto clamp(20px, 4vw, 36px); }
.brand-video video {
  display: block; width: 100%; aspect-ratio: 1600 / 644; height: auto;
  /* Its own card: rounded, a soft shadow — the video's white is its own. */
  border-radius: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 1px 2px rgb(28 25 23 / 6%), 0 18px 50px rgb(28 25 23 / 10%);
  background: #0f0d17;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Each half's title and intro, centered; its list stays left-aligned. */
.half > h2, .half > .muted { text-align: center; text-wrap: balance; }
/* The intro on two set lines, where there's room for them. */
@media (min-width: 820px) {
  .lead { max-width: 800px; text-wrap: initial; }
  .lead-line { display: block; white-space: nowrap; }
}
/* The note under how discovery works: one line, where there's room. */
@media (min-width: 820px) { .note { max-width: none; white-space: nowrap; } }

/* --- Movement -------------------------------------------------------------
   Only with html.motion (base.html: not for people who've asked for less).
   The hero rises in on load; the rest rises in as it scrolls into view
   (site.js adds .in), each group staggered by --d. */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }

@keyframes rise { from { opacity: 0; translate: 0 22px; } }
@keyframes drift {
  from { transform: translate3d(-4%, -1%, 0) scale(1); }
  to { transform: translate3d(4%, 3%, 0) scale(1.1); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 6px var(--accent-soft), 0 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent); }
  100% { box-shadow: 0 0 0 6px var(--accent-soft), 0 0 0 16px transparent; }
}
@keyframes twinkle { 50% { scale: 1.25; rotate: 45deg; } }
@keyframes pop { from { scale: .4; opacity: 0; } 70% { scale: 1.12; } }
@keyframes caret { 50% { opacity: 0; } }

.motion .hero > :not(.glow) { animation: rise .9s var(--ease-out) both; }
.motion .hero > :nth-child(2) { animation-delay: .05s; }
.motion .hero > :nth-child(3) { animation-delay: .25s; }
.motion .hero > :nth-child(4) { animation-delay: .35s; }
.motion .hero > :nth-child(5) { animation-delay: .45s; }
.motion .hero > :nth-child(6) { animation-delay: .55s; }
.motion .glow { animation: drift 16s ease-in-out infinite alternate; }
.motion .spark { animation: twinkle 3.6s ease-in-out infinite; }
.motion .ask-mark { animation: pulse 2.2s ease-out infinite; }

/* What rises in as it's reached. Opacity and translate for the reveal;
   transform stays free for hovering. */
.motion :is(.section > h2, .platform-label, .platform-text, .half, .points li, .ask, .steps li, .note, .audience, .waitlist .card, .faq details) {
  transition:
    opacity .8s var(--ease-out) var(--d, 0s),
    translate .8s var(--ease-out) var(--d, 0s),
    transform .25s ease,
    box-shadow .25s ease;
}
.motion :is(.section > h2, .platform-label, .platform-text, .half, .points li, .ask, .steps li, .note, .audience, .waitlist .card, .faq details):not(.in) {
  opacity: 0;
  translate: 0 28px;
}
/* The two halves meet in the middle. */
.motion .half:nth-child(1):not(.in) { translate: -40px 0; }
.motion .half:nth-child(2):not(.in) { translate: 40px 0; }
.motion .points li:not(.in) { translate: 0 12px; }
.motion .steps li.in .step-number { animation: pop .6s var(--ease-out) calc(var(--d, 0s) + .25s) both; }
.motion details[open] p { animation: rise .4s var(--ease-out); }

/* A lift under the pointer. */
@media (hover: hover) {
  .audience:hover, .steps li:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(28 25 23 / 6%), 0 16px 40px rgb(28 25 23 / 10%); }
}
.audience, .steps li { transition: transform .25s ease, box-shadow .25s ease; }

/* The example, typed out as it's reached (site.js): the full text keeps
   its place (and is what screen readers read); the typing shows on top. */
.ask-text { position: relative; }
.ask-text.typing { color: transparent; }
.ask-typed { position: absolute; inset: 0; color: var(--ink); }
.ask-typed::after {
  content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  vertical-align: -0.15em; background: var(--accent); animation: caret 1s steps(1) infinite;
}

/* How far down the page they are: a thin line under the header. */
@supports (animation-timeline: scroll()) {
  @keyframes progress { from { scale: 0 1; } to { scale: 1 1; } }
  .motion .top::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--sky));
    transform-origin: 0 50%;
    animation: progress linear both;
    animation-timeline: scroll(root);
  }
}