:root {
  --blue: #3478f6;
  --deep-blue: #06365e;
  --ink: #17496f;
  --muted: #7a8a9c;
  --purple: #11082f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; background: #fafafa; }
button, a { font: inherit; }
img { display: block; max-width: 100%; }
::selection { color: #fff; background: #3478f6; }
a:focus-visible { outline: 3px solid #ffbd42; outline-offset: 4px; }

.study-header { position: absolute; inset: 0 0 auto; z-index: 10; width: min(1740px, calc(100% - 110px)); height: 100px; margin: auto; display: flex; align-items: center; justify-content: space-between; opacity: 0; }
.study-logo img { width: 68px; height: 62px; object-fit: contain; }
.study-nav { display: flex; align-items: center; gap: 12px; }
.study-nav a { min-width: 94px; padding: 9px 14px; border-radius: 20px; color: #64738c; font-size: 14px; letter-spacing: 0; text-align: center; text-decoration: none; }
.study-nav a:hover, .study-nav a.active { color: #fff; background: var(--blue); box-shadow: 0 4px 10px #4d83e94d; }

.study-hero { position: relative; height: 742px; overflow: hidden; background: #eef4fb url("自习室.png") center top / 1920px auto no-repeat; }
.hero-mobile { position: absolute; inset: 0; display: block; }
.hero-video { position: absolute; z-index: 1; top: 152px; left: max(78px, calc((100% - 1724px) / 2)); width: 970px; height: 590px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .75); border-radius: 4px; background: #dfe7f2; }
.hero-video video { width: 100%; height: 100%; display: block; object-fit: cover; background: #dfe7f2; }
.hero-copy { display: none; }

@media (min-width: 1601px) {
  .study-hero::after {
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    height: 132px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, #eff8fa 0%, #eff4f7 18%, #eef1f5 58%, #dce5ed 100%);
  }
}

.study-invite { height: 565px; padding-top: 118px; background: #fafafa; }
.invite-panel { width: min(1424px, calc(100% - 180px)); height: 318px; margin: auto; display: grid; grid-template-columns: 434px 1fr 228px; align-items: center; background: #f0f5ff; box-shadow: 18px 22px 0 #f4f4f4; }
.invite-panel > img { width: 434px; height: 318px; object-fit: cover; border-radius: 0; }
.invite-copy { padding: 0 76px; }
.invite-copy h2 { margin: 0 0 20px; color: #41464f; font-size: 34px; line-height: 1.45; letter-spacing: 0; }
.invite-copy p { max-width: 590px; margin: 0; color: #999; font-size: 14px; line-height: 1.55; }
.invite-panel > a { display: flex; width: 228px; height: 94px; align-items: center; justify-content: center; color: #fff; font-size: 18px; text-decoration: none; background: #3f7ff5; }

.study-solution { height: 1200px; padding-top: 92px; overflow: hidden; border-radius: 18px 18px 0 0; background: #fff; }
.line-title { display: flex; align-items: center; justify-content: center; gap: 30px; }
.line-title span { width: 270px; height: 5px; background: linear-gradient(90deg, transparent, #aed7ff); }
.line-title span:last-child { transform: rotate(180deg); }
.line-title h2 { margin: 0; color: #3684f6; font-size: 24px; line-height: 1; letter-spacing: 0; }
.solution-lead { margin: 50px 0 40px; color: #3c719b; font-size: 27px; font-weight: 700; text-align: center; }
.solution-grid { width: min(1728px, calc(100% - 160px)); margin: auto; display: grid; grid-template-columns: 1.15fr .95fr; grid-template-rows: 495px 365px; gap: 42px 34px; }
.operation-panel, .support-panel, .ai-matrix { position: relative; border-radius: 9px; background: #fdfdfd; box-shadow: 0 12px 30px #8ea4bd1f; }
.operation-panel { padding: 43px 36px; }
.operation-panel::before { content: ""; position: absolute; top: 0; left: 0; width: 270px; height: 3px; background: #76a9ff; box-shadow: 0 0 0 0 #76a9ff; }
.operation-panel::after { content: ""; position: absolute; right: 0; bottom: 0; width: 270px; height: 3px; background: #76a9ff; }
.operation-panel > h3::before { content: ""; position: absolute; top: -46px; left: -39px; width: 3px; height: 160px; background: #76a9ff; }
.operation-panel h3, .support-panel h3, .ai-matrix h3 { position: relative; z-index: 0; margin: 0; color: #fff; font-size: 22px; line-height: 1.35; letter-spacing: 0; }
.operation-panel h3, .ai-matrix h3 { width: 252px; }
.support-panel h3 { width: 190px; }
.operation-panel h3::after, .support-panel h3::after, .ai-matrix h3::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 23px; background: #3e80ff; }
.operation-copy { margin-top: 55px; display: grid; grid-template-columns: 1fr 260px; gap: 32px; align-items: center; }
.operation-copy dl { margin: 0; }
.operation-copy dl div + div { margin-top: 31px; }
.operation-copy dt { margin-bottom: 7px; color: #386cba; font-size: 16px; font-weight: 700; }
.operation-copy dd { margin: 0; color: #7c8793; font-size: 13px; line-height: 1.6; }
.operation-copy img { width: 260px; height: 320px; object-fit: cover; border-radius: 8px; }
.support-panel { padding: 43px 44px; }
.support-grid { margin-top: 55px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 28px; }
.support-grid figure { position: relative; width: 155px; height: 155px; margin: auto; }
.support-grid img { width: 100%; height: 100%; object-fit: contain; }
.support-grid figcaption { position: absolute; inset: 55px 4px auto; padding: 7px 2px; color: #fff; font-size: 13px; text-align: center; background: #101923b8; }
.ai-matrix { width: 78%; justify-self: start; padding: 43px 36px; }
.matrix-grid { height: 225px; margin-top: 45px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); border-radius: 0 0 9px 9px; overflow: hidden; background: linear-gradient(140deg, #3c75ef, #4388fc); }
.matrix-grid span { display: flex; align-items: center; justify-content: center; border-right: 1px solid #ffffff4a; border-bottom: 1px solid #ffffff4a; color: #fff; font-size: 16px; text-align: center; }
.matrix-grid span:nth-child(3n) { border-right: 0; }
.matrix-grid span:nth-child(n+4) { border-bottom: 0; }
.audience-pill { position: relative; align-self: start; justify-self: start; width: 120%; height: 200px; margin: 125px 0 0 -20.5%; padding: 113px 32px 0; border-radius: 8px; color: #2777e8; font-size: 16px; font-weight: 700; line-height: 1.45; text-align: center; white-space: nowrap; background: #fff; box-shadow: 0 12px 30px #8ea4bd1f; }
.audience-pill::before { position: absolute; top: 43px; left: 50%; width: 130px; height: 26px; border-radius: 50%; content: ""; transform: translateX(-50%); background: linear-gradient(100deg, #31b4f2, #1957f2); }
.audience-pill::after { position: absolute; top: 50px; left: 50%; width: 22px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; content: ""; transform: translateX(-50%) skewX(-32deg); }

.study-advantages { position: relative; height: 910px; overflow: hidden; background: #f7f8fa url("自习室.png") center -2500px / 1920px auto no-repeat; }
.study-advantages::after { position: absolute; z-index: 0; top: 750px; right: 0; bottom: 0; left: 0; content: ""; background: #f7f8fa; }
.advantages-mobile { position: absolute; z-index: 1; top: 775px; right: 0; left: 0; display: block; }
.advantages-mobile > img { width: min(1728px, calc(100% - 160px)); height: auto; margin: 0 auto; }

.store-showcase { height: 1600px; padding-top: 105px; overflow: hidden; border-radius: 18px 18px 0 0; background: #fff; }
.store-showcase .line-title { margin-bottom: 82px; }
.store-grid { width: min(1728px, calc(100% - 160px)); height: 1210px; margin: auto; display: grid; grid-template-columns: 1.12fr .92fr .92fr; gap: 20px; }
.store-grid img, .store-grid a { width: 100%; border-radius: 18px; box-shadow: 0 12px 30px #8295ab1f; }
.store-awards { height: 1210px; object-fit: cover; object-position: center top; }
.store-column { height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-rows: 1fr 1.13fr .97fr; gap: 20px; }
.store-column-right { grid-template-rows: 1.12fr 1.16fr .72fr; }
.store-column img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.store-column a { display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 26px; text-decoration: none; background: #fff; box-shadow: 0 12px 30px #8295ab1f; }

.study-join { height: 290px; padding: 70px 20px; color: #fff; text-align: center; background: #216bf1; }
.study-join p { margin: 0 0 18px; color: #8fbeff; font-size: 18px; }
.study-join strong { display: block; font-size: 24px; }
.study-join a { display: inline-block; margin-top: 27px; padding: 11px 22px; border-radius: 20px; color: #1762e5; font-size: 13px; font-weight: 700; text-decoration: none; background: #fff; }

.study-footer { height: 245px; padding: 48px max(80px, calc((100% - 1700px) / 2)); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 80px; color: #fff; background: var(--purple); }
.footer-brand, .footer-contact, .footer-qr { min-height: 145px; }
.footer-brand { display: flex; align-items: center; gap: 40px; }
.footer-brand img { width: 110px; height: 100px; object-fit: contain; }
.footer-brand p, .footer-contact p { color: #d8d5e6; font-size: 12px; line-height: 1.8; }
.footer-contact, .footer-qr { padding-left: 45px; border-left: 1px solid #342a5a; }
.study-footer h2 { margin: 0 0 24px; font-size: 15px; }
.footer-contact { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.footer-contact h2 { flex-basis: 100%; }
.footer-qr img { display: inline-block; width: 78px; height: 78px; margin-right: 14px; background: #fff; }

@media (max-width: 1600px) {
  .study-header { opacity: 1; }
  .study-hero { height: auto; min-height: 720px; padding: 140px 40px 70px; background: linear-gradient(145deg, #f7fbff, #e3f4ff 70%, #c0d7ff); }
  .hero-mobile { position: relative; inset: auto; width: 100%; display: grid; grid-template-columns: 1.1fr .9fr; gap: 45px; align-items: center; }
  .hero-video { position: relative; height: 480px; background: #dfe7f2; box-shadow: 0 18px 40px #7c9ac629; }
  .hero-video { top: auto; left: auto; width: 100%; }
  .hero-copy { display: block; }
  .hero-copy h1 { margin: 0 0 20px; font-size: 34px; }
  .hero-copy > strong { display: inline-block; padding: 9px 25px; border-radius: 22px; color: #fff; background: #2874f3; }
  .hero-copy h2 { margin: 48px 0 20px; font-size: 19px; }
  .hero-copy p { margin: 0; color: #426c91; font-size: 14px; line-height: 1.9; }
}

@media (max-width: 1200px) {
  .study-header { width: calc(100% - 50px); opacity: 1; }
  .study-hero { height: auto; min-height: 720px; padding: 140px 40px 70px; background: linear-gradient(145deg, #f7fbff, #e3f4ff 70%, #c0d7ff); }
  .hero-mobile { width: 100%; display: grid; grid-template-columns: 1.1fr .9fr; gap: 45px; align-items: center; }
  .hero-video { position: relative; height: 480px; background: #dfe7f2; box-shadow: 0 18px 40px #7c9ac629; }
  .hero-copy h1 { margin: 0 0 20px; font-size: 34px; }
  .hero-copy > strong { display: inline-block; padding: 9px 25px; border-radius: 22px; color: #fff; background: #2874f3; }
  .hero-copy h2 { margin: 48px 0 20px; font-size: 19px; }
  .hero-copy p { margin: 0; color: #426c91; font-size: 14px; line-height: 1.9; }
  .invite-panel { width: calc(100% - 80px); grid-template-columns: minmax(0, 32%) minmax(0, 1fr) minmax(0, 170px); }
  .invite-panel > img { width: 100%; }
  .invite-copy { min-width: 0; padding: 0 35px; }
  .invite-copy h2 { font-size: 25px; }
  .invite-panel > a { width: 100%; }
  .solution-grid { width: calc(100% - 80px); grid-template-columns: 1fr 1fr; }
  .operation-copy { grid-template-columns: 1fr 35%; }
  .support-panel { padding: 35px 20px; }
  .support-grid { gap: 18px 8px; }
  .support-grid figure { width: min(130px, 100%); height: auto; aspect-ratio: 1; }
  .ai-matrix { width: 100%; justify-self: stretch; }
  .audience-pill { width: auto; height: 160px; margin: 48px 0 0; padding: 88px 25px 20px; font-size: 14px; white-space: normal; }
  .audience-pill::before { top: 31px; width: 110px; height: 24px; }
  .audience-pill::after { top: 37px; }
  .study-advantages { height: auto; min-height: 0; padding: 70px 40px; background: #f7f8fa; }
  .study-advantages::after { display: none; }
  .advantages-mobile { position: static; }
  .advantages-mobile > img { width: 100%; }
  .store-grid { width: calc(100% - 80px); }
}

@media (max-width: 760px) {
  .study-header { position: fixed; width: 100%; height: 68px; padding: 0 16px; background: #ffffffed; box-shadow: 0 2px 12px #5071a31c; }
  .study-logo img { width: 49px; height: 45px; }
  .study-nav { gap: 0; overflow-x: auto; }
  .study-nav a { min-width: auto; padding: 7px 7px; font-size: 10px; white-space: nowrap; }
  .study-hero { min-height: 0; padding: 105px 18px 55px; }
  .hero-mobile { display: block; }
  .hero-video { height: 240px; }
  .hero-copy { padding-top: 42px; }
  .hero-copy h1 { font-size: 26px; }
  .hero-copy > strong { padding: 8px 14px; font-size: 12px; }
  .hero-copy h2 { margin-top: 36px; font-size: 17px; }
  .hero-copy p { font-size: 12px; }
  .study-invite { height: auto; padding: 45px 15px 65px; }
  .invite-panel { width: 100%; height: auto; display: block; box-shadow: 8px 10px 0 #f4f4f4; }
  .invite-panel > img { height: 215px; }
  .invite-copy { padding: 28px 24px; }
  .invite-copy h2 { font-size: 21px; }
  .invite-panel > a { width: calc(100% - 48px); height: 50px; margin: 0 24px 28px; }
  .study-solution { height: auto; padding: 80px 15px; }
  .line-title { gap: 12px; }
  .line-title span { width: 52px; height: 2px; }
  .line-title h2 { font-size: 18px; white-space: nowrap; }
  .solution-lead { margin: 32px auto 38px; font-size: 18px; line-height: 1.6; }
  .solution-grid { width: 100%; display: block; }
  .operation-panel, .support-panel, .ai-matrix { margin-bottom: 24px; padding: 28px 20px; }
  .operation-panel h3, .ai-matrix h3 { width: 252px; font-size: 17px; }
  .support-panel h3 { width: 190px; font-size: 17px; }
  .operation-copy { margin-top: 40px; display: block; }
  .operation-copy img { width: 100%; height: 250px; margin-top: 25px; }
  .support-grid { margin-top: 40px; grid-template-columns: repeat(2, 1fr); }
  .support-grid figure { width: 125px; }
  .matrix-grid { height: 260px; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .matrix-grid span { font-size: 13px; }
  .matrix-grid span:nth-child(3n) { border-right: 1px solid #ffffff4a; }
  .matrix-grid span:nth-child(2n) { border-right: 0; }
  .matrix-grid span:nth-child(n+4) { border-bottom: 1px solid #ffffff4a; }
  .matrix-grid span:nth-child(n+5) { border-bottom: 0; }
  .audience-pill { width: 100%; height: auto; min-height: 150px; margin: 30px 0 0; padding: 82px 20px 28px; border-radius: 8px; line-height: 1.6; }
  .audience-pill::before { top: 28px; }
  .audience-pill::after { top: 34px; }
  .study-advantages { min-height: 0; padding: 50px 15px; }
  .store-showcase { height: auto; padding: 80px 15px 70px; }
  .store-showcase .line-title { margin-bottom: 45px; }
  .store-grid { width: 100%; height: auto; display: block; }
  .store-awards { height: auto; max-height: 720px; object-position: center top; }
  .store-column { margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px; gap: 15px; }
  .store-column img:last-child { grid-column: 1 / -1; }
  .store-column-right { grid-template-rows: 180px 110px; }
  .store-column-right a { min-height: 110px; }
  .study-join { height: auto; min-height: 240px; padding: 55px 20px; }
  .study-join p { font-size: 15px; }
  .study-join strong { font-size: 14px; line-height: 1.7; }
  .study-footer { height: auto; padding: 40px 25px; display: block; }
  .footer-brand, .footer-contact, .footer-qr { margin-bottom: 30px; padding-left: 0; border-left: 0; }
}