:root {
  --night: #090a26;
  --night-soft: #11143b;
  --panel: #171a4d;
  --violet: #7667ff;
  --electric: #54b6ff;
  --mint: #77f2cc;
  --moon: #ffd76d;
  --coral: #ff6f91;
  --cream: #f7f1df;
  --white: #fffdf6;
  --ink: #0c0d28;
  --line: rgba(247,241,223,.18);
  --display: "Arial Black", "Trebuchet MS", sans-serif;
  --body: "Trebuchet MS", "Avenir Next", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--cream); background: var(--night); font-family: var(--body); line-height: 1.6; overflow-x: clip; }
button, a { color: inherit; font: inherit; }
a { text-decoration: none; }
button { cursor: pointer; }
::selection { color: var(--night); background: var(--mint); }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 16px; color: var(--night); background: var(--mint); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cursor-glow { position: fixed; z-index: 1; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(84,182,255,.09), transparent 68%); pointer-events: none; opacity: 0; transform: translate(-50%,-50%); transition: opacity .3s; }

.site-header { position: absolute; z-index: 30; top: 0; left: 50%; display: flex; width: min(1200px, calc(100% - 48px)); align-items: center; justify-content: space-between; padding: 24px 0; transform: translateX(-50%); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--display); font-size: 1.12rem; letter-spacing: .12em; }
.brand svg { width: 43px; height: 43px; color: var(--mint); }
.site-header nav { display: flex; align-items: center; gap: 30px; }
.site-header nav a { font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.site-header nav a:not(.nav-play) { position: relative; }
.site-header nav a:not(.nav-play)::after { position: absolute; right: 0; bottom: -5px; left: 0; height: 2px; background: var(--mint); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .2s; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-play { padding: 10px 17px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.05); backdrop-filter: blur(10px); }

.hero { position: relative; display: grid; min-height: 840px; grid-template-columns: minmax(0,.9fr) minmax(470px,1.1fr); align-items: center; gap: 10px; padding: 120px max(6vw, calc((100vw - 1200px) / 2)) 95px; background: radial-gradient(circle at 77% 39%, #1c2262 0, var(--night) 48%, #07071c 100%); isolation: isolate; overflow: hidden; }
.hero::after { position: absolute; z-index: -1; right: -10%; bottom: -34%; width: 70%; height: 64%; border-radius: 50%; background: repeating-linear-gradient(105deg, #10133b 0 28px, #16194a 29px 56px); box-shadow: 0 -2px 0 rgba(119,242,204,.25); content: ""; transform: rotate(-7deg); }
.night-sky { position: absolute; z-index: -2; inset: 0; overflow: hidden; }
.night-sky::before { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) .7px, transparent .8px); background-size: 26px 26px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 76%); }
.star { position: absolute; color: var(--moon); animation: twinkle 2.5s ease-in-out infinite; }
.star-1 { top: 19%; left: 7%; font-size: 1.3rem; }.star-2 { top: 12%; left: 38%; }.star-3 { top: 28%; right: 7%; font-size: 1.5rem; animation-delay: -.9s; }.star-4 { top: 48%; left: 43%; }.star-5 { right: 40%; bottom: 18%; animation-delay: -1.3s; }.star-6 { top: 60%; left: 4%; }
.moon { position: absolute; top: 13%; right: 10%; width: 130px; height: 130px; border-radius: 50%; background: var(--moon); box-shadow: 0 0 0 22px rgba(255,215,109,.06), 0 0 80px rgba(255,215,109,.3); }
.moon::before, .moon::after { position: absolute; border-radius: 50%; background: rgba(181,145,69,.18); content: ""; }.moon::before { top: 28px; left: 26px; width: 29px; height: 29px; }.moon::after { right: 20px; bottom: 30px; width: 43px; height: 43px; }
.cloud { position: absolute; width: 230px; height: 37px; border-radius: 50%; background: rgba(117,122,193,.12); filter: blur(4px); animation: cloudDrift 14s ease-in-out infinite alternate; }.cloud-a { top: 33%; right: 3%; }.cloud-b { top: 46%; right: 35%; width: 180px; animation-delay: -6s; }
.hero-copy { position: relative; z-index: 3; max-width: 630px; }
.eyebrow, .section-number { font-size: .72rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 11px; color: var(--mint); }.eyebrow span { width: 34px; height: 2px; background: currentColor; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 900; letter-spacing: -.075em; line-height: .88; text-transform: uppercase; }
h1 { margin-top: 27px; font-size: clamp(4.4rem,8vw,8rem); } h1 em, h2 span { color: var(--mint); font-style: normal; }
.hero-lede { max-width: 530px; margin: 30px 0; color: rgba(247,241,223,.75); font-size: clamp(1rem,1.4vw,1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 13px; padding: 12px 22px; border: 1px solid var(--line); border-radius: 4px; font-weight: 900; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover, .button:focus-visible { transform: translateY(-4px); }.button-primary { color: var(--night); background: var(--mint); border-color: var(--mint); box-shadow: 6px 6px 0 var(--violet); }.button-primary:hover { box-shadow: 6px 10px 0 var(--violet); }.button-ghost { background: rgba(255,255,255,.04); }
.hero-status { min-height: 1.5em; margin: 15px 0 0; color: rgba(247,241,223,.45); font-size: .78rem; }
.cat-stage { position: relative; z-index: 4; align-self: end; width: min(100%,610px); margin: 0 auto -42px; }
.joni-cat { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 28px 18px rgba(0,0,0,.28)); }
.cat-shadow, .mini-shadow { fill: rgba(0,0,0,.3); }.cat-tail { transform-origin: 380px 445px; animation: tailWag 2.7s ease-in-out infinite; }.cat-tail path { fill: none; stroke: #242969; stroke-linecap: round; stroke-width: 50px; }
.cat-body > path:first-child, .head, .ear > path:first-child { fill: #272d70; stroke: var(--ink); stroke-linejoin: round; stroke-width: 6px; }.chest { fill: #424b98; }.paw { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-width: 5px; }
.cat-head { transform-origin: 280px 345px; animation: breathe 4.5s ease-in-out infinite; }.ear { transform-box: fill-box; transform-origin: bottom; }.ear-left { animation: earTwitch 5s ease-in-out infinite; }.ear-right { animation: earTwitch 5s 2.4s ease-in-out infinite; }.ear-inner { fill: #82649f; stroke: none; }.face-flash { fill: rgba(118,103,255,.22); }
.eye { fill: var(--moon); stroke: var(--ink); stroke-width: 5px; }.pupil { fill: var(--night); transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }.eye-glint { fill: white; }.nose { fill: var(--coral); stroke: var(--ink); stroke-width: 4px; }.mouth,.whiskers { fill: none; stroke: var(--cream); stroke-linecap: round; stroke-width: 4px; opacity: .82; }
.collar path { fill: var(--mint); stroke: var(--ink); stroke-width: 5px; }.collar circle { fill: var(--moon); stroke: var(--ink); stroke-width: 4px; }.collar text { fill: var(--ink); font-family: var(--display); font-size: 22px; }
.roof { display: flex; height: 90px; margin-top: -40px; transform: perspective(300px) rotateX(14deg) skewX(-8deg); }.roof i { flex: 1; border: 2px solid var(--night); border-radius: 8px 8px 0 0; background: #252a69; box-shadow: inset 0 7px rgba(255,255,255,.04); }
.speech { position: absolute; z-index: 6; top: 15%; left: 7%; padding: 10px 17px; color: var(--night); border-radius: 18px 18px 18px 3px; background: var(--cream); font-weight: 900; opacity: 0; transform: translateY(10px) rotate(-7deg) scale(.7); transition: opacity .2s, transform .3s cubic-bezier(.2,.8,.2,1.3); }.speech.show { opacity: 1; transform: translateY(0) rotate(-7deg) scale(1); }
.orbit { position: absolute; z-index: -1; border: 1px solid rgba(119,242,204,.18); border-radius: 50%; animation: orbitPulse 4s ease-in-out infinite; }.orbit-one { inset: 17% 3% 12% 4%; }.orbit-two { inset: 7% -7% 0 -5%; animation-delay: -2s; }
.scroll-hint { position: absolute; z-index: 8; bottom: 28px; left: max(6vw,calc((100vw - 1200px)/2)); display: flex; align-items: center; gap: 14px; color: rgba(247,241,223,.5); font-size: .69rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.scroll-hint i { width: 42px; height: 1px; background: var(--mint); animation: linePulse 2s infinite; }

.section { padding: 120px max(6vw,calc((100vw - 1200px)/2)); }.section-number { margin-bottom: 42px; color: var(--electric); }
.intro { position: relative; color: var(--ink); background: var(--cream); overflow: hidden; }.intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 100px; align-items: start; }.kicker { margin: 0 0 22px; font-size: .74rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.intro h2 { font-size: clamp(3.6rem,6.5vw,7rem); }.intro h2 span { color: var(--violet); }.intro-copy { max-width: 510px; padding-top: 34px; font-size: 1.08rem; }.intro-copy > p { margin: 0 0 20px; }.quote { display: grid; grid-template-columns: 45px 1fr; margin-top: 40px; padding-top: 26px; border-top: 2px solid var(--ink); }.quote span { color: var(--violet); font-family: Georgia,serif; font-size: 4rem; line-height: .8; }.quote p { margin: 0; font-weight: 900; }
.paw-trail { position: absolute; right: 3%; bottom: 3%; display: flex; gap: 25px; color: rgba(118,103,255,.11); font-size: 2rem; transform: rotate(-24deg); }.paw-trail span:nth-child(even) { transform: translateY(-15px); }

.routine { padding-bottom: 80px; background: var(--night-soft); }.routine-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }.routine-heading .section-number { margin: 0; }.routine h2 { font-size: clamp(3.5rem,6vw,6.5rem); text-align: right; }.timeline { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 75px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.routine-card { position: relative; min-height: 390px; padding: 35px 25px; border-right: 1px solid var(--line); transition: color .25s, background .25s, transform .25s; }.routine-card:first-child { border-left: 1px solid var(--line); }.routine-card:hover { color: var(--night); background: var(--mint); transform: translateY(-10px); }.routine-card time { font-family: var(--display); font-size: 1.7rem; }.routine-icon { display: grid; width: 78px; height: 78px; place-items: center; margin: 55px 0 35px; border: 1px solid currentColor; border-radius: 50%; font-size: 2rem; }.routine-card h3 { margin: 0 0 10px; font-size: 1rem; text-transform: uppercase; }.routine-card p { margin: 0; color: rgba(247,241,223,.58); font-size: .86rem; }.routine-card:hover p { color: rgba(9,10,38,.7); }
.ticker { width: calc(100% + 12vw); margin: 80px -6vw 0; overflow: hidden; color: var(--night); background: var(--moon); transform: rotate(1deg); }.ticker div { width: max-content; padding: 10px 0; font-family: var(--display); font-size: 1.15rem; letter-spacing: .04em; animation: ticker 20s linear infinite; }.ticker b { margin: 0 24px; color: var(--violet); }

.stats { background: var(--violet); }.stats .section-number { color: var(--moon); }.stats > h2 { max-width: 900px; font-size: clamp(3.5rem,6.3vw,6.8rem); }.stats > h2 span { color: var(--moon); }.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 80px; border-block: 2px solid var(--cream); }.stat { display: flex; min-height: 220px; align-items: center; gap: 22px; padding: 30px; border-right: 2px solid var(--cream); }.stat:last-child { border-right: 0; }.stat strong { font-family: var(--display); font-size: clamp(5rem,8vw,8.2rem); letter-spacing: -.1em; line-height: 1; }.stat span { max-width: 145px; font-size: .75rem; font-weight: 900; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; }

.play { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; align-items: center; background-color: var(--night); background-image: radial-gradient(rgba(119,242,204,.1) 1px,transparent 1px); background-size: 22px 22px; }.play-copy { max-width: 480px; }.play-copy h2 { font-size: clamp(3.8rem,6.3vw,6.8rem); }.play-copy > p:not(.kicker) { margin: 28px 0 34px; color: rgba(247,241,223,.65); }.play-actions { display: flex; flex-wrap: wrap; gap: 10px; }.play-actions button { display: inline-flex; min-height: 46px; align-items: center; gap: 8px; padding: 9px 15px; color: var(--cream); border: 1px solid var(--line); border-radius: 4px; background: var(--night-soft); font-size: .78rem; font-weight: 900; transition: color .2s,background .2s,transform .2s; }.play-actions button:hover,.play-actions button:focus-visible { color: var(--night); background: var(--mint); transform: translateY(-3px); }
.playground { position: relative; min-height: 570px; border: 2px solid rgba(119,242,204,.55); border-radius: 50% 50% 22px 22px; background: radial-gradient(circle at 50% 32%,#282e76,var(--night-soft) 68%); box-shadow: 16px 16px 0 rgba(118,103,255,.45); overflow: hidden; }.playground::before { position: absolute; right: -30px; bottom: -60px; width: 270px; height: 270px; border: 50px solid rgba(119,242,204,.05); border-radius: 50%; content: ""; }.play-message { position: absolute; z-index: 8; top: 40px; left: 50%; min-width: 220px; padding: 10px 18px; color: var(--night); border-radius: 4px; background: var(--moon); font-size: .78rem; font-weight: 900; text-align: center; transform: translateX(-50%) rotate(-2deg); }.play-cat { position: absolute; z-index: 3; right: 4%; bottom: 55px; width: 88%; overflow: visible; }.mini-tail { transform-origin: 310px 280px; animation: tailWag 2.3s infinite ease-in-out; }.mini-tail path { fill: none; stroke: #272d70; stroke-linecap: round; stroke-width: 42px; }.mini-body,.mini-face,.mini-ear { fill: #272d70; stroke: var(--ink); stroke-linejoin: round; stroke-width: 5px; }.mini-chest { fill: #424b98; }.mini-inner { fill: #82649f; stroke: var(--ink); stroke-width: 3px; }.mini-eye { fill: var(--moon); }.mini-nose { fill: var(--coral); stroke: var(--ink); stroke-width: 3px; }.mini-mouth { fill: none; stroke: var(--cream); stroke-linecap: round; stroke-width: 3px; }.mini-head { transform-origin: 207px 268px; }
.laser-dot { position: absolute; z-index: 7; top: 31%; left: 20%; width: 14px; height: 14px; border-radius: 50%; background: #ff405f; box-shadow: 0 0 16px 7px rgba(255,64,95,.55); opacity: 0; }.action-laser .laser-dot { opacity: 1; animation: laserRun 1.4s ease-in-out 2; }.action-laser .mini-head { animation: laserFollow 1.4s ease-in-out 2; }.treat { position: absolute; z-index: 7; right: 18%; bottom: 125px; color: var(--moon); font-size: 2rem; opacity: 0; }.action-treat .treat { animation: treatServe 1.8s ease both; }.action-treat .mini-head { animation: eat  .4s ease-in-out 4; }.action-pet .mini-head { animation: happy .45s ease-in-out 3; }.particles { position: absolute; z-index: 9; top: 38%; right: 24%; width: 100px; height: 150px; pointer-events: none; }.particle { position: absolute; bottom: 0; color: var(--coral); font-size: 1.4rem; animation: particleFloat 1.5s ease-out forwards; }
.mood { position: absolute; z-index: 9; right: 25px; bottom: 22px; left: 25px; display: grid; grid-template-columns: auto 1fr 42px; align-items: center; gap: 12px; font-size: .67rem; font-weight: 900; }.mood > div { height: 10px; border: 1px solid var(--cream); border-radius: 99px; overflow: hidden; }.mood i { display: block; width: 12%; height: 100%; background: var(--mint); transition: width .5s ease; }

footer { display: grid; grid-template-columns: 1fr 1.7fr auto; align-items: center; gap: 30px; padding: 55px max(6vw,calc((100vw - 1200px)/2)); color: var(--night); background: var(--mint); }.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); letter-spacing: .1em; }.footer-brand svg { width: 50px; height: 50px; }.footer-brand + p { margin: 0; font-size: .85rem; }.footer-brand ~ a { font-size: .8rem; font-weight: 900; }.footer-brand ~ small { grid-column: 2/4; opacity: .55; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1); }.reveal.visible { opacity: 1; transform: none; }

@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.75) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(30deg); } }
@keyframes cloudDrift { from { transform: translateX(-25px); } to { transform: translateX(35px); } }
@keyframes tailWag { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(13deg); } }
@keyframes breathe { 0%,100% { transform: translateY(0) rotate(-.7deg); } 50% { transform: translateY(-5px) rotate(.7deg); } }
@keyframes blink { 0%,45%,49%,100% { transform: scaleY(1); } 47% { transform: scaleY(.06); } }
@keyframes earTwitch { 0%,88%,100% { transform: rotate(0); } 91% { transform: rotate(-7deg); } 95% { transform: rotate(4deg); } }
@keyframes orbitPulse { 0%,100% { opacity: .35; transform: scale(.97); } 50% { opacity: .8; transform: scale(1.03); } }
@keyframes linePulse { 0%,100% { transform: scaleX(.4); transform-origin: left; } 50% { transform: scaleX(1); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes laserRun { 0%,100% { transform: translate(0,0); } 25% { transform: translate(270px,130px); } 55% { transform: translate(60px,220px); } 78% { transform: translate(330px,30px); } }
@keyframes laserFollow { 0%,100% { transform: rotate(-5deg); } 30% { transform: rotate(10deg); } 60% { transform: rotate(-12deg); } 80% { transform: rotate(8deg); } }
@keyframes treatServe { 0% { opacity: 0; transform: translate(130px,-50px) rotate(0); } 30%,72% { opacity: 1; transform: translate(0,0) rotate(180deg); } 100% { opacity: 0; transform: translate(-35px,20px) scale(.3) rotate(300deg); } }
@keyframes eat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,13px) rotate(4deg); } }
@keyframes happy { 0%,100% { transform: rotate(0) translateY(0); } 40% { transform: rotate(-7deg) translateY(-7px); } 75% { transform: rotate(7deg) translateY(-4px); } }
@keyframes particleFloat { 0% { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift),-135px) scale(1.35) rotate(25deg); } }

