/* Orbi: a desktop on an ordinary afternoon. The page is the Mac's light, cool desktop; Orbi's cards sit on it
   in their real dark finish, and the orb is the only thing that glows. Color always means status, as in the app:
   pink needs you, cyan is a question or listening, violet is a plan, mint is done. */
:root {
  --desk: #E7EAF0;
  --sheet: #F3F5F8;
  --ink: #171B26;
  --graphite: #4E566A;
  --quiet: #737B90;
  --line: rgba(23, 27, 38, 0.12);

  --panel: #161A2B;
  --panel-raised: rgba(255, 255, 255, 0.07);
  --panel-line: rgba(255, 255, 255, 0.1);
  --panel-ink: #E9ECF8;
  --panel-mist: #9AA3BF;

  --pink: #FF73A1;
  --cyan: #5CD9FF;
  --violet: #8C7DFF;
  --mint: #61EBB3;
  /* The same four, deep enough to read as text on the light desk. */
  --pink-ink: #C8245F;
  --cyan-ink: #0B7EA8;
  --violet-ink: #5140D0;
  --mint-ink: #0D8A60;

  --round: "M PLUS Rounded 1c", ui-rounded, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --page: 70rem;
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--desk);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--round);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--cyan-ink); outline-offset: 3px; border-radius: 6px; }
code { font-family: var(--mono); font-size: 0.88em; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--sheet); padding: 0.5rem 0.75rem; z-index: 10; }

