:root {
  --bg: #f7faf5;
  --surface: #ffffff;
  --text: #13201a;
  --muted: #4c5c54;
  --line: #dde7df;
  --brand: #13805a;
  --brand-dark: #0d6345;
  --brand-soft: #e3f4ea;
  --lime: #c6e63c;
  --ink: #0f1a15;
  --radius: 20px;
  --max: 1080px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1310;
    --surface: #141e19;
    --text: #ecf3ee;
    --muted: #a3b4aa;
    --line: #24332b;
    --brand: #5fd3a0;
    --brand-dark: #8be3bb;
    --brand-soft: #17291f;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--brand); color: #fff;
  padding: .5rem 1rem; border-radius: 8px; z-index: 100;
}
.skip-link:focus { top: 1rem; color: #fff; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em;
  color: var(--text); text-decoration: none;
}
.brand:hover { color: var(--text); }
.brand svg { width: 30px; height: 30px; flex: none; }
.nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: .45rem .7rem; border-radius: 999px;
  color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--brand-soft); }

/* Type */
h1, h2, h3 { line-height: 1.12; letter-spacing: -.025em; margin: 0 0 .75rem; }
h1 { font-size: clamp(2.3rem, 8vw, 3.8rem); font-weight: 850; }
h2 { font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 34rem; margin: 0 0 1.75rem; }
.highlight {
  background: linear-gradient(transparent 62%, var(--lime) 62%);
  padding: 0 .1em;
}
@media (prefers-color-scheme: dark) {
  .highlight { background: linear-gradient(transparent 62%, #4d6a12 62%); }
}

.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600;
  color: var(--brand-dark); background: var(--brand-soft);
  padding: .3rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 35%, transparent);
}

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.35rem; border-radius: 999px;
  font-weight: 650; font-size: 1rem; text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
