.hero { position: relative; min-height: max(680px, 100svh); display: flex; align-items: center; padding: 120px 0 80px; }
.hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-logo { width: min(340px, 64vw); height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }
.js .hero-logo.intro { animation: intro 1.1s var(--ease) forwards, float 7s ease-in-out 1.3s infinite; }
@keyframes float { 50% { translate: 0 -10px; } }
.kicker { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; margin-top: 26px; border-radius: 999px; font: 500 13.5px/1 var(--sans); color: var(--text); }
.hero-title { margin: 20px 0 0; font: 600 clamp(38px, 6vw, 82px)/1 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.hero-title em { font-style: normal; color: var(--soft); }
.hero-lead { margin: 18px 0 0; color: #c3c7d0; font-size: clamp(16px, 1.4vw, 19px); }

.ipbar { display: inline-flex; align-items: center; gap: 18px; margin-top: 36px; padding: 7px 7px 7px 26px; border-radius: 999px; }
.ipbar-ip { font: 600 17px/1 var(--mono); letter-spacing: -.01em; }
.ipbar-on { color: var(--dim); font-size: 14.5px; white-space: nowrap; }
.ipbar-on b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ipbar .btn { height: 48px; }
@media (max-width: 480px) { .ipbar { gap: 12px; padding-left: 18px; } .ipbar-ip { font-size: 15px; } .ipbar .btn { padding: 0 16px; } }

.js .intro { opacity: 0; transform: translateY(22px); animation: intro 1.1s var(--ease) forwards; animation-delay: calc(.1s + var(--d, 0) * .1s); }
@keyframes intro { to { opacity: 1; transform: none; } }

.feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ft { padding: 26px; border-radius: var(--r); transition: transform .5s var(--spring), opacity .9s var(--ease); }
.ft::before { transition: background .3s; }
.ft:hover { transform: translateY(-4px); }
.ft:hover::before { background: rgba(255, 255, 255, .09); }
.ft h3 { margin: 0; font: 600 18px/1.2 var(--display); letter-spacing: -.01em; }
.ft p { margin: 10px 0 0; color: #b9bdc7; font-size: 15px; line-height: 1.55; }
.js .ft.rv.done { transition: transform .5s var(--spring); }
.ft--link { display: flex; flex-direction: column; }
.ft--link p { flex: 1; }
.ft-go { margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--dim); transition: color .2s; }
.ft--link:hover .ft-go { color: var(--text); }
.more a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.more { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 20px 20px 20px 26px; border-radius: var(--r); }
.more p { margin: 0; color: #b9bdc7; font-size: 15px; }
.more b { color: var(--text); font-weight: 600; }
@media (max-width: 700px) { .more { flex-direction: column; align-items: flex-start; } }
@media (max-width: 1000px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .feats { grid-template-columns: 1fr; } .ft { padding: 22px; } }

.sec-head--center { flex-direction: column; align-items: center; text-align: center; }
.film-wrap { perspective: 1400px; }
.film {
  --rx: 14deg; --sc: .9;
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: #000;
  transform: rotateX(var(--rx)) scale(var(--sc)); transform-origin: 50% 100%;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9);
}
.film img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.film:hover img { transform: scale(1.03); }
.film-play {
  position: absolute; left: 50%; top: 50%; width: clamp(84px, 10vw, 124px); aspect-ratio: 1; translate: -50% -50%;
  display: grid; place-items: center; border-radius: 50%; color: #fff;
  transition: transform .6s var(--spring);
}
.film-play::before { background: rgba(255, 255, 255, .1); }
.film-play svg { width: 34%; margin-left: 6%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.film:hover .film-play { transform: scale(1.08); }
.film-cap { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; }
@media (max-width: 620px) { .film { border-radius: 18px; } .film-cap { left: 12px; bottom: 12px; } }

.chron { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ss-n--word { font-size: 40px !important; letter-spacing: -.03em !important; }
.ss { position: relative; padding: 22px 20px 24px; border-radius: var(--r-s); transition: transform .5s var(--spring), opacity .9s var(--ease); }
.ss::before { transition: background .3s; }
.ss:hover { transform: translateY(-4px); }
.ss:hover::before { background: rgba(255, 255, 255, .09); }
.js .ss.rv.done { transition: transform .5s var(--spring); }
.ss-year { font: 400 11px/1 var(--pixel); letter-spacing: .1em; color: var(--mute); }
.ss-n { display: block; margin: 18px 0 16px; font: 600 60px/.8 var(--display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .35); }
.ss h3 { margin: 0; font: 600 16.5px/1.3 var(--sans); }
.ss p { margin: 12px 0 0; color: var(--dim); font-size: 14.5px; line-height: 1.55; }
.ss--now .ss-n { color: var(--text); -webkit-text-stroke: 0; }
.ss-now { position: absolute; top: 18px; right: 16px; font: 400 11px/1 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
@media (max-width: 980px) {
  .chron { grid-template-columns: 1fr; }
  .ss { display: grid; grid-template-columns: 80px 1fr; column-gap: 16px; align-items: center; }
  .ss-n { grid-row: 1 / span 3; margin: 0; font-size: 50px; }
  .ss-n--word { font-size: 24px !important; }
}

.boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.board { padding: 20px; border-radius: var(--r); }
.board-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 8px; }
.board-h span { font: 600 17px/1 var(--display); }
.board-h a { font-size: 13.5px; color: var(--mute); transition: color .2s; }
.board-h a:hover { color: var(--text); }
.row { display: grid; grid-template-columns: 26px 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; transition: background .2s; }
.row:hover { background: rgba(255, 255, 255, .08); }
.row-n { font: 400 14px/1 var(--pixel); color: var(--mute); text-align: center; }
.row.p1 .row-n { color: var(--text); }
.row-f { width: 32px; height: 32px; border-radius: 6px; image-rendering: pixelated; background: var(--ink-3); }
.row-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-v { font: 500 14px/1 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
@media (max-width: 980px) { .boards { grid-template-columns: 1fr; } }

.crew { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.mate {
  position: relative; width: calc((100% - 42px) / 4); min-width: 200px; height: 290px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 16px 22px;
  border-radius: var(--r);
}
.mate-skin { position: absolute; left: 50%; bottom: 84px; width: 160px; height: 180px; object-fit: contain; object-position: bottom; transform: translateX(-50%); transform-origin: 50% 100%; transition: transform .7s var(--spring); }
.mate:hover .mate-skin { transform: translateX(-50%) translateY(-12px) scale(1.06); }
.mate-rank { height: 24px; width: auto; image-rendering: pixelated; position: relative; }
.mate-name { font: 400 16px/1 var(--pixel); position: relative; }
@media (max-width: 1060px) { .mate { width: calc((100% - 28px) / 3); } }
@media (max-width: 700px)  { .mate { width: calc((100% - 14px) / 2); min-width: 0; height: 260px; } .mate-skin { width: 128px; height: 146px; bottom: 78px; } }
@media (max-width: 400px)  { .mate { width: 100%; } }

.ranks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rank { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--r); }
.rank-tag { height: 40px; width: auto; align-self: flex-start; image-rendering: pixelated; margin-bottom: 8px; transition: transform .6s var(--spring); }
.rank:hover .rank-tag { transform: scale(1.06); }
.rank p { margin: 0; color: var(--dim); font-size: 15.5px; flex: 1; }
.rank-go { font-weight: 600; font-size: 14.5px; }
@media (max-width: 860px) { .ranks { grid-template-columns: 1fr; } }

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 200; padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
  transform: translate(-50%, 150%); opacity: 0; pointer-events: none; transition: transform .5s var(--spring), opacity .3s;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }

.mate-role { display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 600; }
.mate-none { grid-column: 1 / -1; text-align: center; color: var(--dim); }