/* Nav */
.nav { display: flex; align-items: center; gap: 2rem; max-width: var(--page); margin: 0 auto; padding: 1.1rem 1.5rem; }
.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.1rem; text-decoration: none; }
.nav-links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-links a { color: var(--graphite); font-size: 0.95rem; text-decoration: none; }
.nav-links a:hover { color: var(--ink); }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--sheet); font-weight: 700; font-size: 1.05rem; text-decoration: none;
  padding: 0.85rem 1.6rem; border-radius: 999px; transition: background 0.2s;
}
.button:hover { background: #2B3142; }
.button.small { padding: 0.45rem 1rem; font-size: 0.92rem; }
.button[aria-disabled="true"] { background: var(--line); color: var(--graphite); cursor: default; }

/* Hero: Orbi asks you something real. */
.hero { max-width: var(--page); margin: 0 auto; padding: 3rem 1.5rem 6rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.scene { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; min-height: 25rem; }

.say {
  position: relative; width: min(34rem, 100%); text-align: left;
  background: var(--panel); color: var(--panel-ink); border-radius: 22px; padding: 1.3rem 1.4rem 1.2rem;
  box-shadow: 0 30px 60px -20px rgba(23, 27, 38, 0.45);
}
.say::after {
  content: ""; position: absolute; left: 50%; bottom: -0.55rem; width: 1.2rem; height: 1.2rem; margin-left: -0.6rem;
  background: var(--panel); transform: rotate(45deg); border-radius: 0 0 4px 0;
}
.say-from { display: flex; align-items: center; gap: 0.5rem; color: var(--panel-mist); font-size: 0.85rem; font-weight: 500; }
.say-line { font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 700; line-height: 1.3; margin-top: 0.45rem; letter-spacing: -0.01em; }
.say-line code { color: var(--cyan); font-size: 0.82em; font-weight: 500; white-space: nowrap; }
.say-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.pill {
  font: 700 0.92rem var(--round); color: var(--panel-ink); background: var(--panel-raised); border: 1px solid var(--panel-line);
  padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer; transition: background 0.15s;
}
.pill:hover { background: rgba(255, 255, 255, 0.13); }
.pill.primary { background: var(--panel-ink); color: var(--panel); border-color: transparent; }
.pill.primary:hover { background: #fff; }

.hero-copy { margin-top: 2.5rem; max-width: 40rem; }
h1 { font-weight: 800; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em; }
.lede { color: var(--graphite); font-size: 1.15rem; margin: 1.3rem auto 0; max-width: 34rem; }
.cta { margin-top: 2rem; }
.cta-note { color: var(--quiet); font-size: 0.88rem; margin-top: 0.7rem; }

/* The orb, drawn with CSS like the app's SwiftUI version. Sized in em so one font-size scales it. */
.orb { position: relative; width: 6.5em; height: 6.5em; flex: none; --glow: var(--cyan); --main: #73C7FF; --deep: #6E54F2; --light: #DEF7FF; }
.orb.big { font-size: clamp(1.15rem, 2.6vw, 1.55rem); }
.orb[data-mood="alert"] { --glow: var(--pink); --main: #FF8E8C; --deep: #EE478F; --light: #FFEBDC; }
.orb[data-mood="happy"] { --glow: var(--mint); --main: #78F2C2; --deep: #22ADB3; --light: #E6FFEE; }
.orb[data-mood="idle"] { --glow: var(--violet); }
.orb::before {
  content: ""; position: absolute; inset: 0.4em; border-radius: 50%; background: var(--glow); filter: blur(1.6em); opacity: 0.7;
  animation: breathe 3.4s ease-in-out infinite;
}
.ring { position: absolute; inset: -0.6em; width: calc(100% + 1.2em); height: calc(100% + 1.2em); animation: spin 40s linear infinite; }
.ring circle { fill: none; stroke: var(--deep); stroke-opacity: 0.4; stroke-width: 1.1; stroke-dasharray: 0.8 3.3; }
.orb[data-mood="alert"] .ring circle { stroke-dasharray: 3 5; stroke-opacity: 0.6; }
.orb-body {
  position: absolute; inset: 0.75em; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--light), var(--main) 45%, var(--deep));
  box-shadow: 0 0.4em 1.1em color-mix(in srgb, var(--deep) 50%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.orb[data-mood="alert"] .orb-body { animation: hop 0.62s ease-in-out infinite; }
.shine { position: absolute; left: 18%; top: 12%; width: 32%; height: 17%; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transform: rotate(-30deg); filter: blur(0.6px); }
.antenna { position: absolute; left: 50%; top: -0.85em; width: 0.18em; height: 0.7em; margin-left: -0.09em; background: rgba(23, 27, 38, 0.35); border-radius: 2px; }
.antenna::before { content: ""; position: absolute; left: 50%; top: -0.4em; width: 0.5em; height: 0.5em; margin-left: -0.25em; border-radius: 50%; background: var(--glow); box-shadow: 0 0 8px var(--glow); }
.eyes { position: absolute; left: 50%; top: 42%; display: flex; gap: 0.95em; transform: translate(calc(-50% + var(--lx, 0px)), calc(-50% + var(--ly, 0px))); }
.eyes i { width: 0.5em; height: 0.92em; border-radius: 0.3em; background: #141233; position: relative; animation: blink 4.3s infinite; }
.eyes i::after { content: ""; position: absolute; left: 0.08em; top: 0.14em; width: 0.17em; height: 0.17em; border-radius: 50%; background: #fff; }
.orb[data-mood="alert"] .eyes i { width: 0.75em; height: 0.75em; border-radius: 50%; animation: none; }
.orb[data-mood="happy"] .eyes i { height: 0.45em; width: 0.75em; background: none; border: 0.22em solid #141233; border-bottom: 0; border-radius: 0.75em 0.75em 0 0; animation: none; }
.orb[data-mood="happy"] .eyes i::after { display: none; }
.cheeks { position: absolute; left: 50%; top: 61%; display: flex; gap: 1.9em; transform: translateX(-50%); }
.cheeks i { width: 0.65em; height: 0.35em; border-radius: 50%; background: rgba(255, 115, 161, 0.5); }
.mouth { position: absolute; left: 50%; top: 62%; width: 0.62em; height: 0.3em; margin-left: -0.31em; border: 0.16em solid rgba(20, 18, 51, 0.8); border-top: 0; border-radius: 0 0 0.6em 0.6em; }
.orb[data-mood="alert"] .mouth { width: 0.42em; height: 0.5em; margin-left: -0.21em; border: 0.15em solid rgba(20, 18, 51, 0.8); border-radius: 50%; }

@keyframes breathe { 50% { opacity: 0.95; transform: scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes hop { 50% { transform: translateY(-5px); } }
@keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(0.12); } }

/* Section type */
h2 { font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.025em; max-width: 20ch; }
h3 { font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.intro { color: var(--graphite); font-size: 1.1rem; margin-top: 1rem; max-width: 36rem; }

/* The afternoon: a real sequence, so it gets times and a rail. */
.day { background: var(--sheet); border-block: 1px solid var(--line); }
.day > * { max-width: var(--page); margin-inline: auto; padding-inline: 1.5rem; }
.day > h2 { padding-top: 6rem; }
.day > .intro { margin-top: 1rem; }
.timeline { list-style: none; margin-top: 3.5rem; padding-bottom: 6rem; }
.moment {
  --tone: var(--pink); --tone-ink: var(--pink-ink);
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 2.5rem;
  position: relative; padding-bottom: 4.5rem;
}
.moment[data-tone="cyan"] { --tone: var(--cyan); --tone-ink: var(--cyan-ink); }
.moment[data-tone="violet"] { --tone: var(--violet); --tone-ink: var(--violet-ink); }
.moment[data-tone="mint"] { --tone: var(--mint); --tone-ink: var(--mint-ink); }
.moment::before { content: ""; position: absolute; left: 5.05rem; top: 0.9rem; bottom: 0; width: 1px; background: var(--line); }
.moment:last-child { padding-bottom: 0; }
.moment:last-child::before { display: none; }
.when { position: relative; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--tone-ink); line-height: 1.6; }
.when::after { content: ""; position: absolute; left: 4.75rem; top: 0.5rem; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 4px var(--sheet), 0 0 12px var(--tone); }
.when small { display: block; font-weight: 500; font-size: 0.8rem; color: var(--quiet); }
.what p { color: var(--graphite); margin-top: 0.5rem; max-width: 30rem; }
.show { display: flex; justify-content: flex-start; align-items: flex-start; gap: 1.1rem; }
/* The character beside each card, the way it sits next to Orbi's cards on your screen. */
.defs { position: absolute; }
.buddy { flex: none; margin-top: 0.4rem; }
.buddy.orb { font-size: 0.62rem; }
.buddy.block { width: 4.2rem; height: 4.2rem; }
.block { --glow: rgba(217, 119, 87, 0.45); filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 8px 12px rgba(23, 27, 38, 0.18)); }
.block[data-mood="alert"] { --glow: rgba(255, 115, 161, 0.75); }
.block[data-mood="plan"] { --glow: rgba(140, 125, 255, 0.75); }
.block[data-mood="happy"] { --glow: rgba(97, 235, 179, 0.8); }
@media (prefers-reduced-motion: no-preference) {
  .buddy.block[data-mood="alert"] { animation: block-hop 1.1s ease-in-out infinite; }
}
@keyframes block-hop { 0%, 55%, 100% { transform: translateY(0) scaleY(1); } 10% { transform: translateY(1px) scaleY(0.94); } 30% { transform: translateY(-7px) scaleY(1.04); } }

/* Orbi's real UI: dark, solid, like the app. */
.card {
  width: min(21rem, 100%); background: var(--panel); color: var(--panel-ink); border-radius: 18px; padding: 1rem;
  box-shadow: 0 24px 48px -22px rgba(23, 27, 38, 0.55); font-size: 0.9rem;
}
.card-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--panel-mist); font-size: 0.82rem; }
.card-head b { font: 600 0.78rem var(--mono); color: var(--panel-ink); }
.command { display: block; background: rgba(0, 0, 0, 0.32); border-radius: 10px; padding: 0.6rem 0.75rem; margin: 0.7rem 0; color: var(--panel-ink); font-size: 0.82rem; }
.command span { color: var(--pink); margin-right: 0.45rem; }
.choice { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.85rem; background: var(--panel-raised); border-radius: 10px; padding: 0.5rem 0.7rem; margin-top: 0.38rem; }
.choice span { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.1); font-size: 0.7rem; flex: none; }
.choice.primary { background: var(--panel-ink); color: var(--panel); }
.choice.primary span { background: rgba(22, 26, 43, 0.12); }
.q { font-weight: 700; font-size: 1rem; margin: 0.55rem 0 0.25rem; }
.option { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--panel-raised); border-radius: 10px; padding: 0.5rem 0.7rem; margin-top: 0.38rem; font-weight: 700; }
.option i { width: 0.85rem; height: 0.85rem; margin-top: 0.25rem; border-radius: 50%; border: 2px solid var(--panel-mist); flex: none; }
.option.on { box-shadow: inset 0 0 0 1px rgba(92, 217, 255, 0.5); }
.option.on i { border: 0.27rem solid var(--cyan); }
.option small { display: block; font-weight: 400; color: var(--panel-mist); font-size: 0.78rem; }
.plan { margin: 0.6rem 0 0.5rem 1.1rem; line-height: 1.75; }
.dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.dot.pink { background: var(--pink); } .dot.cyan { background: var(--cyan); } .dot.violet { background: var(--violet); } .dot.mint { background: var(--mint); }

.bubbles { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.bubble {
  display: flex; align-items: flex-start; gap: 0.55rem; max-width: 24rem; background: var(--panel); color: var(--panel-ink);
  border-radius: 16px; padding: 0.7rem 0.95rem; font-weight: 500; font-size: 0.95rem; line-height: 1.45;
  box-shadow: 0 18px 36px -20px rgba(23, 27, 38, 0.55);
}
.bubble .dot { margin-top: 0.42rem; }
.bubble.you { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); align-self: flex-end; }
.voice { align-items: center; gap: 1.5rem; }
.keycap {
  width: 5.5rem; height: 5.5rem; border-radius: 1.1rem; position: relative; flex: none;
  background: linear-gradient(#FFFFFF, #ECEEF3); box-shadow: 0 7px 0 #C9CDD8, 0 16px 26px rgba(23, 27, 38, 0.18), inset 0 0 0 1px var(--line);
  animation: press 3.2s ease-in-out infinite;
}
.keycap span { position: absolute; left: 0.75rem; top: 0.5rem; font-weight: 700; font-size: 1.1rem; color: var(--graphite); }
.keycap small { position: absolute; right: 0.75rem; bottom: 0.5rem; font-size: 1rem; opacity: 0.55; }
@keyframes press {
  0%, 30%, 100% { transform: translateY(0); box-shadow: 0 7px 0 #C9CDD8, 0 16px 26px rgba(23, 27, 38, 0.18), inset 0 0 0 1px var(--line); }
  38%, 78% { transform: translateY(5px); box-shadow: 0 2px 0 #C9CDD8, 0 6px 12px rgba(23, 27, 38, 0.15), 0 0 0 3px rgba(92, 217, 255, 0.55); }
}

/* Works with: one line per tool, saying plainly what Orbi can do there. */
.works { max-width: var(--page); margin: 0 auto; padding: 6rem 1.5rem 0; }
.tools { margin-top: 2.5rem; border-top: 2px solid var(--ink); }
.tools > div { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.tools dt { font-weight: 700; }
.tools dd { margin: 0; color: var(--graphite); max-width: 40rem; }
.works .note { color: var(--quiet); font-size: 0.95rem; margin-top: 1.2rem; }
@media (max-width: 700px) { .tools > div { grid-template-columns: 1fr; gap: 0.25rem; } }

/* Characters: the two avatars side by side. */
.characters { max-width: var(--page); margin: 0 auto; padding: 6rem 1.5rem 0; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; margin-top: 2.5rem; }
.pair figure { display: flex; gap: 1.5rem; align-items: center; }
.pair .orb { font-size: 0.95rem; }
.pair .block { width: 7rem; height: 7rem; flex: none; filter: drop-shadow(0 10px 18px rgba(217, 119, 87, 0.35)); }
.pair figcaption { color: var(--graphite); }
.pair figcaption strong { color: var(--ink); }
.characters .note { color: var(--quiet); margin-top: 2rem; }
@media (prefers-reduced-motion: no-preference) {
  .block { animation: block-bob 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
}
@keyframes block-bob { 50% { transform: translateY(-3px) scaleY(1.02); } }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

/* Privacy: a plain ledger, both sides told straight. */
.privacy, .install, .faq { max-width: var(--page); margin: 0 auto; padding: 6rem 1.5rem 0; }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.5rem; border-top: 2px solid var(--ink); }
.ledger > div { padding: 1.4rem 2rem 1.6rem 0; }
.ledger > div + div { border-left: 1px solid var(--line); padding-left: 2rem; }
.ledger h3 { display: flex; align-items: center; gap: 0.55rem; }
.ledger > div:first-child h3::before, .ledger > div + div h3::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.ledger > div:first-child h3::before { background: var(--mint); }
.ledger > div + div h3::before { background: var(--quiet); }
.ledger ul { list-style: none; padding: 0; margin-top: 0.9rem; }
.ledger li { color: var(--graphite); padding: 0.6rem 0; border-top: 1px solid var(--line); }
.safety { color: var(--graphite); max-width: 46rem; margin-top: 2rem; }

/* Install: three steps in order. */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.steps li { counter-increment: step; color: var(--graphite); border-top: 1px solid var(--line); padding-top: 1rem; }
.steps li::before { content: counter(step); display: block; font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--ink); margin-bottom: 0.8rem; }
.steps b { display: block; color: var(--ink); font-size: 1.1rem; margin-bottom: 0.25rem; }
.install .cta { margin-top: 2.5rem; }

.faq { padding-bottom: 6rem; }
.faq details { max-width: 46rem; }
details { border-bottom: 1px solid var(--line); padding: 1.05rem 0; }
details:first-of-type { margin-top: 1.5rem; }
summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--quiet); font-weight: 400; font-size: 1.3rem; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { color: var(--graphite); margin-top: 0.7rem; }

.footer { border-top: 1px solid var(--line); padding: 2rem 1.5rem 3rem; text-align: center; color: var(--quiet); font-size: 0.88rem; }

/* Demo outcome */
.again { font: 700 0.92rem var(--round); color: var(--cyan); background: none; border: 0; padding: 0; cursor: pointer; }
.again:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav .button { margin-left: auto; }
  .moment { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.2rem 1.5rem; padding-bottom: 3.5rem; }
  .moment::before { left: 3.3rem; }
  .when::after { left: 3rem; }
  .show { grid-column: 2; }
  .ledger, .steps { grid-template-columns: 1fr; }
  .ledger > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .hero { padding-top: 1.5rem; }
  .scene { min-height: 0; }
  .moment { grid-template-columns: 1fr; }
  .moment::before, .when::after { display: none; }
  .show { grid-column: 1; }
  .voice { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}