/* The marketing site (pifriendz.com). Built by tools/build-site.mjs. */
:root {
  --cream: #fff7e8;
  --lav: #ede7ff;
  --ink: #2b2347;
  --ink2: #5b5278;
  --grape: #6c4ddc;
  --sun: #ffbe2e;
  --sun-deep: #e69a00;
  --line: #eadfc8;
  --paper: #fff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Rubik, 'Segoe UI', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', Arial, sans-serif; color: var(--ink); background: var(--cream); line-height: 1.5; -webkit-text-size-adjust: 100%; }
img { max-inline-size: 100%; block-size: auto; }
a { color: var(--grape); }
h1, h2, h3 { line-height: 1.12; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 800; text-align: center; }
p { margin: 0; }
.lead { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--ink2); text-wrap: balance; }
section { padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem); }
section > h2 + .lead { text-align: center; max-inline-size: 42rem; margin: 0.8rem auto 0; }

.top { position: sticky; inset-block-start: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; padding: 0.6rem clamp(1rem, 4vw, 2rem); background: #fff7e8ee; backdrop-filter: blur(8px); border-block-end: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.25rem; color: var(--grape); text-decoration: none; }
.brand img { border-radius: 0.6rem; }
.top nav { display: flex; gap: 1.2rem; margin-inline-start: auto; }
.top nav a, .lang { color: var(--ink); text-decoration: none; font-weight: 600; }
.top nav a:hover, .lang:hover { color: var(--grape); }

.btn { display: inline-block; background: var(--sun); color: var(--ink); font-weight: 800; text-decoration: none; border-radius: 1rem; padding: 0.7rem 1.4rem; box-shadow: 0 4px 0 var(--sun-deep); transition: transform 0.08s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(4px); box-shadow: none; }
.btn-big { font-size: 1.3rem; padding: 1rem 2rem; border-radius: 1.2rem; }
.btn-small { padding: 0.45rem 1rem; box-shadow: 0 3px 0 var(--sun-deep); }

.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center; max-inline-size: 72rem; margin: 0 auto; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.02em; }
.hero h1 span { color: var(--grape); }
.hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.note { color: var(--ink2); font-size: 0.95rem; }
.soon { font-size: 0.9rem; font-weight: 600; color: var(--grape); background: var(--lav); border-radius: 99px; padding: 0.3rem 0.9rem; }
.hero-art { position: relative; display: grid; place-items: center; padding: 1rem 2.5rem; }
.phone { background: var(--ink); border-radius: 2.2rem; padding: 0.55rem; box-shadow: 0 24px 50px #2b234733; inline-size: min(100%, 19rem); }
.phone img { display: block; inline-size: 100%; border-radius: 1.7rem; }
.float { position: absolute; inline-size: 6.5rem; block-size: 6.5rem; border-radius: 1.5rem; border: 5px solid #fff; box-shadow: 0 10px 22px #2b234733; object-fit: cover; animation: bob 5s ease-in-out infinite; }
.f1 { inset-block-start: 6%; inset-inline-start: 0; --tilt: -8deg; }
.f2 { inset-block-start: 40%; inset-inline-end: 0; --tilt: 7deg; animation-delay: -1.6s; }
.f3 { inset-block-end: 6%; inset-inline-start: 2%; --tilt: 5deg; animation-delay: -3.1s; }
@keyframes bob { 0%, 100% { transform: rotate(var(--tilt)) translateY(0); } 50% { transform: rotate(var(--tilt)) translateY(-10px); } }

.trick { background: linear-gradient(180deg, var(--cream), var(--lav)); }
.code { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.4rem, 1.5vw, 1rem); max-inline-size: 46rem; margin: 2rem auto 0; }
.code-cell { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; background: var(--paper); border: 3px solid var(--c); border-radius: 1.2rem; padding: 0.6rem 0.3rem; text-align: center; min-inline-size: 0; }
.code-cell b { font-size: clamp(1.8rem, 6vw, 3rem); line-height: 1; color: var(--c); }
.code-cell img { inline-size: 100%; max-inline-size: 6.5rem; aspect-ratio: 1; object-fit: cover; border-radius: 0.8rem; }
.code-cell span { font-size: 0.75rem; color: var(--ink2); text-transform: uppercase; letter-spacing: 0.04em; }
.code-cell strong { font-size: clamp(0.75rem, 2.2vw, 1rem); line-height: 1.15; }
.c0 { --c: #f08a24; } .c1 { --c: #1fa59a; } .c2 { --c: #e0457b; } .c3 { --c: #b8950a; } .c4 { --c: #2f7fd6; }
.equals { display: flex; align-items: center; justify-content: center; gap: 1.5rem; max-inline-size: 46rem; margin: 2rem auto 0; background: var(--paper); border-radius: 1.6rem; padding: 1.2rem; border: 2px solid var(--line); }
.equals img { inline-size: clamp(7rem, 30vw, 12rem); border-radius: 1.2rem; flex: none; }
.digits { font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 800; letter-spacing: 0.1em; color: var(--grape); }
.result { font-size: 1.2rem; font-weight: 700; margin-block: 0.2rem 0.5rem; }

.steps { list-style: none; padding: 0; margin: 2rem auto 0; max-inline-size: 64rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.steps li { background: var(--paper); border: 2px solid var(--line); border-radius: 1.4rem; padding: 1.2rem; box-shadow: 0 4px 0 var(--line); }
.num { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; background: var(--grape); color: #fff; font-weight: 800; font-size: 1.2rem; margin-block-end: 0.7rem; }
.steps h3 { font-size: 1.2rem; margin-block-end: 0.4rem; }
.steps p { color: var(--ink2); }

.friends { display: flex; gap: 0.8rem; padding-block: 0; overflow: hidden; justify-content: center; }
.friends img { inline-size: clamp(4.5rem, 11vw, 8rem); block-size: auto; aspect-ratio: 1; border-radius: 1.2rem; border: 4px solid #fff; box-shadow: 0 6px 14px #2b234722; flex: none; }
.friends img:nth-child(odd) { transform: rotate(-4deg); }
.friends img:nth-child(even) { transform: rotate(4deg) translateY(8px); }

.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.9rem; max-inline-size: 64rem; margin: 2rem auto 0; }
.game-grid figure { margin: 0; background: var(--paper); border: 2px solid var(--line); border-radius: 1.2rem; overflow: hidden; box-shadow: 0 4px 0 var(--line); }
.game-grid img { display: block; inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.game-grid figcaption { padding: 0.5rem 0.7rem 0.6rem; font-weight: 700; }

.who { background: var(--lav); }
.who-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-inline-size: 56rem; margin: 2rem auto 0; }
.who-card { background: var(--paper); border-radius: 1.6rem; padding: 1.4rem 1.5rem; border-block-start: 8px solid var(--sun); }
.who-card.w1 { border-block-start-color: var(--grape); }
.who-card h3 { font-size: 1.5rem; margin-block-end: 0.6rem; }
.who-card ul { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.4rem; }

.shot-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-inline-size: 68rem; margin: 2rem auto 0; justify-items: center; }
.shot-row .phone { inline-size: 100%; }

.end { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; background: linear-gradient(180deg, var(--cream), #ffe9b8); }
.end img { border-radius: 1.5rem; box-shadow: 0 10px 22px #2b234733; }

footer { text-align: center; padding: 2rem 1rem; color: var(--ink2); font-size: 0.95rem; display: grid; gap: 0.4rem; background: #ffe9b8; }

@media (max-width: 800px) {
  .top nav { display: none; }
  .langmenu { margin-inline-start: auto; }
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-text { align-items: center; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who-grid { grid-template-columns: 1fr; }
  .equals { flex-direction: column; text-align: center; }
  .friends img:nth-child(n + 7) { display: none; }
}
@media (max-width: 420px) {
  .steps { grid-template-columns: 1fr; }
  .float { inline-size: 4.8rem; block-size: 4.8rem; }
  .hero-art { padding-inline: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .float { animation: none; transform: rotate(var(--tilt)); }
  html { scroll-behavior: auto; }
}

.more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-inline-size: 60rem; margin: 2rem auto 0; }
.more-card { display: flex; gap: 1rem; align-items: center; background: var(--paper); border: 2px solid var(--line); border-radius: 1.6rem; padding: 1rem; box-shadow: 0 4px 0 var(--line); }
.more-card img { flex: none; inline-size: clamp(6rem, 22vw, 9rem); block-size: auto; aspect-ratio: 1; border-radius: 1.1rem; object-fit: cover; }
.more-card h3 { font-size: 1.3rem; margin-block-end: 0.3rem; }
.more-card p { color: var(--ink2); }
@media (max-width: 800px) { .more-grid { grid-template-columns: 1fr; } }

.support { background: var(--lav); scroll-margin-block-start: 4rem; }
.support-box { max-inline-size: 44rem; margin: 0 auto; background: var(--paper); border-radius: 2rem; padding: clamp(1.5rem, 5vw, 2.5rem); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; border-block-start: 8px solid var(--grape); }
.support-heart { font-size: 2.6rem; line-height: 1; color: var(--grape); }

.hero-buttons { display: flex; flex-wrap: nowrap; gap: 0.7rem; align-items: stretch; }
.hero-buttons .btn { display: flex; align-items: center; justify-content: center; gap: 0.35rem; text-align: center; white-space: nowrap; }
.btn-support { background: var(--grape); color: #fff; box-shadow: 0 4px 0 #4a31ad; }
@media (max-width: 800px) {
  .hero-buttons { inline-size: 100%; justify-content: center; }
  .hero-buttons .btn { flex: 1 1 0; min-inline-size: 0; font-size: 1rem; padding: 0.9rem 0.5rem; white-space: normal; line-height: 1.15; }
}

.legal { max-inline-size: 44rem; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2rem) 4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.legal h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.legal h2 { font-size: 1.25rem; text-align: start; margin-block-start: 1rem; }

/* Language menu */
.top-spacer { flex: 1; }
.langmenu { position: relative; }
.langmenu summary { list-style: none; cursor: pointer; font-weight: 600; padding: 0.4rem 0.7rem; border-radius: 0.8rem; border: 2px solid var(--line); background: var(--paper); white-space: nowrap; user-select: none; }
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu[open] summary { border-color: var(--grape); }
.langmenu ul { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.35rem); margin: 0; padding: 0.3rem; list-style: none; background: var(--paper); border: 2px solid var(--line); border-radius: 1rem; box-shadow: 0 10px 24px #2b234722; min-inline-size: 9.5rem; z-index: 10; }
.langmenu a { display: block; padding: 0.5rem 0.8rem; border-radius: 0.6rem; color: var(--ink); text-decoration: none; font-weight: 600; }
.langmenu a:hover, .langmenu a[aria-current] { background: var(--lav); color: var(--grape); }
footer a { margin-inline: 0.15rem; }