:root { --navy: #10223d; --navy-dark: #09162b; --blue: #3778ff; --blue-light: #79b8ff; --cream: #fff9ee; --paper: #ffffff; --orange: #ff9f43; --yellow: #ffd45a; --green: #41b883; --pink: #ff7b96; --purple: #7a6cff; --text: #243450; --muted: #6b7890; --line: rgba(16, 34, 61, 0.1); --shadow: 0 18px 55px rgba(21, 51, 94, 0.13); --shadow-soft: 0 12px 32px rgba(21, 51, 94, 0.08); --radius-large: 32px; --radius-medium: 22px; --radius-small: 14px; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; background: var(--cream); color: var(--text); font-family: "Noto Sans TC", sans-serif; overflow-x: hidden; }

img { display: block; width: 100%; }

a { color: inherit; text-decoration: none; }

header { position: fixed; top: 0; left: 0; z-index: 50; width: 100%; padding: 18px 5%; transition: padding 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; }
header.is-active { padding: 11px 5%; background: rgba(255, 249, 238, 0.94); box-shadow: 0 8px 25px rgba(21, 51, 94, 0.08); backdrop-filter: blur(18px); }
header .header-content { display: flex; align-items: center; justify-content: space-between; max-width: 1440px; margin: 0 auto; }
header .brand-link { display: flex; align-items: center; gap: 11px; }
header .brand-mark { display: grid; width: 46px; height: 46px; border-radius: 16px; background: var(--navy); color: #fff; font-size: 23px; place-items: center; transform: rotate(-7deg); box-shadow: 0 8px 20px rgba(16, 34, 61, 0.22); transition: transform 0.35s ease; }
header .brand-link:hover .brand-mark { transform: rotate(7deg) scale(1.06); }
header h1 { margin: 0; color: var(--navy); font-size: 22px; font-weight: 900; letter-spacing: -0.6px; }
header .brand-subtitle { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 2px; }
header nav { display: flex; align-items: center; gap: 28px; }
header nav a { position: relative; color: var(--navy); font-size: 14px; font-weight: 700; transition: color 0.25s ease; }
header nav a::after { position: absolute; bottom: -7px; left: 0; width: 0; height: 3px; border-radius: 999px; background: var(--blue); content: ""; transition: width 0.25s ease; }
header nav a:hover { color: var(--blue); }
header nav a:hover::after { width: 100%; }
header .header-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 8px 20px rgba(16, 34, 61, 0.18); transition: transform 0.25s ease, background 0.25s ease; }
header .header-action:hover { background: var(--blue); transform: translateY(-3px); }

#hero-section { position: relative; min-height: 860px; padding: 165px 5% 90px; overflow: hidden; background: linear-gradient(135deg, #fffaf0 0%, #eff7ff 56%, #e6f2ff 100%); }
#hero-section::before { position: absolute; top: -140px; right: -100px; width: 560px; height: 560px; border-radius: 50%; background: rgba(121, 184, 255, 0.22); content: ""; filter: blur(4px); }
#hero-section::after { position: absolute; bottom: -90px; left: -80px; width: 310px; height: 310px; border-radius: 50%; background: rgba(255, 212, 90, 0.32); content: ""; }
#hero-section .hero-content { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr); align-items: center; gap: 70px; max-width: 1440px; margin: 0 auto; }
#hero-section .hero-label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(55, 120, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: 1px; box-shadow: var(--shadow-soft); }
#hero-section .hero-label::before { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(65, 184, 131, 0.14); content: ""; animation: hero-pulse 1.8s infinite; }
#hero-section .hero-title { max-width: 730px; margin: 22px 0 18px; color: var(--navy); font-size: clamp(48px, 6vw, 88px); font-weight: 900; letter-spacing: -4px; line-height: 1.08; }
#hero-section .hero-title strong { position: relative; color: var(--blue); font-weight: 900; white-space: nowrap; }
#hero-section .hero-title strong::after { position: absolute; right: 1%; bottom: 2px; left: 1%; z-index: -1; height: 14px; border-radius: 999px; background: rgba(255, 212, 90, 0.75); content: ""; transform: rotate(-2deg); }
#hero-section .hero-text { max-width: 650px; margin: 0; color: var(--muted); font-size: 18px; font-weight: 500; line-height: 1.9; }
#hero-section .hero-action-list { display: flex; align-items: center; gap: 15px; margin-top: 35px; }
#hero-section .hero-primary-action { display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 27px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 13px 30px rgba(55, 120, 255, 0.29); transition: transform 0.28s ease, box-shadow 0.28s ease; }
#hero-section .hero-primary-action:hover { box-shadow: 0 18px 34px rgba(55, 120, 255, 0.38); transform: translateY(-5px); }
#hero-section .hero-secondary-action { display: inline-flex; align-items: center; gap: 9px; min-height: 58px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: var(--navy); font-size: 15px; font-weight: 800; transition: background 0.28s ease, transform 0.28s ease; }
#hero-section .hero-secondary-action:hover { background: #fff; transform: translateY(-5px); }
#hero-section .hero-stat-list { display: flex; gap: 27px; margin-top: 43px; }
#hero-section .hero-stat-item { padding-right: 27px; border-right: 1px solid rgba(16, 34, 61, 0.12); }
#hero-section .hero-stat-item:last-child { border-right: 0; }
#hero-section .hero-stat-number { display: block; color: var(--navy); font-size: 27px; font-weight: 900; letter-spacing: -1px; }
#hero-section .hero-stat-text { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 700; }
#hero-section .hero-media { position: relative; min-height: 590px; }
#hero-section .hero-image-frame { position: absolute; top: 26px; right: 0; width: 89%; overflow: hidden; border: 12px solid rgba(255, 255, 255, 0.9); border-radius: 48px; background: #fff; box-shadow: 0 30px 70px rgba(34, 70, 125, 0.22); transform: rotate(3deg); transition: transform 0.5s ease; }
#hero-section .hero-image-frame:hover { transform: rotate(0deg) scale(1.02); }
#hero-section .hero-image { height: 490px; object-fit: cover; }
#hero-section .hero-card { position: absolute; display: flex; align-items: center; gap: 12px; min-width: 190px; padding: 14px 17px; border: 1px solid rgba(16, 34, 61, 0.08); border-radius: 18px; background: rgba(255, 255, 255, 0.91); box-shadow: var(--shadow); backdrop-filter: blur(14px); animation: hero-float 4s ease-in-out infinite; }
#hero-section .hero-card-one { top: 6px; left: 0; }
#hero-section .hero-card-two { right: -15px; bottom: 33px; animation-delay: -2s; }
#hero-section .hero-card-icon { display: grid; width: 43px; height: 43px; flex: 0 0 auto; border-radius: 14px; background: #edf5ff; color: var(--blue); font-size: 21px; place-items: center; }
#hero-section .hero-card-one .hero-card-icon { background: #fff3d7; color: #d77f18; }
#hero-section .hero-card-title { display: block; color: var(--navy); font-size: 15px; font-weight: 900; }
#hero-section .hero-card-text { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 700; }
#hero-section .hero-piece { position: absolute; display: grid; border-radius: 18px; color: #fff; font-size: 25px; font-weight: 900; place-items: center; box-shadow: 0 13px 24px rgba(21, 51, 94, 0.16); animation: piece-spin 9s linear infinite; }
#hero-section .hero-piece-one { bottom: 7px; left: 64px; width: 73px; height: 73px; background: var(--orange); transform: rotate(13deg); }
#hero-section .hero-piece-two { top: 56px; right: -30px; width: 56px; height: 56px; background: var(--purple); transform: rotate(-14deg); animation-delay: -4s; }
#hero-section [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.75s ease, transform 0.75s ease; }
#hero-section [data-reveal].is-active { opacity: 1; transform: translateY(0); }

#feature-section { position: relative; padding: 110px 5%; background: #fff; }
#feature-section .feature-content { max-width: 1380px; margin: 0 auto; }
#feature-section .feature-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 45px; }
#feature-section .feature-kicker { margin: 0 0 9px; color: var(--blue); font-size: 13px; font-weight: 900; letter-spacing: 2px; }
#feature-section h2 { max-width: 690px; margin: 0; color: var(--navy); font-size: clamp(32px, 4vw, 51px); font-weight: 900; letter-spacing: -2px; line-height: 1.25; }
#feature-section .feature-intro { max-width: 470px; margin: 0; color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.9; }
#feature-section .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
#feature-section .feature-item { position: relative; min-height: 305px; padding: 28px 25px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-medium); background: #fff; box-shadow: var(--shadow-soft); transition: transform 0.35s ease, box-shadow 0.35s ease; }
#feature-section .feature-item:hover { box-shadow: var(--shadow); transform: translateY(-10px); }
#feature-section .feature-item::after { position: absolute; right: -35px; bottom: -35px; width: 118px; height: 118px; border-radius: 50%; background: rgba(55, 120, 255, 0.07); content: ""; transition: transform 0.4s ease; }
#feature-section .feature-item:hover::after { transform: scale(1.45); }
#feature-section .feature-item:nth-child(2)::after { background: rgba(255, 159, 67, 0.12); }
#feature-section .feature-item:nth-child(3)::after { background: rgba(65, 184, 131, 0.1); }
#feature-section .feature-item:nth-child(4)::after { background: rgba(122, 108, 255, 0.11); }
#feature-section .feature-icon { display: grid; width: 59px; height: 59px; border-radius: 19px; background: #edf5ff; color: var(--blue); font-size: 27px; place-items: center; }
#feature-section .feature-item:nth-child(2) .feature-icon { background: #fff3df; color: #d9801e; }
#feature-section .feature-item:nth-child(3) .feature-icon { background: #eafaf3; color: var(--green); }
#feature-section .feature-item:nth-child(4) .feature-icon { background: #f0efff; color: var(--purple); }
#feature-section h3 { margin: 44px 0 11px; color: var(--navy); font-size: 20px; font-weight: 900; }
#feature-section .feature-text { margin: 0; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.85; }
#feature-section [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.75s ease, transform 0.75s ease; }
#feature-section [data-reveal].is-active { opacity: 1; transform: translateY(0); }

#game-section { position: relative; padding: 115px 5%; overflow: hidden; background: var(--navy-dark); }
#game-section::before { position: absolute; top: -180px; left: -150px; width: 460px; height: 460px; border-radius: 50%; background: rgba(55, 120, 255, 0.22); content: ""; filter: blur(28px); }
#game-section .game-content { position: relative; z-index: 2; max-width: 1380px; margin: 0 auto; }
#game-section .game-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
#game-section .game-kicker { margin: 0 0 9px; color: var(--blue-light); font-size: 13px; font-weight: 900; letter-spacing: 2px; }
#game-section h2 { max-width: 720px; margin: 0; color: #fff; font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -2px; line-height: 1.24; }
#game-section .game-heading-action { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; font-weight: 800; transition: color 0.25s ease, transform 0.25s ease; }
#game-section .game-heading-action:hover { color: var(--yellow); transform: translateX(5px); }
#game-section .game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
#game-section .game-item { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; background: rgba(255, 255, 255, 0.07); transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease; }
#game-section .game-item:hover { border-color: rgba(121, 184, 255, 0.62); background: rgba(255, 255, 255, 0.11); transform: translateY(-9px); }
#game-section .game-media { position: relative; height: 210px; overflow: hidden; }
#game-section .game-image { height: 100%; object-fit: cover; transition: transform 0.55s ease; }
#game-section .game-item:hover .game-image { transform: scale(1.09); }
#game-section .game-tag { position: absolute; top: 14px; left: 14px; padding: 6px 9px; border-radius: 999px; background: rgba(9, 22, 43, 0.78); color: #fff; font-size: 11px; font-weight: 800; backdrop-filter: blur(9px); }
#game-section .game-body { padding: 19px; }
#game-section h3 { margin: 0; color: #fff; font-size: 18px; font-weight: 900; }
#game-section .game-meta { display: flex; justify-content: space-between; gap: 13px; margin-top: 13px; color: rgba(255, 255, 255, 0.63); font-size: 12px; font-weight: 600; }
#game-section .game-rating { color: var(--yellow); }
#game-section .game-more { display: flex; align-items: center; justify-content: center; min-height: 188px; border: 1px dashed rgba(255, 255, 255, 0.24); border-radius: 20px; background: rgba(255, 255, 255, 0.035); color: #fff; text-align: center; transition: background 0.3s ease, transform 0.3s ease; }
#game-section .game-more:hover { background: rgba(55, 120, 255, 0.2); transform: translateY(-9px); }
#game-section .game-more-number { display: block; color: var(--yellow); font-size: 41px; font-weight: 900; letter-spacing: -2px; }
#game-section .game-more-text { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; }
#game-section [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.75s ease, transform 0.75s ease; }
#game-section [data-reveal].is-active { opacity: 1; transform: translateY(0); }

#mode-section { position: relative; padding: 120px 5%; overflow: hidden; background: #edf6ff; }
#mode-section .mode-content { display: grid; grid-template-columns: minmax(350px, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 80px; max-width: 1320px; margin: 0 auto; }
#mode-section .mode-media { position: relative; min-height: 600px; }
#mode-section .mode-image-frame { position: absolute; top: 25px; left: 25px; width: 82%; overflow: hidden; border: 10px solid #fff; border-radius: 36px; box-shadow: var(--shadow); transform: rotate(-4deg); transition: transform 0.45s ease; }
#mode-section .mode-image-frame:hover { transform: rotate(0deg) scale(1.025); }
#mode-section .mode-image { height: 495px; object-fit: cover; }
#mode-section .mode-panel { position: absolute; right: 0; bottom: 28px; width: 230px; padding: 21px; border-radius: 21px; background: #fff; box-shadow: var(--shadow); }
#mode-section .mode-panel-title { color: var(--navy); font-size: 16px; font-weight: 900; }
#mode-section .mode-panel-line { display: flex; align-items: center; gap: 9px; margin-top: 15px; color: var(--muted); font-size: 12px; font-weight: 700; }
#mode-section .mode-panel-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(65, 184, 131, 0.13); }
#mode-section .mode-panel-dot.is-orange { background: var(--orange); box-shadow: 0 0 0 5px rgba(255, 159, 67, 0.13); }
#mode-section .mode-panel-dot.is-purple { background: var(--purple); box-shadow: 0 0 0 5px rgba(122, 108, 255, 0.13); }
#mode-section .mode-kicker { margin: 0 0 10px; color: var(--blue); font-size: 13px; font-weight: 900; letter-spacing: 2px; }
#mode-section h2 { max-width: 670px; margin: 0; color: var(--navy); font-size: clamp(34px, 4vw, 55px); font-weight: 900; letter-spacing: -2px; line-height: 1.22; }
#mode-section .mode-text { margin: 21px 0 0; color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1.95; }
#mode-section .mode-list { display: grid; gap: 12px; margin-top: 30px; }
#mode-section .mode-item { display: flex; align-items: center; gap: 15px; padding: 15px 17px; border: 1px solid rgba(16, 34, 61, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.73); transition: background 0.28s ease, transform 0.28s ease; }
#mode-section .mode-item:hover { background: #fff; transform: translateX(7px); }
#mode-section .mode-icon { display: grid; width: 45px; height: 45px; flex: 0 0 auto; border-radius: 14px; background: #eaf2ff; color: var(--blue); font-size: 21px; place-items: center; }
#mode-section .mode-item:nth-child(2) .mode-icon { background: #fff3df; color: #d9801e; }
#mode-section .mode-item:nth-child(3) .mode-icon { background: #eafaf3; color: var(--green); }
#mode-section h3 { margin: 0; color: var(--navy); font-size: 15px; font-weight: 900; }
#mode-section .mode-item-text { margin: 3px 0 0; color: var(--muted); font-size: 12px; font-weight: 600; }
#mode-section [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.75s ease, transform 0.75s ease; }
#mode-section [data-reveal].is-active { opacity: 1; transform: translateY(0); }

#community-section { position: relative; padding: 110px 5%; background: #fff; }
#community-section .community-content { max-width: 1380px; margin: 0 auto; }
#community-section .community-heading { max-width: 810px; margin: 0 auto 45px; text-align: center; }
#community-section .community-kicker { margin: 0 0 9px; color: var(--blue); font-size: 13px; font-weight: 900; letter-spacing: 2px; }
#community-section h2 { margin: 0; color: var(--navy); font-size: clamp(33px, 4vw, 53px); font-weight: 900; letter-spacing: -2px; line-height: 1.25; }
#community-section .community-text { margin: 17px 0 0; color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.9; }
#community-section .community-grid { display: grid; grid-template-columns: 1.3fr 0.7fr 0.7fr; grid-template-rows: 238px 238px; gap: 15px; }
#community-section .community-item { position: relative; overflow: hidden; border-radius: 22px; background: var(--navy); }
#community-section .community-item:first-child { grid-row: span 2; }
#community-section .community-item:last-child { grid-column: span 2; }
#community-section .community-image { height: 100%; object-fit: cover; opacity: 0.82; transition: opacity 0.4s ease, transform 0.55s ease; }
#community-section .community-item:hover .community-image { opacity: 0.96; transform: scale(1.07); }
#community-section .community-caption { position: absolute; right: 0; bottom: 0; left: 0; padding: 26px 21px 19px; background: linear-gradient( 0deg, rgba(9, 22, 43, 0.87), rgba(9, 22, 43, 0) ); color: #fff; }
#community-section .community-title { display: block; font-size: 18px; font-weight: 900; }
#community-section .community-subtitle { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 600; }
#community-section [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.75s ease, transform 0.75s ease; }
#community-section [data-reveal].is-active { opacity: 1; transform: translateY(0); }

#step-section { position: relative; padding: 118px 5%; overflow: hidden; background: #fff8e8; }
#step-section::after { position: absolute; right: -120px; bottom: -140px; width: 430px; height: 430px; border-radius: 50%; background: rgba(255, 212, 90, 0.2); content: ""; }
#step-section .step-content { position: relative; z-index: 2; max-width: 1260px; margin: 0 auto; }
#step-section .step-heading { max-width: 740px; margin-bottom: 48px; }
#step-section .step-kicker { margin: 0 0 9px; color: #c8791d; font-size: 13px; font-weight: 900; letter-spacing: 2px; }
#step-section h2 { margin: 0; color: var(--navy); font-size: clamp(33px, 4vw, 53px); font-weight: 900; letter-spacing: -2px; line-height: 1.25; }
#step-section .step-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; counter-reset: step-item; }
#step-section .step-item { position: relative; min-height: 260px; padding: 31px 27px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-soft); counter-increment: step-item; transition: transform 0.32s ease, box-shadow 0.32s ease; }
#step-section .step-item:hover { box-shadow: var(--shadow); transform: translateY(-9px); }
#step-section .step-item::before { display: grid; width: 48px; height: 48px; border-radius: 16px; background: var(--navy); color: #fff; content: "0" counter(step-item); font-size: 14px; font-weight: 900; place-items: center; }
#step-section h3 { margin: 32px 0 10px; color: var(--navy); font-size: 21px; font-weight: 900; }
#step-section .step-text { margin: 0; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.85; }
#step-section [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.75s ease, transform 0.75s ease; }
#step-section [data-reveal].is-active { opacity: 1; transform: translateY(0); }

#cta-section { padding: 60px 5% 120px; background: #fff8e8; }
#cta-section .cta-content { position: relative; max-width: 1320px; margin: 0 auto; padding: 67px 7%; overflow: hidden; border-radius: 33px; background: linear-gradient(135deg, var(--blue), #5562e9); box-shadow: 0 24px 55px rgba(55, 120, 255, 0.25); }
#cta-section .cta-content::before { position: absolute; top: -70px; right: -60px; width: 230px; height: 230px; border: 35px solid rgba(255, 255, 255, 0.1); border-radius: 50%; content: ""; }
#cta-section .cta-content::after { position: absolute; bottom: -80px; left: 48%; width: 180px; height: 180px; border-radius: 42px; background: rgba(255, 255, 255, 0.08); content: ""; transform: rotate(26deg); }
#cta-section h2 { position: relative; z-index: 2; max-width: 760px; margin: 0; color: #fff; font-size: clamp(35px, 4vw, 57px); font-weight: 900; letter-spacing: -2px; line-height: 1.24; }
#cta-section .cta-text { position: relative; z-index: 2; max-width: 690px; margin: 17px 0 29px; color: rgba(255, 255, 255, 0.8); font-size: 16px; font-weight: 600; line-height: 1.9; }
#cta-section .cta-action { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px; min-height: 57px; padding: 0 25px; border-radius: 999px; background: #fff; color: var(--blue); font-size: 16px; font-weight: 900; box-shadow: 0 12px 26px rgba(9, 22, 43, 0.14); transition: transform 0.28s ease, box-shadow 0.28s ease; }
#cta-section .cta-action:hover { box-shadow: 0 18px 30px rgba(9, 22, 43, 0.19); transform: translateY(-5px); }
#cta-section [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.75s ease, transform 0.75s ease; }
#cta-section [data-reveal].is-active { opacity: 1; transform: translateY(0); }

footer { padding: 34px 5%; background: var(--navy-dark); color: rgba(255, 255, 255, 0.7); }
footer .footer-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1380px; margin: 0 auto; }
footer .footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; font-weight: 900; }
footer .footer-brand-mark { display: grid; width: 35px; height: 35px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 17px; place-items: center; transform: rotate(-7deg); }
footer .footer-nav { display: flex; align-items: center; gap: 20px; }
footer .footer-nav a { color: rgba(255, 255, 255, 0.62); font-size: 12px; font-weight: 700; transition: color 0.25s ease; }
footer .footer-nav a:hover { color: #fff; }
footer .footer-text { font-size: 11px; font-weight: 600; }

@keyframes hero-pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(65, 184, 131, 0.14); } 50% { box-shadow: 0 0 0 10px rgba(65, 184, 131, 0.04); } }
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes piece-spin { 0%, 100% { transform: rotate(13deg); } 50% { transform: rotate(26deg) translateY(-9px); } }

