/* r45: swelly.io holding page. Standalone (no site bundle): reuses the site's tokens, Inter, the yellow highlight,
   the 4px button radius and the service pastels. Light/dark from prefers-color-scheme. Motion: transform/opacity only. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); }
:root { color-scheme: light dark;
  --bg: #fafaf9; --text: #000; --body: #262626; --muted: #5c5c5c; --line: #d6d6d1; --field: #fff; --accent: #ffe100; --accent-h: #e6cb00; --on-accent: #000; --focus: #000; --error: #b3261e;
  --mint: #b9e8d6; --pink: #e9b9d7; --lilac: #b9c0e8; --peach: #fec393; --yellow: #ffe100; --blob-o: .62; --gutter: 20px; }
@media (prefers-color-scheme: dark) { :root { --bg: #161616; --text: #fff; --body: #e6e6e6; --muted: #a8a8a8; --line: #3a3a3a; --field: #0f0f0f; --focus: #fff; --error: #ff8a80; --blob-o: .2; } }
@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 80px; } }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--body); font: 400 16px/1.5 Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* background: the site grid (44px cells, same rule colour family), drawn in once, softly vignetted; pastel tiles
   snap to grid cells and breathe in and out slowly (JS places them, CSS fades them: opacity/transform only). */
:root { --cell: 44px; --gl: rgba(0, 0, 0, .075); --tile-o: .7; }
@media (prefers-color-scheme: dark) { :root { --gl: rgba(255, 255, 255, .075); --tile-o: .34; } }
.hp-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hp-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--gl) 1px, transparent 1px), linear-gradient(to bottom, var(--gl) 1px, transparent 1px);
  background-size: var(--cell) var(--cell); -webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 35%, transparent 85%); mask-image: radial-gradient(120% 90% at 70% 40%, #000 35%, transparent 85%);
  opacity: 0; transform: scale(1.03); transform-origin: 70% 40%; animation: hp-in 2.4s .1s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes hp-in { to { opacity: 1; transform: none; } }
.hp-tiles { position: absolute; inset: 0; }
.hp-tile { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); background: var(--c); opacity: 0; transform: scale(.9);
  transition: opacity 2.6s ease, transform 2.6s cubic-bezier(.22, 1, .36, 1); }
.hp-tile.is-on { opacity: var(--tile-o); transform: none; }
.hp-tile--hover { transition-duration: .9s, 1.2s; }

/* the jelly: Swelly's mark as the hero character. Three nested layers so motions never fight:
   __move (pointer follow, JS), __react (yes/no, CSS classes), __idle (endless soft wobble). */
.hp-jelly { position: fixed; z-index: 1; pointer-events: none; color: var(--text); right: var(--gutter); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 72px); width: 76px; }
@media (min-width: 768px) { .hp-jelly { width: 168px; bottom: 22vh; right: calc(var(--gutter) + 4vw); } }
@media (min-width: 1200px) { .hp-jelly { width: 264px; bottom: auto; top: calc(50% - 150px); right: 12vw; } }
.hp-jelly__move { will-change: transform; }
.hp-jelly__react, .hp-jelly__idle { transform-origin: 50% 92%; }
.hp-jelly__idle { animation: hp-wobble 5.6s ease-in-out infinite; opacity: 0; animation-name: hp-wobble, hp-pop; animation-duration: 5.6s, 1.2s; animation-delay: 1.4s, .5s; animation-iteration-count: infinite, 1; animation-fill-mode: none, forwards; animation-timing-function: ease-in-out, cubic-bezier(.34, 1.56, .64, 1); }
.hp-jelly__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .14)); }
@media (prefers-color-scheme: dark) { .hp-jelly__svg { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5)); } }
@keyframes hp-pop { from { opacity: 0; transform: translateY(24px) scale(.6, .4); } to { opacity: 1; } }
@keyframes hp-wobble { 0%, 100% { transform: none; } 20% { transform: scale(1.035, .965) skewX(-1.5deg); } 45% { transform: scale(.975, 1.03) skewX(1.2deg); } 70% { transform: scale(1.015, .985) skewX(-.6deg); } }
.is-no .hp-jelly__react { animation: hp-no .9s cubic-bezier(.36, .07, .19, .97); }
@keyframes hp-no { 15% { transform: rotate(-7deg); } 32% { transform: rotate(6deg); } 50% { transform: rotate(-4deg); } 68% { transform: rotate(2deg); } 85% { transform: rotate(-.5deg); } }
.is-yay .hp-jelly__react { animation: hp-yay 1s cubic-bezier(.34, 1.56, .64, 1) forwards; }
@keyframes hp-yay { 0% { transform: none; } 22% { transform: scale(1.18, .78); } 48% { transform: translateY(-38%) scale(.9, 1.12); } 72% { transform: scale(1.08, .92); } 100% { transform: scale(1); } }

