/* Rubidu website, 2026-10-25 redesign: the page is a little Mac desktop (menu bar, windows you can drag,
   stickers), big type that fills in as you scroll, and gradient feature cards. Loaded after site.css,
   whose tokens, forms and sections it keeps. */
:root {
  --bg: #fbfbfd; --surface: #ffffff; --sunk: #f1f2f6; --ink: #0e0f13; --muted: #5d6170;
  --line: rgba(14, 15, 19, .09); --accent: #2f3cf0; --accent-soft: #e6e8ff; --on-accent: #ffffff;
  --teal: #14b8a6; --pink: #f2479b; --ghost: rgba(14, 15, 19, .13);
  --win: rgba(255, 255, 255, .82); --win-line: rgba(14, 15, 19, .1);
  --wall: radial-gradient(circle at 1px 1px, rgba(14, 15, 19, .07) 1px, transparent 0) 0 0 / 22px 22px, #fbfbfd;
  --card-a: linear-gradient(165deg, #1b25c9 0%, #2f3cf0 55%, #6f7bff 100%);
  --card-b: linear-gradient(165deg, #0b7f75 0%, #14b8a6 60%, #7ee7d8 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0e12; --surface: #17181e; --sunk: #1e1f27; --ink: #f2f3f7; --muted: #a2a6b4;
    --line: rgba(242, 243, 247, .1); --accent: #8d96ff; --accent-soft: #23264d; --on-accent: #0d0e12;
    --ghost: rgba(242, 243, 247, .16); --win: rgba(30, 31, 39, .82); --win-line: rgba(242, 243, 247, .12);
    --wall: radial-gradient(circle at 1px 1px, rgba(242, 243, 247, .08) 1px, transparent 0) 0 0 / 22px 22px, #0d0e12;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0e12; --surface: #17181e; --sunk: #1e1f27; --ink: #f2f3f7; --muted: #a2a6b4;
  --line: rgba(242, 243, 247, .1); --accent: #8d96ff; --accent-soft: #23264d; --on-accent: #0d0e12;
  --ghost: rgba(242, 243, 247, .16); --win: rgba(30, 31, 39, .82); --win-line: rgba(242, 243, 247, .12);
  --wall: radial-gradient(circle at 1px 1px, rgba(242, 243, 247, .08) 1px, transparent 0) 0 0 / 22px 22px, #0d0e12;
}
body { background: var(--bg); color: var(--ink); }

/* -- the menu bar ---------------------------------------------------------------------------- */
.mbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--line); font: 500 14px/1 var(--body); }
.mbar-row { display: flex; align-items: center; gap: 22px; height: 44px; padding: 0 18px; max-width: 1400px; margin: 0 auto; }
.mbar-brand { display: flex; gap: 8px; align-items: center; color: var(--ink); text-decoration: none; }
.mbar-brand b { font: 700 15px/1 var(--display); letter-spacing: -.01em; }
.mbar-brand .brand-face { width: 24px; height: 24px; }
.mbar-menu { display: flex; gap: 18px; }
.mbar-menu a { color: var(--ink); opacity: .72; text-decoration: none; }
.mbar-menu a:hover { opacity: 1; }
.mbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--ink); }
.mbar-ico { width: 18px; height: 18px; opacity: .8; }
.mbar-ico + .mbar-ico { width: 24px; }
.mbar-face { font: 700 15px/1 var(--mono); color: var(--teal); letter-spacing: -.04em; }
.mbar-face i { font-style: normal; color: var(--pink); }
.mbar-clock { font-variant-numeric: tabular-nums; opacity: .85; }
.mbar .btn-sm { padding: 7px 14px; border-radius: 999px; }
@media (max-width: 860px) { .mbar-menu, .mbar-ico { display: none; } }

