.hero__inner { display: grid; gap: 48px; align-items: center; padding-block: 72px 96px; }
.hero__title { max-width: 13ch; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 600; }
.hero__lead { max-width: 46ch; margin-top: 20px; color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
@media (min-width: 980px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; padding-block: 104px 128px; }
}

.hero__copy > *, .frame { animation: rise 640ms var(--ease-out) both; }
.hero__lead { animation-delay: 70ms; }
.hero__actions { animation-delay: 140ms; }
.frame { animation-delay: 200ms; }
@keyframes rise { from { opacity: 0; translate: 0 16px; } }

.section { padding: 64px 0 72px; scroll-margin-top: 56px; }
.section .wrap > :first-child {
  margin-bottom: 28px; padding-bottom: 18px;
  border-bottom: 1px solid; border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent 75%) 1;
}
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.section__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; }
.section__link { color: var(--text-2); font-size: 0.9375rem; text-underline-offset: 4px; transition: color var(--ease); }
.section__link:hover { color: var(--text); }

.frame { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--card); }
.frame::before { content: ""; position: absolute; inset: 0 24px auto; height: 1px; background: var(--sheen); }
.frame__top {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent) 1;
}
.frame__top img { width: 28px; height: 28px; }
.frame__top p { display: grid; gap: 2px; line-height: 1.25; }
.frame__top b { font-size: 0.875rem; font-weight: 600; }
.frame__top span { color: var(--text-2); font-size: 0.75rem; }
.frame__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; align-items: center; padding: 12px 18px;
  border-top: 1px solid var(--border); color: var(--text-3); font: 500 0.75rem var(--mono);
}
.frame__foot b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