@media (max-width: 980px) {
  .hero { min-height: 780px; grid-template-columns: 1fr 1fr; padding-inline: 5vw; }.intro-grid,.play { gap: 55px; }.timeline { grid-template-columns: repeat(2,1fr); }.routine-card:nth-child(2) { border-right: 0; }.routine-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.stat { flex-direction: column; align-items: start; gap: 8px; }.play { grid-template-columns: 1fr; }.play-copy { max-width: 720px; }.playground { width: min(100%,700px); margin: auto; }
}
@media (max-width: 720px) {
  .site-header { width: calc(100% - 28px); padding-top: 16px; }.site-header nav a:not(.nav-play) { display: none; }.brand svg { width: 38px; }.hero { display: flex; min-height: 920px; flex-direction: column; justify-content: center; padding: 105px 18px 58px; }.hero-copy { width: 100%; }.hero h1 { font-size: clamp(3.8rem,19vw,6.2rem); }.hero-lede { max-width: 94%; }.cat-stage { width: min(115%,520px); margin: -20px -7% -20px auto; }.moon { top: 9%; right: -30px; width: 105px; height: 105px; }.scroll-hint { display: none; }.section { padding: 85px 20px; }.intro-grid { grid-template-columns: 1fr; gap: 25px; }.intro h2,.routine h2,.stats > h2,.play-copy h2 { font-size: clamp(3rem,14vw,5rem); }.intro-copy { padding-top: 0; }.routine-heading { display: block; }.routine-heading .section-number { margin-bottom: 35px; }.routine h2 { text-align: left; }.timeline { grid-template-columns: 1fr; }.routine-card { min-height: auto; border: 1px solid var(--line) !important; }.routine-icon { margin: 32px 0 24px; }.ticker { width: calc(100% + 40px); margin-inline: -20px; }.stat-grid { grid-template-columns: 1fr; }.stat { min-height: 170px; flex-direction: row; align-items: center; border-right: 0; border-bottom: 2px solid var(--cream); }.stat:last-child { border-bottom: 0; }.stat strong { font-size: 5.3rem; }.play { gap: 50px; }.playground { min-height: 500px; border-radius: 44% 44% 18px 18px; box-shadow: 8px 9px 0 rgba(118,103,255,.45); }.play-cat { width: 105%; right: -3%; }.mood { grid-template-columns: 1fr 42px; }.mood > span { grid-column: 1/3; }.play-message { top: 25px; min-width: 205px; }.cursor-glow { display: none; } footer { grid-template-columns: 1fr; padding: 42px 20px; } .footer-brand ~ small { grid-column: auto; }
}
@media (max-width: 390px) { .hero-actions,.play-actions { align-items: stretch; flex-direction: column; }.button,.play-actions button { width: 100%; }.cat-stage { margin-top: 0; }.playground { min-height: 455px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; }.cursor-glow { display: none; } }