/* layout: one screen */
.hp { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; height: 100vh; height: 100svh; padding: max(20px, env(safe-area-inset-top)) var(--gutter) max(20px, env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .hp { padding-top: 32px; padding-bottom: 32px; } }
.hp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hp-logo { display: inline-flex; color: var(--text); border-radius: 4px; }
.hp-logo svg { width: 112px; height: auto; display: block; }
@media (min-width: 768px) { .hp-logo svg { width: 134px; } }
.hp-tag { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); }
.hp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); animation: hp-pulse 3.2s ease-in-out infinite; }
@keyframes hp-pulse { 50% { transform: scale(1.5); opacity: .7; } }
.hp-main { align-self: center; max-width: 720px; }
.hp-h { margin: 0; color: var(--text); font-weight: 500; font-size: clamp(40px, 10.6vw, 104px); line-height: 1.02; letter-spacing: -.035em; }
.hl { position: relative; z-index: 0; white-space: nowrap; }
.hl::before { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.06em; top: .16em; bottom: .02em; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); animation: hp-hl .9s .35s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes hp-hl { to { transform: none; } }
@media (prefers-color-scheme: dark) { .hl { color: #000; } }
.dot { color: var(--accent); }
.hp-sub { margin: 16px 0 0; max-width: 34em; font-size: 16px; color: var(--muted); }
@media (min-width: 768px) { .hp-sub { font-size: 18px; margin-top: 20px; } }

/* form */
.hp-form { margin-top: 28px; max-width: 440px; }
@media (min-width: 768px) { .hp-form { margin-top: 40px; } }
.hp-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--text); }
.hp-row { display: flex; gap: 8px; }
.hp-field { position: relative; flex: 1; min-width: 0; }
.hp-field input { width: 100%; height: 56px; padding: 0 76px 0 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--field); color: var(--text); font: inherit; font-size: 16px; letter-spacing: .02em;
  transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; }
.hp-field input:hover { border-color: color-mix(in srgb, var(--line) 50%, var(--text)); }
.hp-field input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.hp-field input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.hp-eye { position: absolute; right: 6px; top: 6px; height: 44px; min-width: 60px; padding: 0 10px; border: 0; border-radius: 4px; background: none; color: var(--muted); font: 500 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.hp-eye:hover { color: var(--text); }
.hp-eye__hide, .hp-eye[aria-pressed="true"] .hp-eye__show { display: none; }
.hp-eye[aria-pressed="true"] .hp-eye__hide { display: inline; }
.hp-go { position: relative; flex: none; width: 56px; height: 56px; display: grid; place-items: center; border: 0; border-radius: 4px; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.hp-go:hover { background: var(--accent-h); }
.hp-go:active { transform: scale(.96); }
.hp-go:hover .hp-go__arrow { transform: translateX(2px); }
.hp-go__arrow { transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }
.hp-spin { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; opacity: 0; animation: hp-spin .8s linear infinite; }
.is-loading .hp-go__arrow { opacity: 0; } .is-loading .hp-spin { opacity: 1; }
.is-loading .hp-go { cursor: progress; }
@keyframes hp-spin { to { transform: rotate(360deg); } }
.hp-err { min-height: 24px; margin: 8px 0 0; font-size: 14px; font-weight: 500; color: var(--error); }
.hp-hint { margin: 0; font-size: 14px; color: var(--muted); }
.hp-err:not(:empty) + .hp-hint { display: none; }
.is-shake .hp-row { animation: hp-shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes hp-shake { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 45% { transform: translateX(-7px); } 60% { transform: translateX(6px); } }
.is-ok .hp-go { background: var(--mint); }

.hp-foot { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 14px; }
.hp-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat; transition: background-size .3s ease; }
.hp-link:hover { background-size: 100% 1px; }

/* very short screens (landscape phones): tighten so it still fits */
@media (max-height: 560px) { .hp-h { font-size: clamp(32px, 7vh, 56px); } .hp-form { margin-top: 16px; } .hp-sub { margin-top: 8px; } .hp-hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hp-dot, .hp-grid, .hp-jelly__idle, .is-no .hp-jelly__react, .is-yay .hp-jelly__react { animation: none; }
  .hp-grid, .hp-jelly__idle { opacity: 1; transform: none; }
  .hp-tile { transition: none; }
  .hl::before { animation: none; transform: none; }
  .is-shake .hp-row { animation: none; }
  .hp-go, .hp-go__arrow, .hp-link { transition: none; }
}