.splits { margin: 0; padding: 0; list-style: none; }
.split {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px 14px;
  padding: 16px 18px; color: var(--text-3);
  transition: background 400ms var(--ease-out), color 400ms var(--ease-out);
}
.split + .split { border-top: 1px solid var(--border); }
.split::before {
  content: ""; width: 12px; height: 12px; margin-left: 2px; border-radius: 50%;
  border: 1.5px solid currentColor; align-self: start; margin-top: 5px;
}
.split__body { min-width: 0; }
.split__name { display: block; font-weight: 500; }
.split__note { display: block; margin-top: 2px; color: var(--text-3); font-size: 0.8125rem; }
.split__code {
  display: block; margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  color: var(--text); font-size: 0.8125rem; white-space: nowrap; overflow-x: auto; scrollbar-width: thin;
}
.split .btn { align-self: end; }
.split.is-current { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.split.is-current::before { border-color: var(--text); background: radial-gradient(circle, var(--text) 35%, transparent 40%); }
.split.is-done { color: var(--text-2); background: none; }
.split.is-done::before {
  border: 0; width: 14px; height: 14px; margin-left: 1px; background: var(--text);
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" fill="none" stroke="black" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  animation: check-in 450ms var(--ease-out);
}
@keyframes check-in { from { scale: 0.3; opacity: 0; } }
@media (max-width: 560px) {
  .split--loader { grid-template-columns: 16px minmax(0, 1fr); }
  .split--loader .btn { grid-column: 2; width: 100%; }
}

.why { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.why li, .game {
  position: relative; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card);
  transition: border-color var(--ease);
}
.why li::before, .game::before { content: ""; position: absolute; inset: -1px 20px auto; height: 1px; background: var(--sheen); }
.why li:hover, .game:hover { border-color: var(--border-strong); }
.why li { min-height: 200px; padding: 22px; display: grid; align-content: start; gap: 8px; }
.why__icon { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 32px; border-radius: 50%; background: var(--text); color: #000; }
.why svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.why h3 { font-size: 1.1875rem; letter-spacing: -0.02em; }
.why p { max-width: 44ch; color: var(--text-2); font-size: 0.9375rem; }
@media (min-width: 760px) {
  .why { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .why--wide { grid-column: span 2; }
}

.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.game { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.game h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.0625rem; }
.game p { color: var(--text-2); font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game__new { padding: 1px 7px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0; }
.game__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.game__players { color: var(--text-3); font-size: 0.8125rem; }
.game__players b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.game--request { border-style: dashed; color: var(--text-2); align-items: flex-start; justify-content: center; min-height: 130px; }
.game--request::before { display: none; }
.game--request:hover { color: var(--text); }
.game--request a { color: var(--text); text-decoration: none; }
.game--request a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.game__plus { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 4px; border: 1px solid var(--border-strong); border-radius: 50%; }
.game__plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.plans > li { scroll-margin-top: 72px; min-height: 0; padding: 26px; display: flex; flex-direction: column; gap: 0; transition: border-color var(--ease), box-shadow 300ms var(--ease-out); }
.plans > li:hover { border-color: rgba(255, 255, 255, 0.22); }
.plans h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1875rem; }
.plan__icon { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--text); color: #000; }
.plan__icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan__pill { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #000; color: #fff; font-size: 0.75rem; line-height: 1; font-weight: 600; letter-spacing: 0; }
.plans .plan__desc { margin-top: 10px; color: var(--text-2); font-size: 0.875rem; }
.plans .plan__price { margin-top: 24px; color: var(--text); font-size: 2.25rem; line-height: 1; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.plan__price span { color: var(--text-3); font-size: 0.875rem; font-weight: 400; letter-spacing: 0; }
.plans .plan__note { margin-top: 8px; color: var(--text-3); font-size: 0.8125rem; }
.plan__list {
  display: grid; gap: 10px; margin: 22px 0 26px; padding: 20px 0 0; list-style: none;
  border-top: 1px solid; border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 80%) 1;
}
.plans .plan__list li { min-height: 0; padding: 0 0 0 20px; border: 0; background: none; color: var(--text-2); font-size: 0.9375rem; }
.plans .plan__list li::before {
  inset: 7px auto auto 0; width: 12px; height: 12px; background: var(--text-2);
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}
.plans .plan__list .plan__no { color: var(--text-3); }
.plans .plan__list .plan__no::before {
  background: var(--text-3);
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12" fill="none" stroke="black" stroke-width="3" stroke-linecap="round"/></svg>');
}
.plans .btn { margin-top: auto; width: 100%; }

.plans .plan--pick, .plans .plan--pick:hover {
  border-color: #fff; color: #0a0a0a;
  background: linear-gradient(180deg, #fafafa, #d4d4d4);
  box-shadow: 0 30px 90px -36px rgba(255, 255, 255, 0.35);
}
.plans:has(> li:hover) > .plan--pick:not(:hover) { box-shadow: none; }
.plans .plan--pick::before { display: none; }.plan--pick .plan__icon { background: #000; color: #fff; }
.plans .plan--pick .plan__desc { color: #3d3d3d; }
.plans .plan--pick .plan__price { color: #000; }
.plan--pick .plan__price span, .plans .plan--pick .plan__note { color: #5c5c5c; }
.plan--pick .plan__list { border-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 80%) 1; }
.plans .plan--pick .plan__list li { color: #1f1f1f; }
.plans .plan--pick .plan__list li::before { background: #000; }
.plans .plan--pick .btn { position: relative; z-index: 0; overflow: hidden; background: #000; border-color: #000; color: #fff; }
@media (hover: hover) and (pointer: fine) { .plans .plan--pick .btn:hover { background: #1c1c1c; border-color: #1c1c1c; } }
.plan--pick .btn::after {
  content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28) 50%, transparent);
  translate: -120% 0; animation: plan-sweep 3.2s linear infinite;
}
@keyframes plan-sweep { 0% { translate: -120% 0; } 28%, 100% { translate: 320% 0; } }
@media (prefers-reduced-motion: reduce) { .plan--pick .btn::after { display: none; } }

.faq li { min-height: 0; }
.faq h3 { font-size: 1.0625rem; }
.faq a { color: var(--text); text-underline-offset: 3px; }