:root {
  --ink: #17181d;
  --muted: #6e747e;
  --paper: #f7f8fa;
  --white: #fff;
  --purple: #501e7f;
  --blue: #173da8;
  --line: rgba(23, 24, 29, .14);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body.dark { --paper: #101216; --white: #1b1d23; --ink: #f4f6fb; --muted: #a0a7b2; --line: rgba(255,255,255,.16); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.home-nav { height: 58px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 26px; position: fixed; z-index: 20; top: 0; left: 0; right: 0; background: rgba(247,248,250,.72); border-bottom: 1px solid transparent; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); transition: background .3s ease, border-color .3s ease; }
body.dark .home-nav { background: rgba(16,18,22,.72); }
.home-nav.scrolled { border-color: var(--line); }
.home-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 650; letter-spacing: -.3px; white-space: nowrap; }
.home-brand img { width: 25px; height: 30px; object-fit: contain; }
.home-nav nav { display: flex; gap: 28px; margin-left: auto; margin-right: 16px; }
.home-nav nav a { font-size: 11px; color: var(--muted); transition: color .2s ease; }
.home-nav nav a.active { color: var(--ink); }
.home-nav nav a:hover { color: var(--ink); }
.home-actions { display: flex; align-items: center; gap: 9px; }
.nav-icon, .nav-menu { border: 0; background: transparent; color: var(--ink); }
.nav-icon { width: 30px; height: 30px; font-size: 18px; }
.nav-menu { width: 30px; height: 30px; display: none; place-items: center; gap: 4px; }
.nav-menu i { width: 16px; height: 1px; display: block; background: currentColor; }
.mobile-menu { position: fixed; z-index: 19; top: 58px; left: 0; right: 0; padding: 15px 24px 20px; display: flex; gap: 18px; flex-wrap: wrap; background: rgba(247,248,250,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(22px); }
body.dark .mobile-menu { background: rgba(16,18,22,.92); }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { color: var(--muted); font-size: 12px; }

.home-module { min-height: min(810px, 100vh); padding: 130px max(24px, calc((100vw - 1240px) / 2)) 88px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; }
.home-kicker { margin: 0 0 22px; font-size: 10px; letter-spacing: 2px; font-weight: 700; opacity: .65; }
.module-copy { position: relative; z-index: 3; max-width: 460px; }
.module-copy h2 { margin: 0 0 24px; font-size: clamp(52px, 7vw, 92px); line-height: .94; letter-spacing: -5px; font-weight: 650; }
.module-copy p:not(.home-kicker) { max-width: 385px; margin: 0 0 29px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.module-link, .quiet-link { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; }.module-link { color: var(--purple); }.module-link span, .quiet-link span { transition: transform .22s ease; }.module-link:hover span, .quiet-link:hover span { transform: translateX(4px); }.dark-link { color: #10151c; }.light-link { color: white; }.quiet-link { color: var(--muted); margin-left: 19px; }
.light-copy .home-kicker { color: rgba(255,255,255,.73); }.light-copy p:not(.home-kicker) { color: rgba(255,255,255,.72); }
.module-sky { background: linear-gradient(145deg, #eaf8fc 0%, #c7eff0 45%, #b3c7ff 100%); min-height: 100vh; }.module-white { background: var(--white); }.module-ink { background: #11151d; color: #f6f8fc; }.module-cobalt { background: linear-gradient(135deg, #233fbb, #0d2678); color: #fff; }.module-mint { background: linear-gradient(145deg, #edfffd, #a7e5dd 45%, #6bc4db); }.module-purple { background: linear-gradient(135deg, #28103d, #64269b 65%, #8960bd); color: white; }

.hero-content h1 { margin: 0 0 25px; font-size: clamp(74px, 9vw, 130px); line-height: .84; letter-spacing: -8px; white-space: nowrap; font-weight: 650; }.hero-subtitle { margin: 0; font-size: clamp(22px, 3vw, 37px); line-height: 1.15; letter-spacing: -1.6px; color: rgba(17,24,34,.72); }.hero-links { margin-top: 35px; }.hero-liquid { position: absolute; border-radius: 48% 52% 57% 43%; filter: blur(2px); pointer-events: none; }.liquid-blue { width: 58vw; height: 78vh; right: -5vw; top: -10vh; background: radial-gradient(ellipse at 45% 48%, rgba(39,81,205,.94), rgba(54,88,192,.8) 48%, rgba(128,178,255,.2) 73%, transparent 74%); transform: rotate(-14deg); }.liquid-teal { width: 67vw; height: 71vh; right: -18vw; bottom: -17vh; background: radial-gradient(ellipse at 40% 45%, rgba(71,207,202,.93), rgba(96,210,211,.7) 50%, rgba(209,255,249,.05) 73%, transparent 74%); transform: rotate(19deg); }.liquid-white { width: 40vw; height: 55vh; right: 14vw; top: 20vh; background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.72), rgba(255,255,255,.2) 60%, transparent 70%); transform: rotate(24deg); }.hero-emblem { width: 270px; height: 310px; justify-self: center; display: grid; place-items: center; position: relative; z-index: 2; transform: rotate(7deg); }.hero-emblem img { width: 188px; height: 220px; object-fit: contain; filter: drop-shadow(0 24px 18px rgba(23,38,85,.24)); }.hero-emblem span { position: absolute; bottom: 9px; right: -15px; font-size: 9px; line-height: 1.7; letter-spacing: 1.7px; color: rgba(15,34,93,.54); }.emblem-ring { position: absolute; inset: 0; border: 1px solid rgba(35,75,170,.26); border-radius: 46% 54% 51% 49%; transform: rotate(-20deg); }.emblem-ring::after { content: ""; position: absolute; inset: 26px -27px 26px 27px; border: 1px solid rgba(255,255,255,.63); border-radius: 50%; }.scroll-cue { position: absolute; bottom: 30px; left: max(24px, calc((100vw - 1240px) / 2)); color: rgba(15,34,93,.62); display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: 1px; }.scroll-cue span { display: block; width: 25px; height: 1px; background: currentColor; }

.team-stack { width: min(100%, 500px); aspect-ratio: 1.05; justify-self: center; position: relative; transform: rotate(4deg); }.stack-card { position: absolute; border-radius: 26px; box-shadow: 0 30px 70px rgba(28,36,48,.16); }.stack-back { width: 78%; height: 82%; right: 3%; top: 1%; background: linear-gradient(145deg, #b7e9e3, #c6dcff); transform: rotate(11deg); }.stack-mid { width: 80%; height: 82%; left: 2%; bottom: 0; background: linear-gradient(145deg, #eefbff, #c6e8ee); transform: rotate(-8deg); display: flex; justify-content: space-between; align-items: flex-end; padding: 23px; color: rgba(15,42,72,.52); font-size: 9px; letter-spacing: 1.4px; }.stack-mid b { color: rgba(15,42,72,.75); font-size: 20px; letter-spacing: -1px; }.stack-front { width: 67%; height: 78%; left: 17%; top: 11%; background: rgba(255,255,255,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; backdrop-filter: blur(15px); }.stack-front img { width: 150px; height: 175px; object-fit: contain; }.stack-front small { color: var(--muted); text-align: center; line-height: 1.7; font-size: 10px; }
.player-index { width: min(100%, 520px); min-height: 400px; justify-self: center; border-radius: 28px; border: 1px solid rgba(255,255,255,.24); background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); position: relative; padding: 25px; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-4deg); overflow: hidden; }.player-index::before { content: ""; position: absolute; width: 490px; height: 490px; border-radius: 50%; border: 1px solid rgba(160,193,255,.25); left: 6%; top: 8%; }.player-index-top, .player-index-bottom { position: relative; z-index: 2; display: flex; justify-content: space-between; color: rgba(255,255,255,.58); font-size: 9px; letter-spacing: 1.5px; }.player-index-bottom { align-items: center; border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px; }.player-index-bottom strong { color: #b7ceff; font-size: 19px; letter-spacing: -.5px; }.number-row { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: #c4d5ff; font-size: clamp(35px, 5vw, 64px); letter-spacing: -4px; }.number-row span:nth-child(2), .number-row span:nth-child(4) { color: #62d5d0; }.number-row span:nth-child(3) { color: #fff; }
.match-showcase { width: min(100%, 500px); aspect-ratio: 1.03; justify-self: center; border-radius: 50%; position: relative; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 45% 38%, rgba(255,255,255,.16), transparent 45%), radial-gradient(circle, rgba(94,164,255,.44), transparent 68%); }.match-orbit { position: absolute; inset: 7%; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; transform: rotate(32deg) scaleY(.48); }.match-orbit::after { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }.match-label { position: absolute; top: 21%; font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.66); }.match-score { display: flex; align-items: baseline; gap: 19px; color: #fff; }.match-score span { font-size: clamp(70px, 10vw, 128px); line-height: .8; letter-spacing: -8px; font-weight: 500; }.match-score i { font-size: 12px; letter-spacing: 2px; color: rgba(255,255,255,.62); font-style: normal; }.match-note { position: absolute; bottom: 21%; width: 70%; color: rgba(255,255,255,.67); font-size: 11px; line-height: 1.7; }.bilibili-mark { position: absolute; bottom: 7%; right: 13%; color: rgba(255,255,255,.72); text-align: left; font-size: 10px; letter-spacing: 1.6px; }.bilibili-mark small { font-size: 7px; letter-spacing: 1.1px; }
.learning-orb { width: min(100%, 500px); aspect-ratio: 1; justify-self: center; border-radius: 50%; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 40% 36%, rgba(255,255,255,.82), rgba(255,255,255,.08) 42%, transparent 64%), linear-gradient(140deg, #c7fff4, #66cbd9 60%, #327ccf); box-shadow: 0 35px 80px rgba(42,146,174,.22); transform: rotate(-10deg); }.learning-orb-inner { width: 65%; display: flex; flex-direction: column; gap: 9px; color: rgba(9,71,91,.65); font-size: 11px; letter-spacing: 2px; transform: rotate(10deg); }.learning-orb-inner b { color: rgba(9,71,91,.44); font-size: 18px; font-weight: 400; }.orb-ring { position: absolute; border: 1px solid rgba(255,255,255,.56); border-radius: 50%; }.ring-a { inset: -4%; transform: rotate(24deg) scaleY(.44); }.ring-b { inset: 11%; transform: rotate(-28deg) scaleY(.58); }
.pitchlab-index-art { width: min(100%, 520px); aspect-ratio: 1.1; justify-self: center; position: relative; transform: rotate(-5deg); }.pitch-grid { position: absolute; inset: 8%; border: 1px solid rgba(255,255,255,.45); border-radius: 26px; background: linear-gradient(90deg, transparent 49.6%, rgba(255,255,255,.32) 50%, transparent 50.4%), linear-gradient(0deg, transparent 49.6%, rgba(255,255,255,.18) 50%, transparent 50.4%); }.pitch-grid::before { content: ""; position: absolute; width: 25%; aspect-ratio: 1; left: 37.5%; top: 37%; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }.pitch-dot { position: absolute; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: #7fc8ed; color: #152143; font-size: 10px; z-index: 2; }.dot-one { left: 28%; top: 53%; }.dot-two { right: 19%; top: 26%; background: #9ce9df; }.dot-three { left: 54%; top: 17%; background: #c4b7f6; }.pitch-ball { position: absolute; z-index: 2; width: 11px; height: 11px; border-radius: 50%; background: #f4d67c; left: 54%; top: 47%; box-shadow: 0 0 18px #f4d67c; }.pitch-route { position: absolute; z-index: 1; height: 1px; background: #f4d67c; transform-origin: left center; }.route-one { width: 155px; left: 51%; top: 47%; transform: rotate(-17deg); }.route-two { width: 110px; left: 30%; top: 53%; transform: rotate(-38deg); opacity: .6; }.pitchlab-index-art small { position: absolute; bottom: 2%; right: 10%; color: rgba(255,255,255,.5); font-size: 9px; letter-spacing: 2px; }

.home-footer { padding: 28px max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; color: var(--muted); background: var(--paper); font-size: 10px; }.home-footer .home-brand { color: var(--ink); margin-right: auto; }.home-footer a:last-child { color: var(--purple); }
.reveal-item, .motion-visual { opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .8s cubic-bezier(.2,.72,.2,1), transform .8s cubic-bezier(.2,.72,.2,1); transition-delay: var(--reveal-delay, 0ms); }.reveal-item.is-visible, .motion-visual.is-visible { opacity: 1; transform: none; }
.hero-content.hero-entered { animation: hero-copy-in .9s cubic-bezier(.2,.72,.2,1) both; }.hero-emblem.hero-entered { animation: hero-emblem-in 1.15s cubic-bezier(.2,.72,.2,1) .08s both; }.hero-emblem.hero-entered .emblem-ring { animation: ring-breathe 7s ease-in-out 1.1s infinite; }
.team-stack.is-visible { animation: visual-tilt-in .95s cubic-bezier(.2,.72,.2,1) both; }.team-stack.is-visible .stack-back { animation: stack-back-in .8s cubic-bezier(.2,.72,.2,1) .12s both; }.team-stack.is-visible .stack-mid { animation: stack-mid-in .8s cubic-bezier(.2,.72,.2,1) .2s both; }.team-stack.is-visible .stack-front { animation: stack-front-in .85s cubic-bezier(.2,.72,.2,1) .28s both; }
.player-index.is-visible .number-row span { animation: number-pop .55s cubic-bezier(.2,.72,.2,1) both; }.player-index.is-visible .number-row span:nth-child(1) { animation-delay: .12s; }.player-index.is-visible .number-row span:nth-child(2) { animation-delay: .2s; }.player-index.is-visible .number-row span:nth-child(3) { animation-delay: .28s; }.player-index.is-visible .number-row span:nth-child(4) { animation-delay: .36s; }.player-index.is-visible .number-row span:nth-child(5) { animation-delay: .44s; }
.match-showcase.is-visible .match-orbit { animation: orbit-drift 9s ease-in-out infinite; }.match-showcase.is-visible .match-score { animation: score-in .8s cubic-bezier(.2,.72,.2,1) .18s both; }.learning-orb.is-visible { animation: orb-in 1s cubic-bezier(.2,.72,.2,1) both, orb-float 9s ease-in-out 1s infinite; }.learning-orb.is-visible .orb-ring { animation: ring-drift 8s ease-in-out infinite; }.learning-orb.is-visible .ring-b { animation-delay: -2.5s; }.pitchlab-index-art.is-visible .pitch-dot { animation: dot-in .55s cubic-bezier(.2,.72,.2,1) both; }.pitchlab-index-art.is-visible .dot-one { animation-delay: .12s; }.pitchlab-index-art.is-visible .dot-two { animation-delay: .24s; }.pitchlab-index-art.is-visible .dot-three { animation-delay: .36s; }.pitchlab-index-art.is-visible .pitch-ball { animation: ball-pulse 2.3s ease-in-out infinite; }.pitchlab-index-art.is-visible .route-one { animation: route-draw .85s ease-out .45s both; }.pitchlab-index-art.is-visible .route-two { animation: route-draw .72s ease-out .62s both; }
body::after { content: ""; position: fixed; z-index: 100; inset: 0; pointer-events: none; background: var(--paper); opacity: 0; transition: opacity .26s ease; }.page-leaving::after { opacity: 1; }.page-leaving { overflow: hidden; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-emblem-in { from { opacity: 0; transform: translateY(24px) rotate(1deg) scale(.9); } to { opacity: 1; transform: translateY(0) rotate(7deg) scale(1); } }
@keyframes ring-breathe { 0%, 100% { transform: rotate(-20deg) scale(1); } 50% { transform: rotate(-14deg) scale(1.045); } }
@keyframes visual-tilt-in { from { opacity: 0; transform: translateY(30px) rotate(0); } to { opacity: 1; transform: translateY(0) rotate(4deg); } }
@keyframes stack-back-in { from { opacity: 0; transform: translate(18px,-14px) rotate(18deg); } to { opacity: 1; transform: translate(0) rotate(11deg); } }
@keyframes stack-mid-in { from { opacity: 0; transform: translate(-15px,12px) rotate(-15deg); } to { opacity: 1; transform: translate(0) rotate(-8deg); } }
@keyframes stack-front-in { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes number-pop { from { opacity: 0; transform: translateY(18px) scale(.7); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes orbit-drift { 0%,100% { transform: rotate(32deg) scaleY(.48); } 50% { transform: rotate(42deg) scaleY(.56); } }
@keyframes score-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes orb-in { from { opacity: 0; transform: rotate(-20deg) scale(.78); } to { opacity: 1; transform: rotate(-10deg) scale(1); } }
@keyframes orb-float { 0%,100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-11px); } }
@keyframes ring-drift { 0%,100% { transform: rotate(24deg) scaleY(.44); } 50% { transform: rotate(34deg) scaleY(.5); } }
@keyframes dot-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes ball-pulse { 0%,100% { box-shadow: 0 0 9px rgba(244,214,124,.6); } 50% { box-shadow: 0 0 24px rgba(244,214,124,1); } }
@keyframes route-draw { from { opacity: 0; transform: scaleX(0) rotate(-17deg); } to { opacity: 1; transform: scaleX(1) rotate(-17deg); } }
@media (max-width: 820px) { .home-nav nav { display: none; }.nav-menu { display: grid; }.home-module { min-height: 760px; grid-template-columns: 1fr; gap: 35px; padding-top: 110px; }.module-copy h2 { font-size: 66px; }.hero-content h1 { font-size: 96px; }.hero-emblem { width: 230px; height: 270px; }.hero-emblem img { width: 160px; height: 190px; }.home-hero { min-height: 100vh; }.team-stack, .player-index, .match-showcase, .learning-orb, .pitchlab-index-art { width: min(88vw, 500px); }.module-copy { max-width: 520px; } }
@media (max-width: 560px) { .home-nav { padding: 0 18px; }.home-module { min-height: 720px; padding: 100px 22px 60px; }.home-hero { min-height: 770px; }.hero-content h1 { font-size: 76px; letter-spacing: -6px; }.hero-subtitle { font-size: 25px; }.hero-emblem { margin-top: 10px; width: 190px; height: 210px; }.hero-emblem img { width: 130px; height: 155px; }.hero-emblem span { right: -32px; font-size: 8px; }.module-copy h2 { font-size: 56px; letter-spacing: -3.3px; }.module-copy p:not(.home-kicker) { font-size: 13px; }.team-stack { width: 94vw; }.stack-front img { width: 118px; height: 140px; }.player-index { min-height: 300px; padding: 19px; }.number-row { font-size: 37px; letter-spacing: -3px; }.match-showcase { width: 100%; }.learning-orb { width: 91vw; }.pitchlab-index-art { width: 100%; }.home-footer { padding: 23px 18px; gap: 12px; }.home-footer span:nth-of-type(2) { width: 100%; order: 3; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }.reveal-item, .motion-visual { opacity: 1 !important; transform: none !important; } }

.team-photo-card { background: linear-gradient(180deg, rgba(16,28,55,.08), rgba(16,28,55,.72)), url('assets/team/team-group-2026.jpg') center 57% / cover; color: rgba(255,255,255,.9); overflow: hidden; }
.team-photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,34,65,.02), rgba(22,34,65,.32)); border-radius: inherit; pointer-events: none; }
.team-photo-card span, .team-photo-card b { position: relative; z-index: 1; }