/* -- the desktop ----------------------------------------------------------------------------- */
.desk { position: relative; min-height: min(920px, 100svh); padding: 0; background: var(--wall); overflow: hidden;
  display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.desk-layer { position: absolute; inset: 0; }
.desk-center { position: relative; z-index: 5; text-align: center; padding: 120px 20px 160px; max-width: 820px; pointer-events: none; }
.desk-center > * { pointer-events: auto; }
.desk h1 { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wordmark { font: 800 clamp(84px, 17vw, 232px)/.86 var(--display); letter-spacing: -.065em; color: var(--ink); display: inline-block; }
.wordmark:hover { animation: wobble .6s var(--ease); }
.tagline { font: 650 clamp(20px, 2.4vw, 30px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); max-width: 22ch; }
.desk .lede { margin: 18px auto 26px; max-width: 54ch; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); }
.desk .cta-row { justify-content: center; }
.desk .btn { border-radius: 999px; }
.desk .face-btn { width: 112px; margin: 0 auto 14px; display: block; filter: drop-shadow(0 10px 24px rgba(100,192,181,.18)); }
.desk .bubble { margin: 26px auto 0; }
.desk-hint { margin-top: 18px; font: 500 13px/1 var(--mono); color: var(--muted); opacity: .8; }
.desk .say { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 6; }
@keyframes wobble { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-2.5deg) scale(1.02) } 60% { transform: rotate(1.5deg) } }

.win, .sticker { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r, 0deg)); z-index: 2;
  touch-action: none; user-select: none; cursor: grab; transition: box-shadow .2s, transform .25s var(--ease); }