@media (prefers-color-scheme: dark) { .btn-primary, .btn-primary:hover { color: var(--ink); } }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { color: var(--text); border-color: var(--brand); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: #d6f25a; color: var(--ink); }

/* Hero */
.hero { padding: 4rem 0 3.5rem; overflow: hidden; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero-art { display: flex; justify-content: center; }
.hero-art svg { width: 100%; max-width: 340px; height: auto; overflow: visible; }

/* Hero phone: loops the real app flow (16 s). Static frame = the rallies screen (scene 3).
   Push/pop mimic the iOS native stack (incoming slides over, outgoing parallaxes 30% and dims).
   The keyframes below are generated from a seconds-based timeline: percent = seconds / 16.
   Only transform and opacity are animated. Numbers count up via motion.js (.hp-live); without JS
   the stepped .hp-fb texts are shown instead. */
.hero-art {
  --hp-push: cubic-bezier(.2,.9,.3,1);
  --hp-spring: cubic-bezier(.34,1.56,.64,1);
  --hp-spring-soft: cubic-bezier(.25,1.2,.5,1);
}
@supports (animation-timing-function: linear(0, 1)) {
  .hero-art {
    /* critically damped (iOS push), bouncy (pops), soft (cascades) */
    --hp-push: linear(0, 0.0239, 0.0819, 0.1587, 0.2438, 0.3303, 0.4139, 0.4919, 0.5631, 0.6268, 0.683, 0.7321, 0.7745, 0.811, 0.8421, 0.8685, 0.8907, 0.9094, 0.9251, 0.9382, 0.9491, 0.9581, 0.9656, 0.9718, 0.9769, 0.9811, 0.9846, 0.9874, 0.9898, 0.9917, 0.9932, 0.9945, 0.9955, 0.9964, 0.9971, 0.9976, 1);
    --hp-spring: linear(0, 0.0437, 0.1537, 0.3015, 0.4638, 0.6231, 0.767, 0.8882, 0.9832, 1.0518, 1.0962, 1.1196, 1.1263, 1.1206, 1.1066, 1.0879, 1.0674, 1.0473, 1.0292, 1.0139, 1.002, 0.9933, 0.9878, 0.9849, 0.984, 0.9848, 0.9866, 0.9889, 0.9915, 0.9941, 0.9963, 0.9983, 0.9998, 1.0009, 1.0016, 1.0019, 1);
    --hp-spring-soft: linear(0, 0.0237, 0.0841, 0.1678, 0.2643, 0.3655, 0.4655, 0.5602, 0.6468, 0.724, 0.7909, 0.8476, 0.8946, 0.9325, 0.9624, 0.9852, 1.002, 1.0138, 1.0215, 1.0261, 1.0281, 1.0283, 1.0271, 1.0251, 1.0225, 1.0197, 1.0169, 1.0141, 1.0115, 1.0091, 1.007, 1.0053, 1.0038, 1.0025, 1.0016, 1.0008, 1);
  }
}
.hero-art text { font-family: var(--font); font-variant-numeric: tabular-nums; }
.hero-art .hp-s1, .hero-art .hp-s2, .hero-art .hp-s4, .hero-art .hp-shade, .hero-art .hp-edge,
.hero-art .hp-np-tap, .hero-art .hp-noprev, .hero-art .hp-cut, .hero-art .hp-dim, .hero-art .hp-tap,
.hero-art .hp-ready2, .hero-art .hp-p12, .hero-art .hp-p38, .hero-art .hp-p63, .hero-art .hp-p87,
.hero-art .hp-sub2, .hero-art .hp-scan, .hero-art .hp-c24, .hero-art .hp-c71,
.hero-art .hp-pulse, .hero-art .hp-chk-ring, .hero-art .hp-badge, .hero-art .hp-badge-ring, .hero-art .hp-burst, .hero-art .hp-rv-glow { opacity: 0; }
.hero-art .hp-live { display: none; }
.hero-art.hp-js .hp-live { display: inline; }
.hero-art.hp-js .hp-fb { display: none; }
.hero-art .hp-sheet { transform: translateY(140px); }
.hero-art .hp-scene, .hero-art .hp-press, .hero-art .hp-blk, .hero-art .hp-in, .hero-art .hp-rv, .hero-art .hp-chip,
.hero-art .hp-chk, .hero-art .hp-chk-ring, .hero-art .hp-pulse, .hero-art .hp-badge, .hero-art .hp-badge-ring, .hero-art .hp-burst, .hero-art .hp-rv-glow,
.hero-art .hp-cut, .hero-art .hp-tap-dot, .hero-art .hp-tap-ring, .hero-art .hp-phone, .hero-art .hp-glow, .hero-art .hp-ground {
  transform-box: fill-box; transform-origin: center;
}
.hero-art .hp-scanfill, .hero-art .hp-cutfill { transform-box: fill-box; transform-origin: left center; }
.hero-art .hp-blk { transform-origin: center bottom; }
.hero-art .hp-in6 { transform-origin: center bottom; }

@media (prefers-reduced-motion: no-preference) {
  .hero-art { --hp-loop: 16s; }
  .hero-art .hp-edge { opacity: 1; }
  .hero-art .hp-tap { opacity: 1; }
  .hero-art .hp-s1 { animation: hp-s1 var(--hp-loop) linear infinite both; }
  .hero-art .hp-shade1 { animation: hp-shade1 var(--hp-loop) linear infinite both; }
  .hero-art .hp-s2 { animation: hp-s2 var(--hp-loop) linear infinite both; }
  .hero-art .hp-s3 { animation: hp-s3 var(--hp-loop) linear infinite both; }
  .hero-art .hp-shade3 { animation: hp-shade3 var(--hp-loop) linear infinite both; }
  .hero-art .hp-s4 { animation: hp-s4 var(--hp-loop) linear infinite both; }
  .hero-art .hp-tap { animation: hp-tap var(--hp-loop) linear infinite both; }
  .hero-art .hp-tap-dot { animation: hp-tap-dot var(--hp-loop) linear infinite both; }
  .hero-art .hp-tap-ring { animation: hp-tap-ring var(--hp-loop) linear infinite both; }
  .hero-art .hp-press-home { animation: hp-press-home var(--hp-loop) linear infinite both; }
  .hero-art .hp-press-reel { animation: hp-press-reel var(--hp-loop) linear infinite both; }
  .hero-art .hp-press-share { animation: hp-press-share var(--hp-loop) linear infinite both; }
  .hero-art .hp-done { animation: hp-done var(--hp-loop) linear infinite both; }
  .hero-art .hp-ext { animation: hp-ext var(--hp-loop) linear infinite both; }
  .hero-art .hp-scan { animation: hp-scan var(--hp-loop) linear infinite both; }
  .hero-art .hp-chk { animation: hp-chk var(--hp-loop) linear infinite both; }
  .hero-art .hp-chk-ring { animation: hp-chk-ring var(--hp-loop) linear infinite both; }
  .hero-art .hp-chk-done { animation: hp-chk-done var(--hp-loop) linear infinite both; }
  .hero-art .hp-scanfill { animation: hp-scanfill var(--hp-loop) linear infinite both; }
  .hero-art .hp-marker { animation: hp-marker var(--hp-loop) linear infinite both; }
  .hero-art .hp-ready1 { animation: hp-ready1 var(--hp-loop) linear infinite both; }
  .hero-art .hp-ready2 { animation: hp-ready2 var(--hp-loop) linear infinite both; }
  .hero-art .hp-p12 { animation: hp-p12 var(--hp-loop) linear infinite both; }
  .hero-art .hp-p38 { animation: hp-p38 var(--hp-loop) linear infinite both; }
  .hero-art .hp-p63 { animation: hp-p63 var(--hp-loop) linear infinite both; }
  .hero-art .hp-p87 { animation: hp-p87 var(--hp-loop) linear infinite both; }
  .hero-art .hp-p100 { animation: hp-p100 var(--hp-loop) linear infinite both; }
  .hero-art .hp-sub2 { animation: hp-sub2 var(--hp-loop) linear infinite both; }
  .hero-art .hp-sub3 { animation: hp-sub3 var(--hp-loop) linear infinite both; }
  .hero-art .hp-c24 { animation: hp-c24 var(--hp-loop) linear infinite both; }
  .hero-art .hp-c71 { animation: hp-c71 var(--hp-loop) linear infinite both; }
  .hero-art .hp-cfin { animation: hp-cfin var(--hp-loop) linear infinite both; }
  .hero-art .hp-in1 { animation: hp-in1 var(--hp-loop) linear infinite both; }
  .hero-art .hp-in2 { animation: hp-in2 var(--hp-loop) linear infinite both; }
  .hero-art .hp-in3 { animation: hp-in3 var(--hp-loop) linear infinite both; }
  .hero-art .hp-in4 { animation: hp-in4 var(--hp-loop) linear infinite both; }
  .hero-art .hp-in5 { animation: hp-in5 var(--hp-loop) linear infinite both; }
  .hero-art .hp-in6 { animation: hp-in6 var(--hp-loop) linear infinite both; }
  .hero-art .hp-blk1 { animation: hp-blk1 var(--hp-loop) linear infinite both; }
  .hero-art .hp-blk2 { animation: hp-blk2 var(--hp-loop) linear infinite both; }
  .hero-art .hp-blk3 { animation: hp-blk3 var(--hp-loop) linear infinite both; }
  .hero-art .hp-blk4 { animation: hp-blk4 var(--hp-loop) linear infinite both; }
  .hero-art .hp-blk5 { animation: hp-blk5 var(--hp-loop) linear infinite both; }
  .hero-art .hp-blk6 { animation: hp-blk6 var(--hp-loop) linear infinite both; }
  .hero-art .hp-blk7 { animation: hp-blk7 var(--hp-loop) linear infinite both; }
  .hero-art .hp-blk8 { animation: hp-blk8 var(--hp-loop) linear infinite both; }
  .hero-art .hp-blk9 { animation: hp-blk9 var(--hp-loop) linear infinite both; }
  .hero-art .hp-row1 { animation: hp-row1 var(--hp-loop) linear infinite both; }
  .hero-art .hp-row2 { animation: hp-row2 var(--hp-loop) linear infinite both; }
  .hero-art .hp-row3 { animation: hp-row3 var(--hp-loop) linear infinite both; }
  .hero-art .hp-prev { animation: hp-prev var(--hp-loop) linear infinite both; }
  .hero-art .hp-noprev { animation: hp-noprev var(--hp-loop) linear infinite both; }
  .hero-art .hp-np-tap { animation: hp-np-tap var(--hp-loop) linear infinite both; }
  .hero-art .hp-np-rally { animation: hp-np-rally var(--hp-loop) linear infinite both; }
  .hero-art .hp-vball1 { animation: hp-vball1 var(--hp-loop) linear infinite both; }
  .hero-art .hp-cutfill { animation: hp-cutfill var(--hp-loop) linear infinite both; }
  .hero-art .hp-cut { animation: hp-cut var(--hp-loop) linear infinite both; }
  .hero-art .hp-rv1 { animation: hp-rv1 var(--hp-loop) linear infinite both; }
  .hero-art .hp-rv-glow { animation: hp-rv-glow var(--hp-loop) linear infinite both; }
  .hero-art .hp-badge { animation: hp-badge var(--hp-loop) linear infinite both; }
  .hero-art .hp-badge-ring { animation: hp-badge-ring var(--hp-loop) linear infinite both; }
  .hero-art .hp-burst { animation: hp-burst var(--hp-loop) linear infinite both; }
  .hero-art .hp-rv2 { animation: hp-rv2 var(--hp-loop) linear infinite both; }
  .hero-art .hp-rv3 { animation: hp-rv3 var(--hp-loop) linear infinite both; }
  .hero-art .hp-rv4 { animation: hp-rv4 var(--hp-loop) linear infinite both; }
  .hero-art .hp-rv5 { animation: hp-rv5 var(--hp-loop) linear infinite both; }
  .hero-art .hp-rv6 { animation: hp-rv6 var(--hp-loop) linear infinite both; }
  .hero-art .hp-rv7 { animation: hp-rv7 var(--hp-loop) linear infinite both; }
  .hero-art .hp-chip1 { animation: hp-chip1 var(--hp-loop) linear infinite both; }
  .hero-art .hp-chip2 { animation: hp-chip2 var(--hp-loop) linear infinite both; }
  .hero-art .hp-chip3 { animation: hp-chip3 var(--hp-loop) linear infinite both; }
  .hero-art .hp-chip4 { animation: hp-chip4 var(--hp-loop) linear infinite both; }
  .hero-art .hp-chip5 { animation: hp-chip5 var(--hp-loop) linear infinite both; }
  .hero-art .hp-chip6 { animation: hp-chip6 var(--hp-loop) linear infinite both; }
  .hero-art .hp-chip7 { animation: hp-chip7 var(--hp-loop) linear infinite both; }
  .hero-art .hp-chip8 { animation: hp-chip8 var(--hp-loop) linear infinite both; }
  .hero-art .hp-vball2 { animation: hp-vball2 var(--hp-loop) linear infinite both; }
  .hero-art .hp-sheet { animation: hp-sheet var(--hp-loop) linear infinite both; }
  .hero-art .hp-dim { animation: hp-dim var(--hp-loop) linear infinite both; }
  .hero-art .hp-pulse { animation: hp-pulse 1s linear infinite both; }
  .hero-art .hp-clock { animation: hp-clock var(--hp-loop) linear infinite; } /* read by motion.js */
  /* ambient: periods divide the 16 s loop so 16 s == 0 s. No rotation: it softens the screen text. */
  .hero-art .hp-phone { animation: hp-float 4s ease-in-out infinite alternate both; }
  .hero-art .hp-ground { animation: hp-ground 4s ease-in-out infinite alternate both; }
  .hero-art .hp-glow { animation: hp-glow 8s ease-in-out infinite alternate both; }
  .hero-art .hp-ball { animation: hp-ball 4s ease-in-out infinite alternate both; }

  .hero-art.hp-off * { animation-play-state: paused !important; }
}

@keyframes hp-s1 {
  0% { opacity: 1; transform: none; }
  10.625% { opacity: 1; transform: none; animation-timing-function: var(--hp-push); }
  14.063% { opacity: 1; transform: translateX(-51px); }
  94.375% { opacity: 1; transform: translateX(-51px); animation-timing-function: var(--hp-push); }
  97.813% { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
@keyframes hp-shade1 {
  0% { opacity: 0; }
  10.625% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  14.063% { opacity: 1; }
  94.375% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  97.813% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hp-s2 {
  0% { opacity: 1; transform: translateX(185px) scale(.985); }
  10.625% { opacity: 1; transform: translateX(185px) scale(.985); animation-timing-function: var(--hp-push); }
  14.063% { opacity: 1; transform: none; }
  44.375% { opacity: 1; transform: none; }
  44.381% { opacity: 1; transform: translateX(185px) scale(.985); }
  100% { opacity: 1; transform: translateX(185px) scale(.985); }
}
@keyframes hp-s3 {
  0% { opacity: 0; transform: none; }
  42.5% { opacity: 0; transform: none; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  43.625% { opacity: 1; transform: none; }
  65% { opacity: 1; transform: none; animation-timing-function: var(--hp-push); }
  68.438% { opacity: 1; transform: translateX(-51px); }
  68.75% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes hp-shade3 {
  0% { opacity: 0; }
  65% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  68.438% { opacity: 1; }
  68.75% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hp-s4 {
  0% { opacity: 1; transform: translateX(185px) scale(.985); }
  65% { opacity: 1; transform: translateX(185px) scale(.985); animation-timing-function: var(--hp-push); }
  68.438% { opacity: 1; transform: none; }
  94.375% { opacity: 1; transform: none; animation-timing-function: var(--hp-push); }
  97.813% { opacity: 1; transform: translateX(185px) scale(.985); }
  100% { opacity: 1; transform: translateX(185px) scale(.985); }
}
@keyframes hp-tap {
  0% { transform: translate(85px, 150px); }
  48.437% { transform: translate(85px, 150px); }
  48.444% { transform: translate(150px, 231px); }
  60.313% { transform: translate(150px, 231px); }
  60.319% { transform: translate(85px, 310px); }
  81.25% { transform: translate(85px, 310px); }
  81.256% { transform: translate(45px, 246.5px); }
  90% { transform: translate(45px, 246.5px); }
  90.006% { transform: translate(153px, 33px); }
  98.75% { transform: translate(153px, 33px); }
  98.756% { transform: translate(85px, 150px); }
  100% { transform: translate(85px, 150px); }
}
@keyframes hp-tap-dot {
  0% { opacity: 0; transform: scale(1.4); }
  6.75% { opacity: 0; transform: scale(1.4); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  8.125% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  8.875% { opacity: 1; transform: scale(.8); }
  9.5% { opacity: 1; transform: scale(.8); animation-timing-function: var(--hp-spring-soft); }
  10.625% { opacity: .9; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  11.875% { opacity: 0; transform: scale(1.05); }
  11.881% { opacity: 0; transform: scale(1.4); }
  49.25% { opacity: 0; transform: scale(1.4); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  50.625% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  51.375% { opacity: 1; transform: scale(.8); }
  52% { opacity: 1; transform: scale(.8); animation-timing-function: var(--hp-spring-soft); }
  53.125% { opacity: .9; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  54.375% { opacity: 0; transform: scale(1.05); }
  54.381% { opacity: 0; transform: scale(1.4); }
  61.125% { opacity: 0; transform: scale(1.4); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  62.5% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  63.25% { opacity: 1; transform: scale(.8); }
  63.875% { opacity: 1; transform: scale(.8); animation-timing-function: var(--hp-spring-soft); }
  65% { opacity: .9; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  66.25% { opacity: 0; transform: scale(1.05); }
  66.256% { opacity: 0; transform: scale(1.4); }
  82.063% { opacity: 0; transform: scale(1.4); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  83.438% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  84.188% { opacity: 1; transform: scale(.8); }
  84.812% { opacity: 1; transform: scale(.8); animation-timing-function: var(--hp-spring-soft); }
  85.938% { opacity: .9; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  87.188% { opacity: 0; transform: scale(1.05); }
  87.194% { opacity: 0; transform: scale(1.4); }
  90.813% { opacity: 0; transform: scale(1.4); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  92.188% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  92.938% { opacity: 1; transform: scale(.8); }
  93.563% { opacity: 1; transform: scale(.8); animation-timing-function: var(--hp-spring-soft); }
  94.688% { opacity: .9; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  95.938% { opacity: 0; transform: scale(1.05); }
  95.944% { opacity: 0; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.4); }
}
@keyframes hp-tap-ring {
  0% { opacity: 0; transform: scale(.6); }
  9.375% { opacity: 0; transform: scale(.6); }
  9.5% { opacity: .8; transform: scale(.9); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  13.125% { opacity: 0; transform: scale(2.8); }
  13.131% { opacity: 0; transform: scale(.6); }
  51.875% { opacity: 0; transform: scale(.6); }
  52% { opacity: .8; transform: scale(.9); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  55.625% { opacity: 0; transform: scale(2.8); }
  55.631% { opacity: 0; transform: scale(.6); }
  63.75% { opacity: 0; transform: scale(.6); }
  63.875% { opacity: .8; transform: scale(.9); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  67.5% { opacity: 0; transform: scale(2.8); }
  67.506% { opacity: 0; transform: scale(.6); }
  84.688% { opacity: 0; transform: scale(.6); }
  84.812% { opacity: .8; transform: scale(.9); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  88.437% { opacity: 0; transform: scale(2.8); }
  88.444% { opacity: 0; transform: scale(.6); }
  93.438% { opacity: 0; transform: scale(.6); }
  93.563% { opacity: .8; transform: scale(.9); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  97.188% { opacity: 0; transform: scale(2.8); }
  97.194% { opacity: 0; transform: scale(.6); }
  100% { opacity: 0; transform: scale(.6); }
}
@keyframes hp-press-home {
  0% { opacity: 1; transform: none; }
  8.75% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  9.375% { opacity: .82; transform: scale(0.94); }
  9.625% { opacity: .82; transform: scale(0.94); animation-timing-function: var(--hp-spring); }
  13.125% { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
@keyframes hp-press-reel {
  0% { opacity: 1; transform: none; }
  63.125% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  63.75% { opacity: .82; transform: scale(0.95); }
  64% { opacity: .82; transform: scale(0.95); animation-timing-function: var(--hp-spring); }
  67.5% { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
@keyframes hp-press-share {
  0% { opacity: 1; transform: none; }
  84.063% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  84.688% { opacity: .82; transform: scale(0.92); }
  84.938% { opacity: .82; transform: scale(0.92); animation-timing-function: var(--hp-spring); }
  88.437% { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
@keyframes hp-done {
  0% { opacity: 1; }
  92.813% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  93.313% { opacity: .35; }
  94.063% { opacity: .35; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  95.625% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes hp-ext {
  0% { opacity: 1; transform: none; }
  20.938% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  21.875% { opacity: 0; transform: translateY(-4px); }
  45% { opacity: 0; transform: translateY(-4px); }
  45.006% { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
@keyframes hp-scan {
  0% { opacity: 0; transform: translateY(4px); }
  21.75% { opacity: 0; transform: translateY(4px); animation-timing-function: var(--hp-spring-soft); }
  24.063% { opacity: 1; transform: none; }
  45% { opacity: 1; transform: none; }
  45.006% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 0; transform: translateY(4px); }
}
@keyframes hp-chk {
  0% { opacity: 0; transform: scale(0); }
  21.563% { opacity: 0; transform: scale(0); animation-timing-function: var(--hp-spring); }
  25% { opacity: 1; transform: none; }
  45% { opacity: 1; transform: none; }
  45.006% { opacity: 0; transform: scale(0); }
  100% { opacity: 0; transform: scale(0); }
}
@keyframes hp-chk-ring {
  0% { opacity: 0; transform: scale(1); }
  22% { opacity: 0; transform: scale(1); }
  22.063% { opacity: .9; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  25.625% { opacity: 0; transform: scale(2.6); }
  45% { opacity: 0; transform: scale(2.6); }
  45.006% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes hp-chk-done {
  0% { opacity: 0; transform: translateX(4px); }
  22.813% { opacity: 0; transform: translateX(4px); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  25.313% { opacity: 1; transform: none; }
  45% { opacity: 1; transform: none; }
  45.006% { opacity: 0; transform: translateX(4px); }
  100% { opacity: 0; transform: translateX(4px); }
}
@keyframes hp-scanfill {
  0% { transform: scaleX(0); }
  21.875% { transform: scaleX(0); animation-timing-function: linear; }
  25.625% { transform: scaleX(0.2); animation-timing-function: linear; }
  31.25% { transform: scaleX(0.55); animation-timing-function: linear; }
  36.25% { transform: scaleX(0.86); animation-timing-function: linear; }
  39.375% { transform: scaleX(1); }
  45% { transform: scaleX(1); }
  45.006% { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}
@keyframes hp-marker {
  0% { transform: none; }
  21.875% { transform: none; animation-timing-function: linear; }
  25.625% { transform: translateX(31.2px); animation-timing-function: linear; }
  31.25% { transform: translateX(85.8px); animation-timing-function: linear; }
  36.25% { transform: translateX(134.16px); animation-timing-function: linear; }
  39.375% { transform: translateX(156px); }
  45% { transform: translateX(156px); }
  45.006% { transform: none; }
  100% { transform: none; }
}
@keyframes hp-ready1 {
  0% { opacity: 1; }
  17% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  17.75% { opacity: 0; }
  98.75% { opacity: 0; }
  98.756% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes hp-ready2 {
  0% { opacity: 0; }
  17% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  17.75% { opacity: 1; }
  98.75% { opacity: 1; }
  98.756% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hp-p12 {
  0% { opacity: 1; }
  24.5% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  25.25% { opacity: 0; }
  98.75% { opacity: 0; }
  98.756% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes hp-p38 {
  0% { opacity: 0; }
  24.5% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  25.25% { opacity: 1; }
  28.25% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  29% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hp-p63 {
  0% { opacity: 0; }
  28.25% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  29% { opacity: 1; }
  32.625% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  33.375% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hp-p87 {
  0% { opacity: 0; }
  32.625% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  33.375% { opacity: 1; }
  37.625% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  38.375% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hp-p100 {
  0% { opacity: 0; }
  37.625% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  38.375% { opacity: 1; }
  98.75% { opacity: 1; }
  98.756% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hp-sub2 {
  0% { opacity: 1; }
  35.75% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  36.5% { opacity: 0; }
  98.75% { opacity: 0; }
  98.756% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes hp-sub3 {
  0% { opacity: 0; }
  35.75% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  36.5% { opacity: 1; }
  98.75% { opacity: 1; }
  98.756% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hp-c24 {
  0% { opacity: 1; }
  70.75% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  71.5% { opacity: 0; }
  98.75% { opacity: 0; }
  98.756% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes hp-c71 {
  0% { opacity: 0; }
  70.75% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  71.5% { opacity: 1; }
  74.188% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  74.937% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hp-cfin {
  0% { opacity: 0; }
  74.188% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  74.937% { opacity: 1; }
  98.75% { opacity: 1; }
  98.756% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hp-in1 {
  0% { opacity: 0; transform: scale(.96); }
  42.5% { opacity: 0; transform: scale(.96); animation-timing-function: var(--hp-spring-soft); }
  45.938% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: scale(.96); }
  100% { opacity: 0; transform: scale(.96); }
}
@keyframes hp-in2 {
  0% { opacity: 0; transform: translateY(8px); }
  43% { opacity: 0; transform: translateY(8px); animation-timing-function: var(--hp-spring-soft); }
  46.438% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 0; transform: translateY(8px); }
}
@keyframes hp-in3 {
  0% { opacity: 0; transform: translateY(8px); }
  43.375% { opacity: 0; transform: translateY(8px); animation-timing-function: var(--hp-spring-soft); }
  46.812% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 0; transform: translateY(8px); }
}
@keyframes hp-in4 {
  0% { opacity: 0; transform: translateY(8px); }
  43.75% { opacity: 0; transform: translateY(8px); animation-timing-function: var(--hp-spring-soft); }
  47.188% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 0; transform: translateY(8px); }
}
@keyframes hp-in5 {
  0% { opacity: 0; transform: translateY(10px); }
  44.125% { opacity: 0; transform: translateY(10px); animation-timing-function: var(--hp-spring-soft); }
  47.563% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}
@keyframes hp-in6 {
  0% { opacity: 0; transform: translateY(44px); }
  43.75% { opacity: 0; transform: translateY(44px); animation-timing-function: var(--hp-spring-soft); }
  47.188% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: translateY(44px); }
  100% { opacity: 0; transform: translateY(44px); }
}
@keyframes hp-blk1 {
  0% { opacity: 0; transform: scaleY(0); }
  44.344% { opacity: 0; transform: scaleY(0); animation-timing-function: var(--hp-spring); }
  47.156% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: scaleY(0); }
  100% { opacity: 0; transform: scaleY(0); }
}
@keyframes hp-blk2 {
  0% { opacity: 0; transform: scaleY(0); }
  44.625% { opacity: 0; transform: scaleY(0); animation-timing-function: var(--hp-spring); }
  47.438% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: scaleY(0); }
  100% { opacity: 0; transform: scaleY(0); }
}
@keyframes hp-blk3 {
  0% { opacity: 0; transform: scaleY(0); }
  44.906% { opacity: 0; transform: scaleY(0); animation-timing-function: var(--hp-spring); }
  47.719% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: scaleY(0); }
  100% { opacity: 0; transform: scaleY(0); }
}
@keyframes hp-blk4 {
  0% { opacity: 0; transform: scaleY(0); }
  45.188% { opacity: 0; transform: scaleY(0); animation-timing-function: var(--hp-spring); }
  48% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: scaleY(0); }
  100% { opacity: 0; transform: scaleY(0); }
}
@keyframes hp-blk5 {
  0% { opacity: 0; transform: scaleY(0); }
  45.469% { opacity: 0; transform: scaleY(0); animation-timing-function: var(--hp-spring); }
  48.281% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: scaleY(0); }
  100% { opacity: 0; transform: scaleY(0); }
}
@keyframes hp-blk6 {
  0% { opacity: 0; transform: scaleY(0); }
  45.75% { opacity: 0; transform: scaleY(0); animation-timing-function: var(--hp-spring); }
  48.563% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: scaleY(0); }
  100% { opacity: 0; transform: scaleY(0); }
}
@keyframes hp-blk7 {
  0% { opacity: 0; transform: scaleY(0); }
  46.031% { opacity: 0; transform: scaleY(0); animation-timing-function: var(--hp-spring); }
  48.844% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: scaleY(0); }
  100% { opacity: 0; transform: scaleY(0); }
}
@keyframes hp-blk8 {
  0% { opacity: 0; transform: scaleY(0); }
  46.313% { opacity: 0; transform: scaleY(0); animation-timing-function: var(--hp-spring); }
  49.125% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: scaleY(0); }
  100% { opacity: 0; transform: scaleY(0); }
}
@keyframes hp-blk9 {
  0% { opacity: 0; transform: scaleY(0); }
  46.594% { opacity: 0; transform: scaleY(0); animation-timing-function: var(--hp-spring); }
  49.406% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: scaleY(0); }
  100% { opacity: 0; transform: scaleY(0); }
}
@keyframes hp-row1 {
  0% { opacity: 0; transform: translateY(10px); }
  44.5% { opacity: 0; transform: translateY(10px); animation-timing-function: var(--hp-spring-soft); }
  47.938% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}
@keyframes hp-row2 {
  0% { opacity: 0; transform: translateY(10px); }
  45.063% { opacity: 0; transform: translateY(10px); animation-timing-function: var(--hp-spring-soft); }
  48.5% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}
@keyframes hp-row3 {
  0% { opacity: 0; transform: translateY(10px); }
  45.625% { opacity: 0; transform: translateY(10px); animation-timing-function: var(--hp-spring-soft); }
  49.063% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}
@keyframes hp-prev {
  0% { opacity: 0; }
  52% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  53.125% { opacity: 1; }
  61.875% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  63% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hp-noprev {
  0% { opacity: 1; }
  52% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  53.125% { opacity: 0; }
  61.875% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  63% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes hp-np-tap {
  0% { opacity: .5; }
  52% { opacity: .5; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  53.125% { opacity: 0; }
  68.75% { opacity: 0; }
  68.756% { opacity: .5; }
  100% { opacity: .5; }
}
@keyframes hp-np-rally {
  0% { opacity: 0; transform: translateY(3px); }
  52% { opacity: 0; transform: translateY(3px); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  54.187% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: translateY(3px); }
  100% { opacity: 0; transform: translateY(3px); }
}
@keyframes hp-vball1 {
  0% { opacity: 0; transform: translate(-80px, 44px); }
  52.625% { opacity: 0; transform: translate(-80px, 44px); animation-timing-function: linear; }
  53.125% { opacity: 1; transform: translate(-75.4px, 36.6px); animation-timing-function: linear; }
  54.781% { opacity: 1; transform: translate(-60px, 12px); animation-timing-function: linear; }
  56.938% { opacity: 1; transform: translate(-40px, -6px); animation-timing-function: linear; }
  59.094% { opacity: 1; transform: translate(-20px, -10px); animation-timing-function: linear; }
  61.25% { opacity: 1; transform: none; }
  68.75% { opacity: 1; transform: none; }
  68.756% { opacity: 0; transform: translate(-80px, 44px); }
  100% { opacity: 0; transform: translate(-80px, 44px); }
}
@keyframes hp-cutfill {
  0% { transform: scaleX(.02); }
  68.75% { transform: scaleX(0.02); animation-timing-function: linear; }
  70.625% { transform: scaleX(0.24); animation-timing-function: linear; }
  72.5% { transform: scaleX(0.6); animation-timing-function: linear; }
  74.688% { transform: scaleX(1); }
  98.75% { transform: scaleX(1); }
  98.756% { transform: scaleX(.02); }
  100% { transform: scaleX(.02); }
}
@keyframes hp-cut {
  0% { opacity: 1; transform: none; }
  75.625% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  77% { opacity: 0; transform: scale(.94); }
  98.75% { opacity: 0; transform: scale(.94); }
  98.756% { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
@keyframes hp-rv1 {
  0% { opacity: 0; transform: scale(.86); }
  76.25% { opacity: 0; transform: scale(.86); animation-timing-function: var(--hp-spring); }
  80% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: scale(.86); }
  100% { opacity: 0; transform: scale(.86); }
}
@keyframes hp-rv-glow {
  0% { opacity: 0; transform: scale(.92); }
  76.875% { opacity: 0; transform: scale(.92); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  77.5% { opacity: .95; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  82.187% { opacity: 0; transform: scale(1.14); }
  98.75% { opacity: 0; transform: scale(1.14); }
  98.756% { opacity: 0; transform: scale(.92); }
  100% { opacity: 0; transform: scale(.92); }
}
@keyframes hp-badge {
  0% { opacity: 0; transform: scale(0); }
  77.625% { opacity: 0; transform: scale(0); animation-timing-function: var(--hp-spring); }
  81.063% { opacity: 1; transform: none; }
  83.563% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5,0,.75,0); }
  85.125% { opacity: 0; transform: scale(.6); }
  98.75% { opacity: 0; transform: scale(.6); }
  98.756% { opacity: 0; transform: scale(0); }
  100% { opacity: 0; transform: scale(0); }
}
@keyframes hp-badge-ring {
  0% { opacity: 0; transform: scale(1); }
  78.063% { opacity: 0; transform: scale(1); }
  78.125% { opacity: .9; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  82% { opacity: 0; transform: scale(2.3); }
  98.75% { opacity: 0; transform: scale(2.3); }
  98.756% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes hp-burst {
  0% { opacity: 0; transform: scale(.55); }
  78.25% { opacity: 0; transform: scale(.55); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  78.625% { opacity: 1; transform: scale(.7); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  81.688% { opacity: 0; transform: scale(1.45); }
  98.75% { opacity: 0; transform: scale(1.45); }
  98.756% { opacity: 0; transform: scale(.55); }
  100% { opacity: 0; transform: scale(.55); }
}
@keyframes hp-rv2 {
  0% { opacity: 0; transform: translateY(10px); }
  78.125% { opacity: 0; transform: translateY(10px); animation-timing-function: var(--hp-spring-soft); }
  81.563% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}
@keyframes hp-rv3 {
  0% { opacity: 0; transform: translateY(10px); }
  78.625% { opacity: 0; transform: translateY(10px); animation-timing-function: var(--hp-spring-soft); }
  82.063% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}
@keyframes hp-rv4 {
  0% { opacity: 0; transform: translateY(10px); }
  79.125% { opacity: 0; transform: translateY(10px); animation-timing-function: var(--hp-spring-soft); }
  82.563% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}
@keyframes hp-rv5 {
  0% { opacity: 0; transform: translateY(10px); }
  79.625% { opacity: 0; transform: translateY(10px); animation-timing-function: var(--hp-spring-soft); }
  83.063% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}
@keyframes hp-rv6 {
  0% { opacity: 0; transform: translateY(10px); }
  80.125% { opacity: 0; transform: translateY(10px); animation-timing-function: var(--hp-spring-soft); }
  83.563% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}
@keyframes hp-rv7 {
  0% { opacity: 0; transform: translateY(10px); }
  80.625% { opacity: 0; transform: translateY(10px); animation-timing-function: var(--hp-spring-soft); }
  84.063% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}
@keyframes hp-chip1 {
  0% { opacity: 0; transform: scale(.4); }
  81.531% { opacity: 0; transform: scale(.4); animation-timing-function: var(--hp-spring); }
  84.344% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: scale(.4); }
  100% { opacity: 0; transform: scale(.4); }
}
@keyframes hp-chip2 {
  0% { opacity: 0; transform: scale(.4); }
  81.813% { opacity: 0; transform: scale(.4); animation-timing-function: var(--hp-spring); }
  84.625% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: scale(.4); }
  100% { opacity: 0; transform: scale(.4); }
}
@keyframes hp-chip3 {
  0% { opacity: 0; transform: scale(.4); }
  82.094% { opacity: 0; transform: scale(.4); animation-timing-function: var(--hp-spring); }
  84.906% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: scale(.4); }
  100% { opacity: 0; transform: scale(.4); }
}
@keyframes hp-chip4 {
  0% { opacity: 0; transform: scale(.4); }
  82.375% { opacity: 0; transform: scale(.4); animation-timing-function: var(--hp-spring); }
  85.188% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: scale(.4); }
  100% { opacity: 0; transform: scale(.4); }
}
@keyframes hp-chip5 {
  0% { opacity: 0; transform: scale(.4); }
  82.656% { opacity: 0; transform: scale(.4); animation-timing-function: var(--hp-spring); }
  85.469% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: scale(.4); }
  100% { opacity: 0; transform: scale(.4); }
}
@keyframes hp-chip6 {
  0% { opacity: 0; transform: scale(.4); }
  82.938% { opacity: 0; transform: scale(.4); animation-timing-function: var(--hp-spring); }
  85.75% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: scale(.4); }
  100% { opacity: 0; transform: scale(.4); }
}
@keyframes hp-chip7 {
  0% { opacity: 0; transform: scale(.4); }
  83.219% { opacity: 0; transform: scale(.4); animation-timing-function: var(--hp-spring); }
  86.031% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: scale(.4); }
  100% { opacity: 0; transform: scale(.4); }
}
@keyframes hp-chip8 {
  0% { opacity: 0; transform: scale(.4); }
  83.5% { opacity: 0; transform: scale(.4); animation-timing-function: var(--hp-spring); }
  86.312% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: scale(.4); }
  100% { opacity: 0; transform: scale(.4); }
}
@keyframes hp-vball2 {
  0% { opacity: 0; transform: translate(-80px, 44px); }
  79.375% { opacity: 0; transform: translate(-80px, 44px); animation-timing-function: linear; }
  79.875% { opacity: 1; transform: translate(-75.4px, 36.6px); animation-timing-function: linear; }
  81.563% { opacity: 1; transform: translate(-60px, 12px); animation-timing-function: linear; }
  83.75% { opacity: 1; transform: translate(-40px, -6px); animation-timing-function: linear; }
  85.938% { opacity: 1; transform: translate(-20px, -10px); animation-timing-function: linear; }
  88.125% { opacity: 1; transform: none; }
  98.75% { opacity: 1; transform: none; }
  98.756% { opacity: 0; transform: translate(-80px, 44px); }
  100% { opacity: 0; transform: translate(-80px, 44px); }
}
@keyframes hp-sheet {
  0% { transform: translateY(140px); }
  85% { transform: translateY(140px); animation-timing-function: var(--hp-spring-soft); }
  88.125% { transform: none; }
  90% { transform: none; animation-timing-function: cubic-bezier(.5,0,.75,0); }
  91.875% { transform: translateY(140px); }
  100% { transform: translateY(140px); }
}
@keyframes hp-dim {
  0% { opacity: 0; }
  85% { opacity: 0; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  86.875% { opacity: 1; }
  90% { opacity: 1; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  91.875% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hp-pulse { 0% { opacity: .5; transform: scale(1); animation-timing-function: cubic-bezier(.22,.61,.36,1); } 70%, 100% { opacity: 0; transform: scale(2.1); } }
@keyframes hp-clock { to { opacity: 0; } }
@keyframes hp-float { from { transform: none; } to { transform: translateY(-5px); } }
@keyframes hp-ground { from { opacity: 1; transform: none; } to { opacity: .7; transform: scale(.9); } }
@keyframes hp-glow { from { opacity: .75; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes hp-ball { from { transform: none; } to { transform: translateY(-6px) rotate(8deg); } }

/* Sections */
.section { padding: 4rem 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 38rem; margin-bottom: 2.25rem; }
.section-head p { color: var(--muted); margin: 0; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: step; }
.step {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.step-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--brand-soft); margin-bottom: 1rem;
}
.step-icon svg { width: 28px; height: 28px; }
.step-icon { color: var(--brand); }
.section-cta { padding-top: 0; }
.step-num {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-size: .8rem; font-weight: 700; color: var(--muted);
  letter-spacing: .06em;
}
.step p { margin: 0; color: var(--muted); }

/* Step illustrations: static final state by default; animated only with JS + motion allowed */
.step-art {
  background: var(--brand-soft);
  border-radius: 14px;
  margin: 0 0 1.1rem;
  overflow: hidden;
}
.step-art svg { display: block; width: 100%; height: auto; }
.step-art .pc-pop, .step-art .pc-press, .step-art .pc-rec-btn { transform-box: fill-box; transform-origin: center; }
.step-art .pc-pop-y { transform-box: fill-box; transform-origin: center bottom; }
.step-art .pc-grow-x { transform-box: fill-box; transform-origin: left center; }

@media (prefers-reduced-motion: no-preference) {
  .motion .step-art .pc-rise { animation: pc-rise .6s cubic-bezier(.2,.7,.2,1) both paused; }
  .motion .step-art .pc-fade { animation: pc-fade .4s ease .5s both paused; }
  .motion .step-art .pc-blink { animation: pc-blink 1s ease-in-out .6s 3 both paused; }
  .motion .step-art .pc-rec-btn { animation: pc-press .5s ease .4s both paused; }
  .motion .step-art .pc-grow-x { animation: pc-grow-x 2.4s linear .6s both paused; }
  .motion .step-art .pc-ball { animation: pc-ball 1.3s linear .8s both paused; }
  .motion .step-art .pc-trail { animation: pc-fade .5s ease 2s both paused; }

  .motion .step-art .pc-scan { animation: pc-scan 2.4s linear .2s both paused; }
  .motion .step-art .pc-pop-y { animation: pc-pop-y .45s cubic-bezier(.3,1.4,.5,1) both paused; }
  .motion .step-art-detect .pc-d1 { animation-delay: .55s; }
  .motion .step-art-detect .pc-d2 { animation-delay: 1.35s; }
  .motion .step-art-detect .pc-d3 { animation-delay: 2.15s; }
  .motion .step-art-detect .pc-pop { animation: pc-pop .5s cubic-bezier(.3,1.4,.5,1) 2.7s both paused; }

  .motion .step-art-share .pc-pop { animation: pc-pop .5s cubic-bezier(.3,1.4,.5,1) both paused; }
  .motion .step-art .pc-press { animation: pc-press .4s ease 1.3s both paused; }
  .motion .step-art .pc-send { animation: pc-send .55s cubic-bezier(.2,.7,.2,1) both paused; }
  .motion .step-art-share .pc-d1 { animation-delay: .1s; }
  .motion .step-art-share .pc-d2 { animation-delay: .25s; }
  .motion .step-art-share .pc-d3 { animation-delay: .4s; }
  .motion .step-art-share .pc-d4 { animation-delay: .95s; }
  .motion .step-art-share .pc-d5 { animation-delay: 1.55s; }
  .motion .step-art-share .pc-d6 { animation-delay: 1.7s; }
  .motion .step-art-share .pc-d7 { animation-delay: 1.85s; }

  .motion .step-art.is-in * { animation-play-state: running; }
}

@keyframes pc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes pc-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pc-press { 0%, 100% { transform: scale(1); } 45% { transform: scale(.88); } }
@keyframes pc-pop { from { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }
@keyframes pc-pop-y { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes pc-scan { from { transform: translateX(-208px); } to { transform: translateX(0); } }
@keyframes pc-send { from { opacity: 0; transform: translateX(-40px) scale(.6); } to { opacity: 1; transform: none; } }
/* Ball follows the dashed arc (M76 92 Q132 4 188 54) and lands at its final spot */
@keyframes pc-ball {
  0%   { opacity: 0; transform: translate(-112px, 38px); }
  8%   { opacity: 1; }
  25%  { transform: translate(-84px, 2.6px); }
  50%  { transform: translate(-56px, -15.5px); }
  75%  { transform: translate(-28px, -16.4px); }
  100% { opacity: 1; transform: translate(0, 0); }
}

/* Features */
.features { display: grid; gap: 1rem; }
.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.35rem 1.4rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
.feature svg { width: 26px; height: 26px; flex: none; margin-top: .15rem; color: var(--brand); }
.feature h3 { margin-bottom: .3rem; font-size: 1.1rem; }
.feature p { margin: 0; color: var(--muted); font-size: .98rem; }

/* CTA */
.cta {
  background: var(--ink);
  color: #f1f7f3;
  border-radius: 28px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta h2 { color: #fff; }
.cta p { color: #c3d3c9; max-width: 32rem; margin: 0 auto 1.75rem; }
.cta .court {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .12; pointer-events: none;
}
.cta > *:not(.court) { position: relative; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0;
  color: var(--muted);
  font-size: .93rem;
}
.site-footer .container { display: flex; flex-direction: column; gap: .75rem; }
.site-footer p { margin: 0; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.site-footer p a { color: var(--text); font-weight: 600; }

/* Page (support/privacy) */
.page { padding: 3.5rem 0 4rem; }
.page .container { max-width: 760px; }
.page h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
.page h2 { font-size: 1.4rem; margin-top: 2.5rem; }
.page ul { padding-left: 1.25rem; }
.meta { color: var(--muted); margin-bottom: 1.5rem; }
.note {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-left: 4px solid var(--lime);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  color: var(--muted);
  font-size: .95rem;
}
.confirm {
  background: #fff4d6; color: #6b4b00;
  padding: 0 .3rem; border-radius: 4px; font-weight: 600;
}
@media (prefers-color-scheme: dark) { .confirm { background: #4a3a10; color: #ffe39a; } }

.contact-card {
  background: var(--brand-soft);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  margin: 1.5rem 0 1rem;
}
.contact-card p { margin: 0 0 .75rem; color: var(--muted); }
.contact-card .email { font-size: 1.15rem; font-weight: 700; word-break: break-all; }

.faq { margin-top: 1rem; display: grid; gap: .75rem; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 1.25rem;
}
.faq summary {
  cursor: pointer;
  font-weight: 650;
  padding: 1rem 0;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--brand);
  line-height: 1; transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1rem; color: var(--muted); }

@media (min-width: 720px) {
  .container { padding: 0 2rem; }
  .hero { padding: 6rem 0 5rem; }
  .hero-grid { grid-template-columns: 1.15fr 1fr; }
  .section { padding: 5.5rem 0; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .features { grid-template-columns: 1fr 1fr; }
  .cta { padding: 4rem 3rem; }
  .site-footer .container { flex-direction: row; justify-content: space-between; align-items: center; }
}

.nav a { white-space: nowrap; }

@media (max-width: 420px) {
  .site-header .container { gap: .5rem; }
  .brand { gap: .45rem; font-size: 1.05rem; }
  .brand svg { width: 26px; height: 26px; }
  .nav ul { gap: 0; }
  .nav a { padding: .45rem .45rem; font-size: .875rem; }
}