@media (max-width: 1280px) {
	header nav { gap: 20px; }
	#hero-section { min-height: 790px; }
	#hero-section .hero-content { gap: 35px; }
	#hero-section .hero-title { font-size: clamp(45px, 5.8vw, 74px); }
	#feature-section .feature-grid { gap: 14px; }
	#game-section .game-grid { gap: 14px; }
	#mode-section .mode-content { gap: 50px; }
}
@media (max-width: 960px) {
	header nav { display: none; }
	#hero-section { min-height: auto; padding-top: 135px; }
	#hero-section .hero-content { grid-template-columns: 1fr; }
	#hero-section .hero-title { max-width: 760px; }
	#hero-section .hero-media { min-height: 520px; margin-top: 6px; }
	#hero-section .hero-image-frame { width: 83%; }
	#feature-section .feature-heading { display: block; }
	#feature-section .feature-intro { margin-top: 18px; }
	#feature-section .feature-grid { grid-template-columns: repeat(2, 1fr); }
	#game-section .game-grid { grid-template-columns: repeat(2, 1fr); }
	#mode-section .mode-content { grid-template-columns: 1fr; }
	#mode-section .mode-media { max-width: 670px; min-height: 555px; }
	#mode-section .mode-copy { max-width: 760px; }
	#community-section .community-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 210px 210px; }
	#community-section .community-item:first-child { grid-column: span 2; grid-row: auto; }
	#community-section .community-item:last-child { grid-column: span 2; }
}
@media (max-width: 768px) {
	header { padding: 13px 5%; }
	header.is-active { padding: 9px 5%; }
	header .brand-mark { width: 40px; height: 40px; border-radius: 14px; font-size: 20px; }
	header h1 { font-size: 18px; }
	header .brand-subtitle { display: none; }
	header .header-action { min-height: 39px; padding: 0 15px; font-size: 12px; }
	#hero-section { padding: 118px 5% 72px; }
	#hero-section .hero-title { font-size: clamp(42px, 12vw, 66px); letter-spacing: -3px; }
	#hero-section .hero-text { font-size: 16px; }
	#hero-section .hero-action-list { flex-wrap: wrap; }
	#hero-section .hero-stat-list { gap: 16px; }
	#hero-section .hero-stat-item { padding-right: 16px; }
	#hero-section .hero-stat-number { font-size: 22px; }
	#hero-section .hero-media { min-height: 450px; }
	#hero-section .hero-image-frame { top: 30px; width: 88%; border-width: 8px; border-radius: 31px; }
	#hero-section .hero-image { height: 395px; }
	#hero-section .hero-card { min-width: 165px; padding: 11px 13px; }
	#hero-section .hero-card-one { left: 0; }
	#hero-section .hero-card-two { right: 0; bottom: -8px; }
	#hero-section .hero-piece-one { left: 27px; width: 58px; height: 58px; }
	#hero-section .hero-piece-two { display: none; }
	#feature-section { padding: 83px 5%; }
	#feature-section h2 { font-size: 38px; }
	#game-section { padding: 85px 5%; }
	#game-section .game-heading { display: block; }
	#game-section .game-heading-action { margin-top: 18px; }
	#mode-section { padding: 87px 5%; }
	#mode-section .mode-media { min-height: 460px; }
	#mode-section .mode-image-frame { left: 0; width: 84%; }
	#mode-section .mode-image { height: 410px; }
	#mode-section .mode-panel { right: 0; bottom: 0; }
	#community-section { padding: 84px 5%; }
	#step-section { padding: 85px 5%; }
	#step-section .step-list { grid-template-columns: 1fr; }
	#step-section .step-item { min-height: auto; }
	#cta-section { padding: 40px 5% 88px; }
	#cta-section .cta-content { padding: 47px 7%; border-radius: 25px; }
	footer .footer-content { display: grid; justify-items: center; text-align: center; }
}
@media (max-width: 500px) {
	header .header-action { padding: 0 13px; font-size: 11px; }
	#hero-section .hero-label { font-size: 11px; }
	#hero-section .hero-title { font-size: 46px; letter-spacing: -2px; }
	#hero-section .hero-title strong { white-space: normal; }
	#hero-section .hero-primary-action { min-height: 53px; padding: 0 21px; font-size: 14px; }
	#hero-section .hero-secondary-action { min-height: 53px; padding: 0 18px; font-size: 13px; }
	#hero-section .hero-stat-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
	#hero-section .hero-stat-item { padding-right: 7px; }
	#hero-section .hero-stat-number { font-size: 19px; }
	#hero-section .hero-stat-text { font-size: 10px; }
	#hero-section .hero-media { min-height: 350px; }
	#hero-section .hero-image-frame { width: 91%; border-width: 6px; border-radius: 24px; }
	#hero-section .hero-image { height: 300px; }
	#hero-section .hero-card { min-width: 148px; gap: 8px; padding: 9px 10px; }
	#hero-section .hero-card-icon { width: 35px; height: 35px; border-radius: 11px; font-size: 17px; }
	#hero-section .hero-card-title { font-size: 12px; }
	#hero-section .hero-card-text { font-size: 9px; }
	#hero-section .hero-card-two { bottom: -2px; }
	#hero-section .hero-piece-one { display: none; }
	#feature-section h2 { font-size: 33px; }
	#feature-section .feature-grid { grid-template-columns: 1fr; }
	#feature-section .feature-item { min-height: 245px; }
	#feature-section h3 { margin-top: 33px; }
	#game-section h2 { font-size: 34px; }
	#game-section .game-grid { grid-template-columns: 1fr; }
	#game-section .game-media { height: 225px; }
	#mode-section .mode-media { min-height: 365px; }
	#mode-section .mode-image-frame { top: 15px; width: 89%; border-width: 7px; border-radius: 26px; }
	#mode-section .mode-image { height: 320px; }
	#mode-section .mode-panel { width: 185px; padding: 15px; }
	#mode-section .mode-panel-title { font-size: 13px; }
	#mode-section .mode-panel-line { margin-top: 12px; font-size: 10px; }
	#mode-section h2 { font-size: 35px; }
	#community-section .community-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, 230px); }
	#community-section .community-item:first-child { grid-column: auto; }
	#community-section .community-item:last-child { grid-column: auto; }
	#step-section h2 { font-size: 35px; }
	#cta-section h2 { font-size: 36px; }
	footer .footer-nav { flex-wrap: wrap; justify-content: center; gap: 14px; }
}