* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; font-family: "Noto Sans TC", sans-serif; color: #eef4ff; background: #07111f; overflow-x: hidden; }

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

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

header { position: fixed; top: 0; left: 0; z-index: 50; width: 100%; padding: 18px 6%; display: flex; align-items: center; justify-content: space-between; background: rgba(7, 17, 31, 0.78); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: padding 0.35s ease, background 0.35s ease; }
header.is-active { padding: 12px 6%; background: rgba(7, 17, 31, 0.94); }
header .site-brand { display: flex; align-items: center; gap: 12px; }
header .brand-mark { width: 42px; height: 42px; display: grid; place-items: center; color: #07111f; font-weight: 900; border-radius: 14px; background: linear-gradient(135deg, #17f2c9, #4da2ff 58%, #a575ff); box-shadow: 0 14px 38px rgba(23, 242, 201, 0.24); }
header h1 { margin: 0; font-size: 22px; line-height: 1; letter-spacing: 0.02em; }
header .site-tagline { display: block; margin-top: 5px; color: #9bb4d9; font-size: 12px; font-weight: 500; letter-spacing: 0.15em; }
header nav { display: flex; align-items: center; gap: 8px; }
header nav a { position: relative; padding: 10px 14px; color: #c8d8f5; font-size: 14px; font-weight: 700; border-radius: 999px; transition: color 0.3s ease, background 0.3s ease; }
header nav a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
header .header-action { padding: 11px 18px; color: #07111f; font-size: 14px; font-weight: 900; border-radius: 999px; background: linear-gradient(135deg, #17f2c9, #89ffdb); box-shadow: 0 14px 30px rgba(23, 242, 201, 0.22); transition: transform 0.3s ease, box-shadow 0.3s ease; }
header .header-action:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(23, 242, 201, 0.32); }

main { width: 100%; }

#hero-section { position: relative; min-height: 100vh; padding: 150px 6% 90px; display: flex; align-items: center; overflow: hidden; background: radial-gradient( circle at 78% 18%, rgba(77, 162, 255, 0.45), transparent 28% ), radial-gradient( circle at 18% 32%, rgba(23, 242, 201, 0.26), transparent 30% ), linear-gradient(135deg, #07111f 0%, #0b1b33 54%, #07111f 100%); }
#hero-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(7, 17, 31, 0.9), rgba(7, 17, 31, 0.58) 42%, rgba(7, 17, 31, 0.22) ), url(../images/hero-bg.webp) center/cover; opacity: 0.72; transform: scale(1.04); }
#hero-section::after { content: ""; position: absolute; left: -10%; bottom: -25%; width: 55vw; height: 55vw; border-radius: 50%; background: radial-gradient( circle, rgba(23, 242, 201, 0.18), transparent 62% ); filter: blur(6px); }
#hero-section .hero-content { position: relative; z-index: 2; width: min(760px, 100%); opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; }
#hero-section.is-active .hero-content { opacity: 1; transform: translateY(0); }
#hero-section .hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 9px 14px; color: #b9fff1; font-size: 14px; font-weight: 900; letter-spacing: 0.1em; border: 1px solid rgba(23, 242, 201, 0.42); border-radius: 999px; background: rgba(23, 242, 201, 0.08); box-shadow: inset 0 0 22px rgba(23, 242, 201, 0.08); }
#hero-section .hero-kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #17f2c9; box-shadow: 0 0 18px #17f2c9; }
#hero-section .hero-title { margin: 0; max-width: 720px; color: #ffffff; font-size: clamp(46px, 7vw, 92px); line-height: 0.98; font-weight: 900; letter-spacing: -0.05em; }
#hero-section .hero-title span { display: block; color: transparent; background: linear-gradient(135deg, #17f2c9, #6ab5ff 48%, #d6c3ff); -webkit-background-clip: text; background-clip: text; }
#hero-section .hero-text { width: min(620px, 100%); margin: 26px 0 0; color: #c9d8ef; font-size: 18px; line-height: 1.9; }
#hero-section .hero-action-list { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
#hero-section .hero-action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 22px; font-size: 15px; font-weight: 900; border-radius: 999px; transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease; }
#hero-section .hero-action-primary { color: #07111f; background: linear-gradient(135deg, #17f2c9, #b3ffe9); box-shadow: 0 18px 42px rgba(23, 242, 201, 0.28); }
#hero-section .hero-action-secondary { color: #e8f1ff; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.08); }
#hero-section .hero-action:hover { transform: translateY(-3px); }
#hero-section .hero-panel { position: absolute; right: 6%; bottom: 88px; z-index: 3; width: min(380px, 32vw); padding: 18px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 28px; background: rgba(8, 21, 40, 0.72); backdrop-filter: blur(18px); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36); opacity: 0; transform: translateY(34px) scale(0.96); transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; }
#hero-section.is-active .hero-panel { opacity: 1; transform: translateY(0) scale(1); }
#hero-section .panel-image { height: 220px; border-radius: 22px; overflow: hidden; }
#hero-section .panel-image img { height: 100%; object-fit: cover; }
#hero-section .panel-content { padding: 18px 6px 4px; }
#hero-section .panel-label { display: inline-block; margin-bottom: 10px; color: #17f2c9; font-size: 13px; font-weight: 900; letter-spacing: 0.08em; }
#hero-section .panel-title { margin: 0; color: #ffffff; font-size: 24px; line-height: 1.35; font-weight: 900; }
#hero-section .panel-meta { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
#hero-section .panel-meta span { padding: 7px 10px; color: #cfe1ff; font-size: 12px; font-weight: 700; border-radius: 999px; background: rgba(255, 255, 255, 0.09); }

#feature-section { padding: 110px 6%; background: linear-gradient(180deg, #07111f, #08182c); }
#feature-section .section-head { display: grid; grid-template-columns: 1fr 0.72fr; gap: 36px; align-items: end; margin-bottom: 48px; }
#feature-section .section-label { display: inline-block; margin-bottom: 14px; color: #17f2c9; font-size: 14px; font-weight: 900; letter-spacing: 0.12em; }
#feature-section h2 { margin: 0; color: #ffffff; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.12; letter-spacing: -0.035em; }
#feature-section .section-text { margin: 0; color: #aebfda; font-size: 17px; line-height: 1.9; }
#feature-section .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
#feature-section .feature-item { position: relative; min-height: 260px; padding: 26px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035) ); overflow: hidden; opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.35s ease, background 0.35s ease; }
#feature-section.is-active .feature-item { opacity: 1; transform: translateY(0); }
#feature-section.is-active .feature-item:nth-child(2) { transition-delay: 0.08s; }
#feature-section.is-active .feature-item:nth-child(3) { transition-delay: 0.16s; }
#feature-section.is-active .feature-item:nth-child(4) { transition-delay: 0.24s; }
#feature-section .feature-item::before { content: ""; position: absolute; inset: auto -30% -38% -30%; height: 150px; background: radial-gradient( circle, rgba(23, 242, 201, 0.24), transparent 68% ); opacity: 0; transition: opacity 0.35s ease; }
#feature-section .feature-item:hover { border-color: rgba(23, 242, 201, 0.42); background: linear-gradient( 180deg, rgba(23, 242, 201, 0.12), rgba(255, 255, 255, 0.04) ); }
#feature-section .feature-item:hover::before { opacity: 1; }
#feature-section .feature-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 28px; color: #07111f; font-size: 25px; font-weight: 900; border-radius: 20px; background: linear-gradient(135deg, #17f2c9, #79bdff); }
#feature-section .feature-title { margin: 0 0 13px; color: #ffffff; font-size: 22px; line-height: 1.35; font-weight: 900; }
#feature-section .feature-text { margin: 0; color: #adbfdb; font-size: 15px; line-height: 1.8; }

#channel-section { position: relative; padding: 110px 6%; background: #08182c; overflow: hidden; }
#channel-section::before { content: ""; position: absolute; top: 12%; right: -18%; width: 44vw; height: 44vw; border-radius: 50%; background: radial-gradient( circle, rgba(77, 162, 255, 0.23), transparent 66% ); }
#channel-section .channel-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 54px; align-items: center; }
#channel-section .channel-media { position: relative; opacity: 0; transform: translateX(-28px); transition: opacity 0.75s ease, transform 0.75s ease; }
#channel-section.is-active .channel-media { opacity: 1; transform: translateX(0); }
#channel-section .media-card { position: relative; overflow: hidden; border-radius: 34px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 32px 90px rgba(0, 0, 0, 0.32); }
#channel-section .media-card img { height: 520px; object-fit: cover; filter: saturate(1.08) contrast(1.05); }
#channel-section .media-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(7, 17, 31, 0.82)); }
#channel-section .media-float { position: absolute; right: -22px; bottom: 32px; z-index: 2; padding: 18px 20px; border-radius: 24px; background: rgba(7, 17, 31, 0.78); border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(16px); box-shadow: 0 18px 52px rgba(0, 0, 0, 0.32); }
#channel-section .media-number { display: block; color: #17f2c9; font-size: 38px; line-height: 1; font-weight: 900; letter-spacing: -0.03em; }
#channel-section .media-note { display: block; margin-top: 6px; color: #cbd9ef; font-size: 13px; font-weight: 700; }
#channel-section .channel-content { opacity: 0; transform: translateX(28px); transition: opacity 0.75s ease 0.12s, transform 0.75s ease 0.12s; }
#channel-section.is-active .channel-content { opacity: 1; transform: translateX(0); }
#channel-section .section-label { display: inline-block; margin-bottom: 14px; color: #17f2c9; font-size: 14px; font-weight: 900; letter-spacing: 0.12em; }
#channel-section h2 { margin: 0; color: #ffffff; font-size: clamp(32px, 4vw, 56px); line-height: 1.15; letter-spacing: -0.035em; }
#channel-section .section-text { margin: 24px 0 0; color: #aebfda; font-size: 17px; line-height: 1.95; }
#channel-section .channel-list { margin-top: 34px; display: grid; gap: 14px; }
#channel-section .channel-item { display: grid; grid-template-columns: 42px 1fr; gap: 15px; align-items: start; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; background: rgba(255, 255, 255, 0.045); transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
#channel-section .channel-item:hover { transform: translateX(6px); border-color: rgba(23, 242, 201, 0.36); background: rgba(23, 242, 201, 0.07); }
#channel-section .channel-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #07111f; font-weight: 900; border-radius: 15px; background: linear-gradient(135deg, #17f2c9, #75b9ff); }
#channel-section .channel-title { margin: 0 0 6px; color: #ffffff; font-size: 18px; font-weight: 900; }
#channel-section .channel-text { margin: 0; color: #aebfda; font-size: 15px; line-height: 1.75; }

#sport-section { padding: 110px 6%; background: linear-gradient(180deg, #08182c, #06101d); }
#sport-section .sport-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 44px; }
#sport-section .section-label { display: inline-block; margin-bottom: 14px; color: #17f2c9; font-size: 14px; font-weight: 900; letter-spacing: 0.12em; }
#sport-section h2 { margin: 0; color: #ffffff; font-size: clamp(32px, 4vw, 56px); line-height: 1.15; letter-spacing: -0.035em; }
#sport-section .sport-copy { width: min(460px, 100%); margin: 0; color: #aebfda; font-size: 16px; line-height: 1.9; }
#sport-section .sport-grid { display: grid; grid-template-columns: 1.1fr 0.9fr 0.9fr; grid-auto-rows: 260px; gap: 18px; }
#sport-section .sport-item { position: relative; overflow: hidden; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.11); background: rgba(255, 255, 255, 0.05); opacity: 0; transform: translateY(28px); transition: opacity 0.72s ease, transform 0.72s ease, border-color 0.35s ease; }
#sport-section.is-active .sport-item { opacity: 1; transform: translateY(0); }
#sport-section.is-active .sport-item:nth-child(2) { transition-delay: 0.08s; }
#sport-section.is-active .sport-item:nth-child(3) { transition-delay: 0.16s; }
#sport-section.is-active .sport-item:nth-child(4) { transition-delay: 0.24s; }
#sport-section .sport-item:hover { border-color: rgba(23, 242, 201, 0.42); }
#sport-section .sport-item-large { grid-row: span 2; }
#sport-section .sport-image { position: absolute; inset: 0; }
#sport-section .sport-image img { height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 0.5s ease; }
#sport-section .sport-item:hover .sport-image img { transform: scale(1.08); }
#sport-section .sport-shade { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(7, 17, 31, 0.05), rgba(7, 17, 31, 0.9) ); }
#sport-section .sport-content { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 26px; }
#sport-section .sport-tag { display: inline-block; margin-bottom: 12px; padding: 7px 10px; color: #07111f; font-size: 12px; font-weight: 900; border-radius: 999px; background: #17f2c9; }
#sport-section .sport-title { margin: 0; color: #ffffff; font-size: 24px; line-height: 1.35; font-weight: 900; }
#sport-section .sport-text { margin: 9px 0 0; color: #bdd0ec; font-size: 14px; line-height: 1.7; }

#device-section { position: relative; padding: 110px 6%; background: #06101d; overflow: hidden; }
#device-section .device-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
#device-section .device-content { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s ease; }
#device-section.is-active .device-content { opacity: 1; transform: translateY(0); }
#device-section .section-label { display: inline-block; margin-bottom: 14px; color: #17f2c9; font-size: 14px; font-weight: 900; letter-spacing: 0.12em; }
#device-section h2 { margin: 0; color: #ffffff; font-size: clamp(32px, 4vw, 56px); line-height: 1.15; letter-spacing: -0.035em; }
#device-section .section-text { margin: 24px 0 0; color: #aebfda; font-size: 17px; line-height: 1.95; }
#device-section .device-list { margin-top: 36px; display: grid; gap: 16px; }
#device-section .device-item { display: flex; gap: 15px; align-items: flex-start; padding: 20px; border-radius: 24px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.3s ease, border-color 0.3s ease; }
#device-section .device-item:hover { transform: translateY(-4px); border-color: rgba(23, 242, 201, 0.35); }
#device-section .device-dot { flex: 0 0 13px; width: 13px; height: 13px; margin-top: 7px; border-radius: 50%; background: #17f2c9; box-shadow: 0 0 22px rgba(23, 242, 201, 0.78); }
#device-section .device-title { margin: 0 0 6px; color: #ffffff; font-size: 18px; font-weight: 900; }
#device-section .device-text { margin: 0; color: #aebfda; font-size: 15px; line-height: 1.75; }
#device-section .device-media { position: relative; min-height: 520px; opacity: 0; transform: translateY(34px); transition: opacity 0.75s ease 0.15s, transform 0.75s ease 0.15s; }
#device-section.is-active .device-media { opacity: 1; transform: translateY(0); }
#device-section .screen-card { position: absolute; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.08); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36); }
#device-section .screen-card img { height: 100%; object-fit: cover; }
#device-section .screen-card-main { top: 20px; right: 0; width: 82%; height: 310px; border-radius: 34px; }
#device-section .screen-card-small { left: 0; bottom: 26px; width: 46%; height: 270px; border-radius: 28px; }
#device-section .screen-card-wide { right: 42px; bottom: 0; width: 54%; height: 180px; border-radius: 26px; }
#device-section .play-bubble { position: absolute; top: 270px; left: 42%; z-index: 5; width: 88px; height: 88px; display: grid; place-items: center; color: #07111f; font-size: 28px; font-weight: 900; border-radius: 50%; background: linear-gradient(135deg, #17f2c9, #ffffff); box-shadow: 0 24px 62px rgba(23, 242, 201, 0.32); }

#plan-section { padding: 110px 6%; background: linear-gradient(180deg, #06101d, #07111f); }
#plan-section .plan-head { width: min(820px, 100%); margin: 0 auto 48px; text-align: center; }
#plan-section .section-label { display: inline-block; margin-bottom: 14px; color: #17f2c9; font-size: 14px; font-weight: 900; letter-spacing: 0.12em; }
#plan-section h2 { margin: 0; color: #ffffff; font-size: clamp(32px, 4vw, 56px); line-height: 1.15; letter-spacing: -0.035em; }
#plan-section .section-text { margin: 22px auto 0; width: min(680px, 100%); color: #aebfda; font-size: 17px; line-height: 1.9; }
#plan-section .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
#plan-section .plan-item { position: relative; padding: 30px; min-height: 390px; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 32px; background: rgba(255, 255, 255, 0.05); overflow: hidden; opacity: 0; transform: translateY(28px); transition: opacity 0.72s ease, transform 0.72s ease, border-color 0.35s ease, background 0.35s ease; }
#plan-section.is-active .plan-item { opacity: 1; transform: translateY(0); }
#plan-section.is-active .plan-item:nth-child(2) { transition-delay: 0.1s; }
#plan-section.is-active .plan-item:nth-child(3) { transition-delay: 0.2s; }
#plan-section .plan-item-featured { border-color: rgba(23, 242, 201, 0.46); background: linear-gradient( 180deg, rgba(23, 242, 201, 0.14), rgba(255, 255, 255, 0.055) ); box-shadow: 0 26px 80px rgba(23, 242, 201, 0.1); }
#plan-section .plan-badge { width: fit-content; margin-bottom: 20px; padding: 8px 11px; color: #07111f; font-size: 12px; font-weight: 900; border-radius: 999px; background: #17f2c9; }
#plan-section .plan-title { margin: 0; color: #ffffff; font-size: 26px; font-weight: 900; }
#plan-section .plan-subtitle { margin: 10px 0 0; color: #9eb2d1; font-size: 15px; line-height: 1.7; }
#plan-section .plan-list { margin: 28px 0 0; padding: 0; display: grid; gap: 13px; list-style: none; }
#plan-section .plan-list li { position: relative; padding-left: 24px; color: #c0d1ed; font-size: 15px; line-height: 1.65; }
#plan-section .plan-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: #17f2c9; box-shadow: 0 0 14px rgba(23, 242, 201, 0.68); }
#plan-section .plan-action { margin-top: auto; display: inline-flex; justify-content: center; align-items: center; padding: 14px 18px; color: #ffffff; font-weight: 900; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; }
#plan-section .plan-item-featured .plan-action { color: #07111f; border-color: transparent; background: linear-gradient(135deg, #17f2c9, #b3ffe9); }
#plan-section .plan-action:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.12); }

#faq-section { padding: 110px 6%; background: #07111f; }
#faq-section .faq-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 48px; align-items: start; }
#faq-section .section-label { display: inline-block; margin-bottom: 14px; color: #17f2c9; font-size: 14px; font-weight: 900; letter-spacing: 0.12em; }
#faq-section h2 { margin: 0; color: #ffffff; font-size: clamp(32px, 4vw, 56px); line-height: 1.15; letter-spacing: -0.035em; }
#faq-section .section-text { margin: 22px 0 0; color: #aebfda; font-size: 17px; line-height: 1.9; }
#faq-section .faq-list { display: grid; gap: 14px; }
#faq-section .faq-item { padding: 24px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 26px; background: rgba(255, 255, 255, 0.045); opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.35s ease; }
#faq-section.is-active .faq-item { opacity: 1; transform: translateY(0); }
#faq-section.is-active .faq-item:nth-child(2) { transition-delay: 0.08s; }
#faq-section.is-active .faq-item:nth-child(3) { transition-delay: 0.16s; }
#faq-section.is-active .faq-item:nth-child(4) { transition-delay: 0.24s; }
#faq-section .faq-item:hover { border-color: rgba(23, 242, 201, 0.35); }
#faq-section .faq-title { margin: 0 0 9px; color: #ffffff; font-size: 19px; line-height: 1.45; font-weight: 900; }
#faq-section .faq-text { margin: 0; color: #aebfda; font-size: 15px; line-height: 1.85; }

footer { padding: 46px 6%; color: #9eb2d1; background: #050b14; border-top: 1px solid rgba(255, 255, 255, 0.08); }
footer .footer-grid { display: flex; justify-content: space-between; gap: 28px; align-items: center; }
footer .footer-brand { display: flex; align-items: center; gap: 12px; color: #ffffff; font-weight: 900; }
footer .footer-mark { width: 38px; height: 38px; display: grid; place-items: center; color: #07111f; border-radius: 13px; background: linear-gradient(135deg, #17f2c9, #77baff); }
footer .footer-text { margin: 9px 0 0; max-width: 560px; color: #8ea2c2; font-size: 14px; line-height: 1.8; }
footer .footer-link-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
footer .footer-link-list a { padding: 9px 13px; color: #c8d8f5; font-size: 14px; font-weight: 700; border-radius: 999px; background: rgba(255, 255, 255, 0.055); transition: color 0.3s ease, background 0.3s ease; }
footer .footer-link-list a:hover { color: #07111f; background: #17f2c9; }

@media (max-width: 1280px) {
	header { padding: 16px 4%; }
	header.is-active { padding: 11px 4%; }
	#hero-section { padding: 140px 4% 82px; }
	#hero-section .hero-panel { right: 4%; width: min(350px, 34vw); }
	#feature-section { padding: 96px 4%; }
	#channel-section { padding: 96px 4%; }
	#sport-section { padding: 96px 4%; }
	#device-section { padding: 96px 4%; }
	#plan-section { padding: 96px 4%; }
	#faq-section { padding: 96px 4%; }
	footer { padding: 42px 4%; }
}
@media (max-width: 960px) {
	header nav { display: none; }
	#hero-section { min-height: auto; padding: 132px 4% 72px; }
	#hero-section .hero-panel { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 42px; }
	#feature-section .section-head { grid-template-columns: 1fr; gap: 22px; }
	#feature-section .feature-grid { grid-template-columns: repeat(2, 1fr); }
	#channel-section .channel-grid { grid-template-columns: 1fr; gap: 38px; }
	#channel-section .media-card img { height: 420px; }
	#channel-section .media-float { right: 18px; }
	#sport-section .sport-head { display: grid; gap: 18px; }
	#sport-section .sport-grid { grid-template-columns: 1fr 1fr; }
	#sport-section .sport-item-large { grid-row: span 1; }
	#device-section .device-grid { grid-template-columns: 1fr; gap: 38px; }
	#device-section .device-media { min-height: 470px; }
	#plan-section .plan-grid { grid-template-columns: 1fr; }
	#plan-section .plan-item { min-height: auto; }
	#faq-section .faq-grid { grid-template-columns: 1fr; gap: 34px; }
	footer .footer-grid { display: grid; }
	footer .footer-link-list { justify-content: flex-start; }
}
@media (max-width: 768px) {
	header .header-action { display: none; }
	header h1 { font-size: 20px; }
	#hero-section { padding: 118px 5% 64px; }
	#hero-section .hero-title { font-size: clamp(42px, 14vw, 72px); }
	#hero-section .hero-text { font-size: 16px; }
	#hero-section .panel-image { height: 190px; }
	#feature-section { padding: 78px 5%; }
	#feature-section .feature-grid { grid-template-columns: 1fr; }
	#channel-section { padding: 78px 5%; }
	#channel-section .media-card img { height: 360px; }
	#sport-section { padding: 78px 5%; }
	#sport-section .sport-grid { grid-template-columns: 1fr; grid-auto-rows: 250px; }
	#device-section { padding: 78px 5%; }
	#device-section .device-media { min-height: 420px; }
	#device-section .screen-card-main { width: 92%; height: 245px; }
	#device-section .screen-card-small { width: 54%; height: 230px; }
	#device-section .screen-card-wide { right: 0; width: 58%; height: 155px; }
	#device-section .play-bubble { top: 230px; left: 38%; width: 72px; height: 72px; }
	#plan-section { padding: 78px 5%; }
	#faq-section { padding: 78px 5%; }
	footer { padding: 38px 5%; }
}
@media (max-width: 500px) {
	header { padding: 13px 5%; }
	header.is-active { padding: 10px 5%; }
	header .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
	header .site-tagline { display: none; }
	#hero-section { padding: 104px 5% 56px; }
	#hero-section .hero-kicker { font-size: 12px; }
	#hero-section .hero-action-list { display: grid; }
	#hero-section .hero-action { width: 100%; }
	#hero-section .hero-panel { padding: 14px; border-radius: 24px; }
	#feature-section h2 { font-size: 32px; }
	#channel-section h2 { font-size: 32px; }
	#channel-section .media-float { left: 14px; right: 14px; bottom: 16px; }
	#sport-section h2 { font-size: 32px; }
	#device-section h2 { font-size: 32px; }
	#device-section .device-media { min-height: 360px; }
	#device-section .screen-card-main { height: 210px; border-radius: 26px; }
	#device-section .screen-card-small { height: 188px; border-radius: 22px; }
	#device-section .screen-card-wide { height: 130px; border-radius: 20px; }
	#device-section .play-bubble { top: 200px; width: 62px; height: 62px; font-size: 22px; }
	#plan-section h2 { font-size: 32px; }
	#plan-section .plan-item { padding: 24px; border-radius: 26px; }
	#faq-section h2 { font-size: 32px; }
	footer .footer-link-list { display: grid; grid-template-columns: 1fr 1fr; }
}