/* Munchy Mates website. Light, Apple-style product page with one night section. */
:root {
  --bg: #fbfbfd;
  --bg-2: #f5f5f7;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, .08);
  --card: #ffffff;
  --pink: #ff5f9e;
  --peach: #ff9a62;
  --lilac: #9b7bff;
  --grad: linear-gradient(100deg, #ff5f9e 0%, #ff8a6b 45%, #b07cff 100%);
  --shadow: 0 30px 80px -30px rgba(30, 20, 60, .28), 0 8px 24px -12px rgba(30, 20, 60, .14);
  --radius: 28px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 17px; line-height: 1.47; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -.035em; line-height: 1.05; font-weight: 700; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ───── Nav ───── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 52px;
  background: rgba(251, 251, 253, .72); backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.scrolled { border-color: var(--line); }
.nav-in { max-width: 1080px; height: 100%; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.brand img { border-radius: 6px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 13px; color: #424245; }
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  font-size: 13px; font-weight: 600; color: #fff; background: var(--ink); padding: 6px 14px;
  border-radius: 999px; transition: transform .2s var(--ease), background .2s;
}
.nav-cta:hover { background: #000; transform: scale(1.04); }

/* ───── Shared ───── */
.section { padding: 140px 22px; max-width: 1180px; margin: 0 auto; text-align: center; }
.eyebrow { margin: 0 0 14px; font-size: 19px; font-weight: 600; color: var(--pink); letter-spacing: -.01em; }
.section h2 { font-size: clamp(40px, 7vw, 80px); }
.lede { max-width: 640px; margin: 22px auto 0; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.4; color: var(--muted); font-weight: 450; }
.fine { font-size: 13px; color: var(--muted); margin: 18px 0 0; }
.btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 17px; border-radius: 999px; transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.btn svg { width: 19px; height: 19px; }
.btn-primary { color: #fff; background: var(--grad); padding: 14px 26px; box-shadow: 0 12px 30px -10px rgba(255, 95, 158, .6); }
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 40px -12px rgba(255, 95, 158, .7); }
.btn-primary.big { font-size: 19px; padding: 17px 32px; }
.btn-off { color: var(--muted); background: #ececf0; box-shadow: none; cursor: default; padding: 14px 24px; }
.btn-off:hover { transform: none; box-shadow: none; }
.mac-only { display: none; max-width: 460px; margin: 18px auto 0; padding: 12px 16px; border-radius: 14px; background: #fff4e5; color: #8a5300; font-size: 15px; line-height: 1.4; }
.not-mac .mac-only { display: block; }
.btn-link { color: #0066cc; padding: 14px 6px; }
.btn-link:hover { text-decoration: underline; }

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ───── Sprites ───── */
.sprite {
  --h: 120px; height: var(--h); width: calc(var(--h) * 144 / 156);
  background-repeat: no-repeat; background-size: calc(var(--h) * 144 / 156 * 8) calc(var(--h) * 22);
  image-rendering: auto; flex: none;
}
.sprite.big { --h: 200px; }

/* ───── Hero ───── */
.hero { padding: 150px 22px 40px; text-align: center; max-width: 980px; margin: 0 auto; }
.hero h1 { font-size: clamp(48px, 9vw, 104px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.hero .eyebrow { font-size: 21px; }
.hero-cta { margin-top: 34px; display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ───── Mac + demo ───── */
.demo { padding: 40px 16px 120px; max-width: 1180px; margin: 0 auto; overflow-x: clip; }
.mac { max-width: 1060px; margin: 0 auto; }
.mac-bezel { background: #0d0d0f; border-radius: 22px 22px 6px 6px; padding: 14px 14px 18px; box-shadow: var(--shadow), inset 0 0 0 1.5px #3a3a3f; }
.mac-base { height: 16px; margin: 0 -5%; background: linear-gradient(#e3e4e8, #b9bbc1 60%, #8f9198); border-radius: 0 0 18px 18px; position: relative; }
.mac-base span { position: absolute; left: 50%; top: 0; width: 15%; height: 6px; transform: translateX(-50%); background: #a5a7ad; border-radius: 0 0 8px 8px; }

.screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; container-type: size;
  user-select: none; -webkit-user-select: none; touch-action: pan-y; color: #1d1d1f;
}
.wall { position: absolute; inset: 0; transition: background 1.2s ease, filter 1.2s; }
.screen[data-time="morning"] .wall { background: radial-gradient(120% 90% at 15% 10%, #ffe1ec 0%, transparent 55%), radial-gradient(90% 90% at 90% 20%, #d9e6ff 0%, transparent 60%), radial-gradient(120% 120% at 50% 110%, #ffd2b8 0%, #f7e8ff 55%, #eef4ff 100%); }
.screen[data-time="afternoon"] .wall { background: radial-gradient(120% 90% at 80% 0%, #fff0c9 0%, transparent 55%), radial-gradient(100% 100% at 0% 100%, #ffc7a6 0%, transparent 60%), linear-gradient(160deg, #ffe9d6, #ffd8e6 60%, #e9dcff); }
.screen[data-time="night"] .wall,
.screen[data-time="midnight"] .wall { background: radial-gradient(90% 70% at 80% 10%, #4b3b8f 0%, transparent 60%), radial-gradient(120% 120% at 10% 100%, #2b2a6b 0%, transparent 60%), linear-gradient(180deg, #17183b, #2a2056 70%, #3b2a64); }
.screen[data-time="asleep"] .wall { background: radial-gradient(70% 50% at 80% 12%, rgba(130, 120, 220, .35) 0%, transparent 60%), linear-gradient(180deg, #0b0c22, #15163a 70%, #201a42); }
.screen[data-time="night"], .screen[data-time="midnight"], .screen[data-time="asleep"] { color: #fff; }
.screen.away .stage { opacity: 0; transform: translateY(20px); pointer-events: none; }

/* menu bar */
.menubar {
  position: absolute; inset: 0 0 auto; height: 3.9cqh; min-height: 18px; padding: 0 1.6cqw; display: flex; align-items: center;
  justify-content: space-between; font-size: max(10px, 1.55cqh); background: rgba(255, 255, 255, .38);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); z-index: 20;
}
.screen[data-time="night"] .menubar, .screen[data-time="midnight"] .menubar, .screen[data-time="asleep"] .menubar { background: rgba(20, 20, 40, .35); }
.mb-left, .mb-right { display: flex; align-items: center; gap: 1.6cqw; white-space: nowrap; }
.mb-left b { font-weight: 700; }
.apple { width: max(9px, 1.35cqh); height: auto; }
.paw { border: 0; background: none; padding: 2px 4px; border-radius: 4px; cursor: pointer; display: grid; place-items: center; }
.paw svg { width: max(12px, 1.9cqh); height: max(12px, 1.9cqh); }
.paw:hover, .paw[aria-expanded="true"] { background: rgba(127, 127, 127, .25); }
.batt { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.batt-icon { position: relative; width: max(20px, 3cqh); height: max(10px, 1.45cqh); border: 1.2px solid currentColor; border-radius: 3px; opacity: .9; padding: 1px; }
.batt-icon::after { content: ""; position: absolute; right: -3.5px; top: 30%; width: 2px; height: 40%; background: currentColor; border-radius: 0 1px 1px 0; }
.batt-icon i { display: block; height: 100%; width: 100%; background: currentColor; border-radius: 1.5px; transition: width .4s, background .4s; }
.batt.low .batt-icon i { background: #ff3b30; }
.batt-icon .bolt { position: absolute; inset: 0; margin: auto; width: 50%; height: 85%; color: #fff; display: none; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)); }
.batt.charging .bolt { display: block; }
.batt.charging .batt-icon i { background: #34c759; }

.pawmenu {
  position: absolute; top: calc(100% + 4px); right: 12cqw; min-width: 190px; padding: 5px; border-radius: 10px;
  background: rgba(246, 246, 248, .86); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); color: #1d1d1f;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .15); font-size: 13px; z-index: 30;
}
.pawmenu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 4px 10px; border-radius: 5px; cursor: pointer; }
.pawmenu button:hover { background: #0a84ff; color: #fff; }
.pawmenu hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .1); margin: 4px 6px; }

/* desktop files */
.files { position: absolute; top: 7cqh; right: 2.2cqw; display: grid; gap: 2.2cqh; justify-items: center; z-index: 5; }
.file {
  width: 15cqh; display: grid; justify-items: center; gap: .6cqh; cursor: grab; touch-action: none;
  font-size: max(9px, 1.4cqh); text-align: center; line-height: 1.15; transition: opacity .25s, transform .25s;
}
.file svg { width: 6cqh; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.file span { padding: 1px 4px; border-radius: 4px; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); color: #fff; overflow-wrap: anywhere; }
.screen[data-time="morning"] .file span, .screen[data-time="afternoon"] .file span { color: #1d1d1f; text-shadow: 0 1px 1px rgba(255, 255, 255, .6); }
.file.dragging { position: fixed; z-index: 100; cursor: grabbing; pointer-events: none; transform: scale(1.08); }
.file.dragging span { background: #0a84ff; color: #fff; text-shadow: none; }
.file.gone { opacity: 0; transform: scale(.2); }
.file.new { animation: pop .6s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }

/* settings window */
.win {
  position: absolute; left: 50%; top: 16cqh; transform: translateX(-50%); width: min(300px, 62cqw); z-index: 25;
  background: rgba(246, 246, 248, .94); color: #1d1d1f; border-radius: 12px; overflow: hidden; font-size: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .2); backdrop-filter: blur(30px);
}
.win-bar { display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; cursor: pointer; }
.win-bar i:nth-child(2) { background: #febc2e; } .win-bar i:nth-child(3) { background: #28c840; }
.win-bar span { margin: 0 auto; font-weight: 600; padding-right: 50px; }
.win-body { padding: 12px 16px 16px; display: grid; gap: 10px; }
.win-body label { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.win-body label.row { justify-content: flex-start; color: #555; }
.win-body input[type=range] { width: 120px; accent-color: var(--pink); }

/* stage + pet */
.stage {
  --top: .03; position: absolute; right: 13cqw; bottom: 12.5cqh; z-index: 10; display: grid; justify-items: center;
  transition: opacity .5s, transform .5s var(--ease);
}
.stage.carried { z-index: 30; }
.stage.carried .pet { cursor: grabbing; transform: scale(1.04); filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .22)); }
.pet { --h: 22cqh; cursor: grab; outline: none; touch-action: none; transition: transform .2s var(--ease), filter .2s; transition: --h .3s; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .16)); }
.screen[data-size="0"] .pet { --h: 18cqh; } .screen[data-size="2"] .pet { --h: 31cqh; }
.pet:focus-visible { outline: 2px solid #0a84ff; outline-offset: 4px; border-radius: 12px; }

.bubble {
  position: absolute; bottom: calc(100% - var(--top) * 100% + 1.4cqh + 4px); left: 50%; transform: translate(-50%, 8px) scale(.9); transform-origin: bottom center;
  width: max-content; max-width: min(36cqw, 300px); padding: 1.1cqh 1.6cqh; border-radius: 16px; background: #fff; color: #1d1d1f;
  font-size: max(11px, 1.9cqh); font-weight: 550; line-height: 1.3; text-align: center; opacity: 0; pointer-events: none;
  box-shadow: 0 8px 24px rgba(40, 20, 80, .18), 0 0 0 .5px rgba(0, 0, 0, .06); transition: opacity .3s, transform .35s var(--ease);
}
.bubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fff; }

/* First-visit tip next to the pet, and a soft pulse so people know she's interactive. */
.coach {
  position: absolute; right: calc(100% + 1.2cqh); top: 42%; transform: translate(8px, -50%); opacity: 0; pointer-events: none;
  width: max-content; max-width: 32cqw; padding: 1.1cqh 1.5cqh; border-radius: 14px; background: #1d1d1f; color: #fff;
  font-size: max(11px, 1.8cqh); font-weight: 600; line-height: 1.25; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: opacity .4s, transform .5s var(--ease);
}
.coach::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-left-color: #1d1d1f; }
.coach small { display: block; margin-top: 3px; font-weight: 500; opacity: .72; font-size: .82em; }
.coach .hand { display: inline-block; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(4px) rotate(-8deg); } }
.stage.coaching .coach { opacity: 1; transform: translate(0, -50%); }
.stage.coaching .pet { animation: beckon 1.6s ease-in-out infinite; }
@keyframes beckon { 0%, 100% { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .16)) drop-shadow(0 0 0 rgba(255, 95, 158, 0)); } 50% { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .16)) drop-shadow(0 0 12px rgba(255, 95, 158, .85)); } }
.demo-cap { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 0 rgba(52, 199, 89, .6); animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); } }
.bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.bubble.dream { background: #ece9ff; font-style: italic; color: #4b3f8f; }
.bubble.dream::after { border-top-color: #ece9ff; }

.heart { position: absolute; pointer-events: none; z-index: 11; font-size: max(12px, 2.6cqh); animation: float 1.6s var(--ease) forwards; }
@keyframes float { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -11cqh) scale(1.1) rotate(var(--r)); } }
.zz { position: absolute; pointer-events: none; z-index: 11; color: #bdb4ff; font-weight: 800; font-size: max(11px, 2.2cqh); animation: zz 2.6s ease-out forwards; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(4cqh, -9cqh) scale(1.2); } }

/* PDF tool ring */
.ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 12; }
.ring button {
  position: absolute; transform: translate(-50%, -50%) scale(.3); opacity: 0; white-space: nowrap; border: 0; cursor: pointer;
  padding: .9cqh 1.5cqh; border-radius: 999px; font-size: max(10px, 1.55cqh); font-weight: 600; color: #1d1d1f;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); box-shadow: 0 6px 18px rgba(40, 20, 80, .2), 0 0 0 .5px rgba(0, 0, 0, .08);
  transition: transform .45s var(--ease), opacity .3s;
}
.ring.open button { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); }
.ring button:hover { background: var(--pink); color: #fff; }

/* dock */
.dock {
  position: absolute; left: 50%; bottom: 1.2cqh; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 1cqh;
  padding: 1cqh 1.2cqh; border-radius: 2.6cqh; z-index: 8; background: rgba(255, 255, 255, .3);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .4) inset, 0 10px 30px rgba(0, 0, 0, .12);
}
.app { width: 7cqh; height: 7cqh; border-radius: 1.7cqh; flex: none; box-shadow: 0 2px 5px rgba(0, 0, 0, .18); transition: transform .2s var(--ease); }
.app:hover { transform: translateY(-.8cqh) scale(1.1); }
.a1 { background: linear-gradient(160deg, #6ec8ff, #1f7bff); }
.a2 { background: linear-gradient(160deg, #ffffff, #e5e7ec); position: relative; }
.a2::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: .5cqh solid #1f7bff; border-top-color: #ff3b30; }
.a3 { background: linear-gradient(160deg, #7ef07d, #1fbf4e); }
.a4 { background: linear-gradient(160deg, #ffcf5c, #ff8a00); }
.a5 { background: linear-gradient(160deg, #fd6c9e, #e2246a); }
.a6 { background: linear-gradient(160deg, #b28cff, #6b3cff); }
.dock-sep { width: 1px; height: 6.4cqh; background: rgba(0, 0, 0, .18); margin: 0 .4cqh; align-self: center; }
.trash { box-shadow: none; display: grid; place-items: center; }
.trash svg { width: 100%; height: 100%; }
.trash .trash-paper { opacity: 0; transition: opacity .3s; }
.trash.full .trash-paper { opacity: 1; }
.trash.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: translateY(-1.4cqh) scale(1.12); } }

.toast {
  position: absolute; top: 6cqh; right: 2cqw; z-index: 40; width: min(300px, 46cqw); padding: 1.2cqh 1.6cqh; border-radius: 14px;
  background: rgba(246, 246, 248, .92); color: #1d1d1f; font-size: max(10px, 1.6cqh); box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  opacity: 0; transform: translateX(20px); transition: opacity .35s, transform .45s var(--ease); pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }
.toast b { display: block; margin-bottom: 2px; }

/* controls */
.controls {
  margin: 34px auto 0; max-width: 1060px; display: flex; gap: 16px 24px; align-items: flex-end; justify-content: center; flex-wrap: wrap;
  padding: 18px 22px; border-radius: 22px; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 12px 40px -20px rgba(30, 20, 60, .25);
}
.ctl { display: grid; gap: 7px; }
.ctl-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ctl-label b { color: var(--ink); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; padding: 3px; background: #ececf0; border-radius: 11px; gap: 2px; }
.seg button { border: 0; background: none; padding: 7px 13px; border-radius: 8px; font-size: 14px; font-weight: 550; cursor: pointer; color: #3a3a3c; transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.seg button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.seg-wrap { flex-wrap: wrap; }
.batt-row { display: flex; gap: 10px; align-items: center; }
#battRange { width: 170px; accent-color: var(--pink); }
.plug, .sound {
  display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; padding: 8px 13px; border-radius: 10px;
  background: #ececf0; font-size: 14px; font-weight: 550; transition: background .2s, color .2s;
}
.plug svg, .sound svg { width: 17px; height: 17px; }
.plug[aria-pressed="true"] { background: #34c759; color: #fff; }
.sound .waves { display: none; } .sound[aria-pressed="true"] .waves { display: block; } .sound[aria-pressed="true"] .mute { display: none; }
.sound[aria-pressed="true"] { background: var(--ink); color: #fff; }
.hints { list-style: none; margin: 20px auto 0; padding: 0; display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.hints b { color: var(--ink); font-weight: 600; }
.for-touch { display: none; }
.coach small.for-touch { display: none; }
@media (hover: none) { .for-mouse { display: none !important; } .for-touch { display: inline; } .coach small.for-touch { display: block; } }

/* ───── Intro tiles ───── */
.tiles { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.tile { background: var(--card); border-radius: var(--radius); padding: 28px; box-shadow: 0 1px 0 var(--line), 0 20px 50px -30px rgba(30, 20, 60, .3); }
.tile-art { height: 190px; border-radius: 20px; display: grid; place-items: end center; padding-bottom: 14px; background: linear-gradient(160deg, #fff0f6, #f3ecff); margin-bottom: 22px; }
.tile-art.night { background: linear-gradient(160deg, #23245a, #3d2c6e); }
.tile-art .sprite { --h: 150px; }
.tile h3 { font-size: 24px; letter-spacing: -.02em; }
.tile p { margin: 8px 0 0; color: var(--muted); }

/* ───── Battery ───── */
.battery { max-width: none; background: var(--bg-2); }
.track { margin: 70px auto 0; max-width: 1080px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.track::before { content: ""; position: absolute; left: 6%; right: 6%; top: 180px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #ffb340, #ff5f57 45%, #ff3b30 55%, #34c759 75%, #34c759); opacity: .5; }
.step { position: relative; display: grid; justify-items: center; gap: 6px; padding: 18px 10px 22px; border-radius: 24px; background: var(--card); box-shadow: 0 20px 50px -34px rgba(30, 20, 60, .35); }
.step .sprite { --h: 150px; margin-bottom: 10px; }
.step b { font-size: 26px; letter-spacing: -.03em; display: inline-flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; }
.step b svg { width: 14px; height: 18px; color: #34c759; }
.step.plugged b { font-size: 19px; }
.step span { font-weight: 600; color: var(--muted); font-size: 15px; }
.step q { margin-top: 8px; font-size: 14px; color: var(--ink); background: var(--bg-2); padding: 6px 12px; border-radius: 12px; quotes: "“" "”"; }

/* ───── Day and night ───── */
.day { max-width: none; position: relative; overflow: hidden; color: #f5f5f7; background: linear-gradient(180deg, #ffd9c2 0%, #f3b7c9 14%, #8a6fc4 34%, #2e2a6e 56%, #121331 80%, #0b0c22 100%); }
.day .eyebrow { color: #fff; opacity: .9; }
.day h2 { color: #fff; }
.sky i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .7; animation: tw 3s ease-in-out infinite; }
.sky i:nth-child(1) { left: 12%; top: 48%; } .sky i:nth-child(2) { left: 30%; top: 58%; animation-delay: .6s; }
.sky i:nth-child(3) { left: 72%; top: 52%; animation-delay: 1.2s; } .sky i:nth-child(4) { left: 88%; top: 64%; animation-delay: .3s; }
.sky i:nth-child(5) { left: 55%; top: 70%; animation-delay: 1.8s; } .sky i:nth-child(6) { left: 8%; top: 80%; animation-delay: 2.1s; }
.sky i:nth-child(7) { left: 43%; top: 86%; animation-delay: .9s; } .sky i:nth-child(8) { left: 93%; top: 88%; animation-delay: 1.5s; }
@keyframes tw { 50% { opacity: .15; transform: scale(.6); } }
.day-grid { position: relative; margin: 70px auto 0; max-width: 1080px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: left; }
.moment { padding: 22px; border-radius: var(--radius); background: rgba(255, 255, 255, .12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); display: grid; align-content: start; gap: 8px; }
.moment .sprite { --h: 140px; justify-self: center; margin: 4px 0 6px; }
.moment .when { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.moment h3 { font-size: 21px; letter-spacing: -.02em; }
.moment p { margin: 0; opacity: .8; font-size: 15px; }
.moment.wide { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; gap: 28px; padding: 28px 34px; }
.moment.wide .when { grid-column: 1 / -1; }
.moment.wide .sprite { --h: 170px; }
.moment.wide h3 { font-size: 30px; margin-bottom: 8px; }
.moment .dream { margin-top: 14px; display: inline-block; font-style: italic; background: #ece9ff; color: #4b3f8f; padding: 8px 14px; border-radius: 14px; opacity: 1; }

/* ───── Files ───── */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; text-align: left; }
.split .lede { margin-left: 0; }
.checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; font-size: 17px; }
.checks li { position: relative; padding-left: 32px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--grad); -webkit-mask: radial-gradient(circle, #000 69%, transparent 70%); }
.checks li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 6px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.feed-scene { position: relative; height: 440px; border-radius: 32px; background: linear-gradient(160deg, #fff1f6, #fde9dc 50%, #efe7ff); display: grid; place-items: end center; padding-bottom: 40px; overflow: hidden; }
.feed-scene .sprite { --h: 240px; }
.feed-file { position: absolute; top: 60px; left: 14%; display: grid; justify-items: center; gap: 4px; font-size: 13px; opacity: 0; }
.feed-scene.go .feed-file { animation: feed 4.5s var(--ease) forwards; }
.feed-file svg { width: 54px; height: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .15)); }
.feed-file span { background: #0a84ff; color: #fff; padding: 1px 6px; border-radius: 5px; }
@keyframes feed { 0% { transform: translate(0, 0) rotate(-8deg); opacity: 1; } 55% { transform: translate(140px, 170px) rotate(4deg) scale(.85); opacity: 1; } 70% { transform: translate(150px, 200px) scale(.2); opacity: 0; } 100% { opacity: 0; } }
.feed-bubble { position: absolute; bottom: 300px; left: 50%; transform: translateX(-50%); background: #fff; padding: 10px 16px; border-radius: 16px; font-weight: 600; box-shadow: 0 10px 30px rgba(40, 20, 80, .15); opacity: 0; }
.feed-scene.go .feed-bubble { animation: yum 4.5s var(--ease) forwards; }
@keyframes yum { 0%, 68% { opacity: 0; transform: translate(-50%, 10px); } 76%, 95% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ───── PDF ───── */
.pdf { max-width: none; background: var(--bg-2); }
.orbit { position: relative; margin: 60px auto 0; width: min(620px, 100%); aspect-ratio: 1.35; display: grid; place-items: center; }
.orbit::before { content: ""; position: absolute; inset: 12% 14%; border-radius: 50%; border: 1.5px dashed rgba(255, 95, 158, .35); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit .sprite { --h: 220px; }
.tool { position: absolute; display: grid; gap: 2px; padding: 12px 18px; border-radius: 18px; background: var(--card); text-align: left; box-shadow: 0 14px 40px -18px rgba(30, 20, 60, .4), 0 0 0 1px var(--line); transition: transform .3s var(--ease); }
.tool:hover { transform: translateY(-4px); }
.tool b { font-size: 16px; } .tool small { font-size: 13px; color: var(--muted); }
.t1 { top: 2%; left: 50%; translate: -50% 0; } .t2 { top: 30%; right: 0; } .t3 { bottom: 4%; right: 8%; } .t4 { bottom: 4%; left: 8%; } .t5 { top: 30%; left: 0; }

/* ───── Pets ───── */
.pet-cards { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pet-card { padding: 34px 26px 30px; border-radius: var(--radius); display: grid; justify-items: center; gap: 6px; transition: transform .4s var(--ease), box-shadow .4s; cursor: default; }
.pet-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(30, 20, 60, .35); }
.pet-card.yuki { background: linear-gradient(170deg, #f5f3ff, #ffeef6); }
.pet-card.mochi { background: linear-gradient(170deg, #fff6e9, #ffeede); }
.pet-card.bunny { background: linear-gradient(170deg, #fff1f5, #f6ecff); }
.pet-card .sprite { --h: 210px; margin-bottom: 8px; }
.pet-card h3 { font-size: 34px; }
.species { margin: 0; color: var(--muted); font-weight: 550; }
.quote { margin: 12px 0 6px; font-size: 15px; font-style: italic; min-height: 44px; }
.chips { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chips li { font-size: 13px; font-weight: 550; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px var(--line); }

/* ───── Adopt ───── */
.adopt-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; text-align: left; padding: 56px; border-radius: 36px; background: linear-gradient(140deg, #fff 0%, #fff5f9 60%, #f6f0ff 100%); box-shadow: 0 1px 0 var(--line), var(--shadow); }
.adopt-copy h2 { font-size: clamp(40px, 5.5vw, 64px); }
.adopt-copy .lede { margin-left: 0; font-size: 19px; }
.adopt-form { margin-top: 28px; display: grid; gap: 14px; }
.adopt-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.adopt-form input { font: inherit; font-size: 17px; color: var(--ink); padding: 11px 14px; border-radius: 12px; border: 1px solid #d2d2d7; background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
.adopt-form input:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255, 95, 158, .18); }
.adopt-art { position: relative; display: grid; justify-items: center; gap: 18px; padding-top: 110px; min-height: 420px; align-content: end; }
.adopt-art .sprite { --h: 230px; }
.adopt-art .bubble { position: absolute; top: 0; bottom: auto; max-width: 340px; font-size: 17px; padding: 14px 18px; transform: translate(-50%, 0); }

/* ───── Polite ───── */
.grid6 { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.cell { padding: 30px; border-radius: var(--radius); background: var(--card); box-shadow: 0 1px 0 var(--line), 0 20px 50px -34px rgba(30, 20, 60, .3); }
.ico { font-size: 30px; }
.cell h3 { font-size: 21px; margin-top: 14px; letter-spacing: -.02em; }
.cell p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }

/* ───── Download ───── */
.download { padding-top: 40px; }
.dl-card { padding: 70px 30px 60px; border-radius: 40px; background: radial-gradient(120% 120% at 50% 0%, #ffe3ef 0%, #f6efff 50%, #fbfbfd 100%); box-shadow: 0 1px 0 var(--line); }
.dl-pets { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 18px; }
.dl-pets .sprite { --h: 150px; margin: 0 -8px; }
.dl-pets .sprite:nth-child(2) { --h: 175px; }
.dl-card h2 { font-size: clamp(44px, 7vw, 80px); }
.price { margin: 14px 0 6px; display: flex; justify-content: center; align-items: baseline; gap: 8px; }
.price .amount { font-size: clamp(40px, 5vw, 56px); font-weight: 700; letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price .unit { font-size: 15px; font-weight: 600; color: var(--muted); }
.price .was { font-size: clamp(24px, 3vw, 32px); font-weight: 600; color: var(--muted); text-decoration-thickness: 2px; }
.deal { display: inline-block; margin: 4px 0 10px; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; color: var(--ink, inherit); }
.price-tag s { opacity: .75; margin-right: 2px; }
.price-tag { margin-left: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .25); font-size: .85em; }
.dl-card .btn { margin-top: 34px; }
.install { max-width: 620px; margin: 46px auto 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 16px; text-align: left; }
.install li { counter-increment: s; position: relative; padding: 16px 18px 16px 62px; border-radius: 18px; background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px var(--line); font-size: 16px; }
.install li::before { content: counter(s); position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; display: grid; place-items: center; }

/* ───── FAQ ───── */
.faq-list { max-width: 760px; margin: 50px auto 0; text-align: left; }
.faq details { border-bottom: 1px solid #d2d2d7; }
.faq summary { list-style: none; cursor: pointer; padding: 24px 40px 24px 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 300; color: var(--muted); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 24px; color: var(--muted); font-size: 17px; max-width: 640px; }

/* ───── Footer ───── */
.foot { border-top: 1px solid var(--line); background: var(--bg-2); }
.foot-in { max-width: 1080px; margin: 0 auto; padding: 26px 22px; display: flex; gap: 10px 24px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.foot-in .brand { font-size: 13px; }
.foot-in span:last-child { margin-left: auto; }

/* ───── Responsive ───── */
@media (max-width: 980px) {
  .tiles, .pet-cards, .grid6 { grid-template-columns: 1fr 1fr; }
  .track { grid-template-columns: repeat(3, 1fr); } .track::before { display: none; }
  .day-grid { grid-template-columns: 1fr 1fr; }
  .split, .adopt-card { grid-template-columns: 1fr; }
  .adopt-card { padding: 40px 28px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 96px 16px; }
  .hero { padding: 120px 16px 30px; }
  .demo { padding: 24px 10px 80px; }
  .mac-bezel { padding: 6px 6px 9px; border-radius: 14px 14px 4px 4px; }
  .mac-base { height: 9px; margin: 0 -3%; }
  .orbit { grid-template-columns: 1fr 1fr; }
  .orbit .sprite { grid-column: 1 / -1; }
  .tool { padding: 10px 14px; }
  .tool:last-child { grid-column: 1 / -1; }
  .hide-sm { display: none; }
  .screen { aspect-ratio: 1 / 1; }
  .files { gap: 1.6cqh; }
  .file { width: 19cqh; }
  .tiles, .pet-cards, .grid6, .day-grid { grid-template-columns: 1fr; }
  .track { grid-template-columns: 1fr 1fr; }
  .moment.wide { grid-template-columns: 1fr; padding: 24px; gap: 8px; }
  .controls { padding: 16px; gap: 14px; justify-content: flex-start; }
  .ctl, .ctl-batt { width: 100%; }
  .seg { width: 100%; } .seg button { flex: 1; padding: 7px 4px; font-size: 13px; }
  #battRange { flex: 1; width: auto; }
  .orbit { aspect-ratio: auto; display: grid; gap: 10px; place-items: stretch; }
  .orbit::before { display: none; }
  .orbit .sprite { justify-self: center; --h: 180px; }
  .tool { position: static; translate: none; }
  .feed-scene { height: 360px; }
  .feed-scene .sprite { --h: 190px; }
  .feed-bubble { bottom: 240px; }
  .adopt-art { min-height: 360px; }
  .adopt-art .sprite { --h: 190px; }
  .dl-card { padding: 50px 18px 40px; border-radius: 28px; }
  .dl-pets .sprite { --h: 100px; } .dl-pets .sprite:nth-child(2) { --h: 118px; }
  .faq summary { font-size: 18px; }
  .foot-in span:last-child { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stage.coaching .pet, .coach .hand, .live-dot { animation: none; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .orbit::before, .feed-file, .feed-bubble, .sky i { animation: none; }
  .feed-bubble { opacity: 1; }
  .feed-file { display: none; }
}