.win { background: var(--win); border: 1px solid var(--win-line); border-radius: 14px; min-width: 190px;
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 24px 60px -28px rgba(10, 12, 30, .45), 0 2px 6px rgba(10, 12, 30, .06); }
.win.dragging, .sticker.dragging { cursor: grabbing; transform: rotate(0) scale(1.03); box-shadow: 0 36px 80px -30px rgba(10, 12, 30, .55); }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--win-line);
  font: 600 11px/1 var(--mono); color: var(--muted); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.win-bar i:nth-child(2) { background: #febc2e; } .win-bar i:nth-child(3) { background: #28c840; }
.win-bar span { margin-left: 8px; }
.win-body { margin: 0; padding: 12px 14px; font: 600 15px/1.35 var(--body); color: var(--ink); }
.win-body small { display: block; font: 600 11px/1 var(--mono); color: var(--muted); margin-bottom: 6px; }
.w-note { background: #fff2a8; border-color: rgba(0, 0, 0, .06); color: #2a2500; }
.w-note .note { font: 600 14px/1.55 var(--mono); color: #3b3300; }
.timer b { display: block; font: 800 38px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.w-shot { width: 280px; overflow: hidden; } .w-shot img { display: block; width: 100%; height: auto; }
.sticker { font: 800 30px/1 var(--mono); color: var(--accent); background: var(--surface); padding: 10px 14px; border-radius: 16px;
  border: 1px solid var(--win-line); box-shadow: 0 14px 30px -18px rgba(10, 12, 30, .4); }
.sticker.s2 { color: var(--teal); } .sticker.s3 { color: #a855f7; } .sticker.s4 { color: var(--pink); }
.party .sticker { animation: spin 1s var(--ease); }
@keyframes spin { to { transform: rotate(calc(var(--r, 0deg) + 360deg)) } }

/* tic-tac-toe */
.w-ttt { width: 212px; cursor: grab; }
.ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; }
.ttt button { aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--sunk); font: 800 28px/1 var(--display);
  color: var(--ink); cursor: pointer; transition: transform .15s var(--ease), background .15s; }
.ttt button:hover:not(:disabled) { background: var(--accent-soft); transform: scale(1.05); }
.ttt button.x { color: var(--teal); } .ttt button.o { color: var(--pink); }
.ttt button.win { background: var(--accent); color: var(--on-accent); }
.ttt-say { margin: 0; padding: 0 14px 12px; font: 600 12px/1.35 var(--body); color: var(--muted); min-height: 32px; }
.ttt-say button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

@media (max-width: 820px) {
  .desk { display: block; min-height: 0; }
  .desk-center { padding: 72px 18px 28px; }
  .desk-layer { position: relative; display: flex; gap: 14px; overflow-x: auto; padding: 8px 18px 90px; scroll-snap-type: x mandatory; }
  .win, .sticker { position: relative; left: auto; top: auto; flex: 0 0 auto; scroll-snap-align: start; touch-action: pan-x; cursor: default; }
  .sticker { align-self: center; }
  .desk-hint { display: none; }
}

/* -- words that fill in as you scroll --------------------------------------------------------- */
.fill { padding: clamp(90px, 14vw, 200px) 20px; }
.fill-text { max-width: 1100px; margin: 0 auto; font: 760 clamp(34px, 5.6vw, 80px)/1.04 var(--display); letter-spacing: -.035em; }
.fill-text .w { color: var(--ghost); transition: color .25s; }
.fill-text .w.on { color: var(--ink); }
.fill-text em { font-style: normal; }
.fill-text em .w.on { color: var(--accent); }

/* -- try it --------------------------------------------------------------------------------- */
.try { padding: 40px 0 110px; }
.try-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.try h2 { font: 780 clamp(34px, 4.4vw, 58px)/1 var(--display); letter-spacing: -.035em; }
.try-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.try-chips button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px;
  padding: 10px 16px; font: 600 15px/1 var(--body); cursor: pointer; transition: transform .15s var(--ease), border-color .15s; }
.try-chips button:hover { transform: translateY(-2px); border-color: var(--accent); }
.try-mac { background: var(--win); border: 1px solid var(--win-line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(10, 12, 30, .45); min-height: 360px; }
.try-log { padding: 18px; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.msg { margin: 0; padding: 11px 14px; border-radius: 16px; max-width: 86%; font: 500 15px/1.4 var(--body); }
.msg.u { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 5px; }
.msg.r { align-self: flex-start; background: var(--sunk); border-bottom-left-radius: 5px; }
.msg.r .msg-face { width: 22px; height: 22px; vertical-align: -6px; margin-right: 8px; border-radius: 22%; }
.msg.typing::after { content: "• • •"; letter-spacing: 2px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3 } }
@media (max-width: 820px) { .try-grid { grid-template-columns: 1fr; gap: 26px; } }

/* -- feature cards: gradients, white type ---------------------------------------------------- */
.jobs h2, .people h2, .faces h2, .numbers h2, .faq h2, .feedback h2 { font: 780 clamp(34px, 4.6vw, 62px)/1 var(--display); letter-spacing: -.035em; }
.job { background: var(--card-a); color: #fff; border: 0; border-radius: 26px; box-shadow: 0 30px 70px -40px rgba(27, 37, 201, .7);
  transition: transform .3s var(--ease); }
.job:nth-child(even) { background: var(--card-b); box-shadow: 0 30px 70px -40px rgba(11, 127, 117, .7); }
.job:hover { transform: translateY(-6px) rotate(-.4deg); }
.job h3 { color: #fff; font: 760 clamp(24px, 2.4vw, 32px)/1.05 var(--display); letter-spacing: -.02em; }
.job p, .job a { color: rgba(255, 255, 255, .88); }
.job .chips li { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .2); }
.job .transcript { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .2); }
.job img { border-radius: 14px; }

/* -- the analytics choice banner ------------------------------------------------------------- */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 80; max-width: 380px; padding: 16px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(10, 12, 30, .5); font: 500 14px/1.45 var(--body); }
.consent p { margin: 0 0 12px; } .consent-row { display: flex; gap: 8px; justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .wordmark:hover, .party .sticker, .msg.typing::after { animation: none; }
  .win, .sticker, .job, .ttt button, .try-chips button { transition: none; }
}

/* the joke bubble sits beside the face (site.js swaps its line) */
.desk .bubble { position: absolute; top: 112px; left: calc(50% + 74px); right: auto; max-width: 250px; text-align: left; z-index: 6; }
@media (max-width: 1250px) and (min-width: 821px) {
  .wordmark { font-size: clamp(84px, 13vw, 200px); }
  .w-shot, .sticker.s4 { display: none; }
  .w-ttt { --x: calc(100% - 236px) !important; --y: 64% !important; }
  .w-timer { --x: calc(100% - 214px) !important; --y: 14% !important; }
  .w-heard { --y: 12% !important; } .w-note { --y: 66% !important; }
  .sticker.s2 { --x: calc(100% - 110px) !important; --y: 40% !important; }
}
@media (max-width: 820px) {
  .desk .bubble { position: static; margin: 22px auto 0; transform: none; }
}
@media (max-width: 820px) {
  .desk { display: flex; flex-direction: column; align-items: stretch; }
  .desk-layer { width: 100%; box-sizing: border-box; }
  .desk-center { order: 1; }
  .desk-layer { order: 2; align-items: flex-start; padding-bottom: 24px; }
  .desk .say { order: 3; position: static; margin: 0 0 18px; }
}