/* Jelly Ruler's website: the app's tokens (docs/design-system.md), on a page. */
@font-face { font-family: 'Jelly Ruler Display'; src: url('/font/files/JellyRulerDisplay-Regular.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #15101f; --surface: #261a35; --raised: #382547; --line: #3e2c52; --ink: #fff5ff; --muted: #bdb0cc;
  --orange: #ff9a4d; --coral: #ff8a65; --pink: #ff5ca8; --purple: #a65cff; --yellow: #ffd36b; --teal: #48d6cd;
  --gradient: linear-gradient(120deg, var(--orange), var(--coral) 30%, var(--pink) 65%, var(--purple));
  --cta: linear-gradient(120deg, var(--coral), var(--pink));
  --brand: 'Jelly Ruler Display', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--ui); overflow-x: clip; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(1160px, 100% - 32px); margin: 0 auto; }

/* Drifting colour behind everything. */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(110% 80% at 50% -10%, #34204a 0%, var(--bg) 60%); }   /* fixed: the same background all the way down */
.aurora i { position: absolute; width: 50vmax; height: 50vmax; border-radius: 50%; filter: blur(90px); opacity: .28; animation: drift 40s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { background: var(--coral); left: -15vmax; top: -18vmax; }
.aurora i:nth-child(2) { background: var(--pink); right: -18vmax; top: 20vmax; animation-duration: 48s; }
.aurora i:nth-child(3) { background: var(--purple); left: 25vmax; bottom: -30vmax; animation-duration: 56s; }
@keyframes drift { to { transform: translate(5vmax, 4vmax) scale(1.1); } }

/* Navigation */
.nav { position: sticky; top: 10px; z-index: 10; margin-top: 10px; }
.nav .wrap { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; border-radius: 999px; background: rgba(38, 26, 53, .72); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 40px -20px rgba(0, 0, 0, .8); }
.nav .home { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.nav .home svg, .nav .home img { width: 40px; height: 27px; }
.wordmark { white-space: nowrap; font: 400 22px var(--brand); background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav a.link { text-decoration: none; color: var(--muted); font-weight: 550; padding: 8px 10px; border-radius: 10px; }
.nav a.link:hover { color: var(--ink); }

/* Buttons */
.btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 650 16px var(--ui); text-decoration: none; color: var(--ink); background: rgba(255, 255, 255, .07) linear-gradient(180deg, rgba(255, 255, 255, .09), transparent 55%); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); transition: transform 380ms var(--spring), filter 140ms; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(1.05, .9); transition-duration: 70ms; }
.btn.cta { background: var(--cta); border-color: transparent; color: #fff; text-shadow: 0 1px 1px rgba(80, 10, 40, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 26px -10px var(--pink); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* Hero */
.hero { padding: 70px 0 30px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.crown { width: 150px; margin: 0 0 6px -6px; animation: hop 3.6s cubic-bezier(.45, .05, .35, 1) infinite; transform-origin: 50% 100%; filter: drop-shadow(0 10px 22px rgba(255, 92, 168, .45)); }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1.05, .94); } 12% { transform: scale(1.1, .88); } 28% { transform: translateY(-16px) scale(.94, 1.07) rotate(-3deg); } 45% { transform: translateY(-22px) scale(1.02, .98) rotate(2deg); } 70% { transform: translateY(-4px) scale(.97, 1.04); } 80% { transform: translateY(0) scale(1.1, .88); } 90% { transform: scale(1.02, .98); } }
h1 { margin: 0; font: 400 clamp(56px, 8vw, 104px)/.95 var(--brand); letter-spacing: .005em; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { margin: 14px 0 0; font: 400 clamp(22px, 2.6vw, 30px)/1.2 var(--brand); color: var(--ink); }
.lead { margin: 16px 0 0; color: #e7dcf0; font-size: 18.5px; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.note { margin: 16px 0 0; color: var(--muted); font-size: 14.5px; }
.shot { border-radius: 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .8), 0 0 70px -30px var(--pink); background: var(--surface); }
.palette-switch { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.palette-switch button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; font: 600 15px var(--ui); color: var(--muted); background: rgba(38, 26, 53, .7); border: 1px solid rgba(255, 255, 255, .1); cursor: pointer; transition: transform 380ms var(--spring); }
.palette-switch button i { width: 18px; height: 18px; border-radius: 50%; }
.palette-switch button.on { color: var(--ink); border-color: rgba(255, 255, 255, .35); box-shadow: 0 0 18px -6px var(--pink); }
.palette-switch button:active { transform: scale(1.05, .9); }
.hero .shot { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform 600ms var(--spring); }
.hero .shot:hover { transform: none; }

/* The liquid band: a nod to the app's header. */
.band { position: relative; height: 120px; margin: 40px 0 10px; }
.band svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.band .w1 { animation: slosh 6s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.band .w2 { animation: slosh 8s ease-in-out infinite alternate-reverse; transform-origin: 50% 100%; opacity: .55; }
@keyframes slosh { from { transform: skewY(-1.6deg) translateY(4px); } to { transform: skewY(1.6deg) translateY(-2px); } }
.band .float { position: absolute; font-size: 26px; animation: bob 4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-10px) rotate(8deg); } }

/* Features */
section { padding: 56px 0; }
h2 { margin: 0 0 10px; font: 400 clamp(32px, 4vw, 46px)/1.05 var(--brand); }
h2 .grad { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feature .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.feature.flip .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature.flip .text { order: 2; }
.feature p { color: #e7dcf0; margin: 0; font-size: 18px; }
.feature ul { margin: 14px 0 0; padding: 0; list-style: none; color: var(--muted); }
.feature li { padding-left: 22px; position: relative; margin: 6px 0; }
.feature li::before { content: ''; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--gradient); box-shadow: 0 0 8px var(--pink); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.card { padding: 22px; border-radius: 22px; background: rgba(38, 26, 53, .75) linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 50%); border: 1px solid rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.card h3 { margin: 10px 0 6px; font: 400 23px var(--brand); }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.card .dot { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--cta); color: #fff; }
.card .dot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Typeface teaser, install box */
.typeface .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.install { padding: 28px; border-radius: 26px; background: linear-gradient(135deg, rgba(255, 138, 101, .16), rgba(166, 92, 255, .18)); border: 1px solid rgba(255, 255, 255, .1); }
.install ol { margin: 12px 0 0; padding-left: 22px; color: #e7dcf0; }
.install li { margin: 6px 0; }
footer { padding: 40px 0 60px; color: var(--muted); font-size: 14.5px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; border-top: 1px solid var(--line); padding-top: 26px; }

@media (max-width: 860px) {
  .hero .wrap, .feature .wrap, .feature.flip .wrap, .typeface .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feature.flip .text { order: 0; }
  .hero { padding-top: 40px; }
  .hero .shot { transform: none; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .nav a.link.hide-sm { display: none; }
}
@media (max-width: 480px) { .hide-xs { display: none; } .nav .wrap { gap: 6px; } .wordmark { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }