:root {
  --muted: #9b9b9b;
  --line: #d9d9d9;
  --blue: #3fbcff;
  --paper: #fbf7ef;
  --card-shadow: 0 4px 24px rgba(8, 52, 84, 0.2);
  --ink: #0b2940;
  --frame-shadow: 0 18px 34px rgba(17, 49, 84, 0.14);
}

@font-face {
  font-family: "DINOT-Bold";
  src: url("../assets/font/DINOT-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Microsoft YaHei";
  src: url("../assets/font/DINOT-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
}

body {
  background: #fff;
}

.hero-inner,
.stats-inner,
.feature-inner {
  width: var(--content-width);
  margin: 0 auto;
}

.hero-section {
  height: 650px;
  background:
    /* linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.12)), */
    url("../assets/home/courseware-banner.png") center top / cover no-repeat;
}

.hero-inner {
  position: relative;
  height: 100%;
}

.hero-copy {
  position: absolute;
  top: 240px;
  left: 540px;
  width: 359px;
  text-align: center;
  color: #fff;
}

.hero-copy h1 {
  margin: 0;
  font-size: 72px;
  line-height: 100px;
  font-weight: 700;
  color: #000;
}

.hero-copy p {
  margin: 18px 0 64px;
  font-size: 24px;
  line-height: 34px;
  color: #000;
}

.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 196px;
  height: 60px;
  padding: 0 38px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 25px;
  font-weight: 600;
}

.pill-button::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 18px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
}

.stats-section {
  background: #fff;
}

.stats-inner {
  height: 333px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  padding: 0 303px;
}

.stat-card {
  text-align: center;
  img{
    display: block;
    margin: 0 auto;
    width:288px ;
    margin-top: 20px;
  }
}

.stat-card span {
  display: block;
  margin-bottom: 18px;
  font-size: 22px;
  line-height: 33px;
}

.stat-card strong {
  font-family: "DINOT-Bold", sans-serif;
  font-size: 68px;
  line-height: 1;
  font-weight: 700;
}

.stat-card em {
  margin-left: 12px;
  font-style: normal;
  font-size: 24px;
}

.stats-divider {
  width: 1px;
  height: 107px;
  background: #e8e8e8;
}

.feature-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 602px;
  padding: 0 121px;
}

.feature-inner-left {
  min-height: 613px;
}

.feature-copy {
  width: 448px;
}

.feature-inner-left .feature-copy {
  width: 551px;
}

.feature-copy h2 {
  margin: 0 0 25px;
  font-size: 36px;
  line-height: 53px;
  font-weight: 600;
}

.feature-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 40px;
  font-family: "Microsoft YaHei"

}

.feature-visual {
  position: relative;
}

.shadow-card {
  /* box-shadow: var(--card-shadow); */
}

.feature-visual-courseware {
  width: 587px;
  height: 368px;
  border-radius: 14px;
  overflow: hidden;
    border-radius: 14px;
  background: var(--ink);
  box-shadow: var(--frame-shadow);
  overflow: hidden;
  div{
    margin: 15px;
  }
}

.feature-visual-courseware img {
  width: 100%;
  object-fit: contain;
  height: 340px;
}

.feature-section-alt {
  background: #fff;
}

.feature-visual-board {
  width: 571px;
  height: 371px;
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
  &.f-design{
    border-radius: 14px;
    background: var(--ink);
    box-shadow: var(--frame-shadow);
    overflow: hidden;
    div{
              margin: 15px;
        overflow: hidden;
        height: 340px;
        border-radius: 13px;
    }
    &::before{
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 13px;
    }
    img{
      display: block;
      width: 540px;
      margin: 0 auto;
      border-radius: 14px;
      /* margin-top: 10px; */
    }
  }
}

.board-grid {
  height: 100%;
  padding: 26px;
  background:
    linear-gradient(180deg, rgba(205, 164, 110, 0.22), rgba(205, 164, 110, 0.04)),
    #faf4ea;
}

.board-topbar {
  width: 170px;
  height: 18px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d8b586 0%, #f5e2c6 100%);
}

.board-row {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.board-row span {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(122, 95, 61, 0.25);
}

.board-main {
  height: 185px;
  border: 2px solid rgba(173, 132, 74, 0.35);
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 18px, rgba(173, 132, 74, 0.12) 18px, rgba(173, 132, 74, 0.12) 19px);
}

.board-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.board-footer span {
  height: 18px;
  border-radius: 8px;
  background: rgba(122, 95, 61, 0.18);
}

.feature-visual-cards {
  width: 587px;
  height: 399px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cards-cluster {
  display: grid;
  grid-template-columns: repeat(3, 170px);
  gap: 18px;
  align-items: start;
}

.mini-card {
  min-height: 112px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(31, 92, 150, 0.12);
}

.mini-card-tall {
  min-height: 144px;
}

.mini-card-wide {
  grid-column: span 2;
}

.mini-card::before,
.mini-card::after {
  content: "";
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, #58a9ff 0%, rgba(88, 169, 255, 0.18) 78%, transparent 78%);
}

.mini-card::before {
  width: 84%;
  height: 10px;
  margin-bottom: 12px;
}

.mini-card::after {
  width: 62%;
  height: 10px;
}

.mini-card-photo {
  padding: 0;
  overflow: hidden;
}

.mini-card-photo::before,
.mini-card-photo::after {
  display: none;
}

.mini-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-section {
  padding: 44px 0 110px;
  background: #fff;
  img{
    width: 1329px;
    margin: 0 auto;
  }
}

.testimonial-inner {
  width: 1440px;
  margin: 0 auto;
  padding: 0 100px;
}

.testimonial-header {
  text-align: center;
}

.testimonial-header h2 {
  margin: 0;
  font-size: 41px;
  line-height: 58px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.testimonial-header h2 span {
  color: #49b9ff;
  font-size: 46px;
}

.testimonial-header p {
  margin: 30px 0 0;
  color: #b1b1b1;
  font-size: 20px;
  line-height: 1.5;
}

.testimonial-header p + p {
  margin-top: 8px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 28px;
  align-items: start;
  margin-top: 84px;
  grid-auto-rows: minmax(min-content, auto); /* 行高根据内容自动调整 */
  grid-auto-flow: dense; /* 关键：密集填充模式 */

}

.testimonial-card {
  position: relative;
  padding: 22px 26px 28px;
  border-radius: 14px;
  background: linear-gradient(180deg, #e8f1ff 0%, #ffffff 72%);
  box-shadow: 0 24px 42px rgba(30, 70, 120, 0.1);
  min-height: 234px;
  &:nth-child(6){
    margin-top: -80px;
  }
  &:nth-child(8){
    margin-top: -80px;
  }
  margin-bottom: 10px;
}

.testimonial-card::before {
  content: "“";
  position: absolute;
  left: 8px;
  top: 58px;
  color: rgba(110, 165, 255, 0.2);
  font-size: 148px;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
}

.testimonial-card-tall {
  min-height: 362px;
}

.testimonial-card-large {
  min-height: 328px;
}

.testimonial-card-short {
  min-height: 250px;
  margin-top: -6px;
}

.testimonial-card-offset {
  margin-top: 2px;
}

.testimonial-author {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.testimonial-author strong {
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
}

.testimonial-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #929292;
  font-size: 18px;
  line-height: 1.72;
  font-weight: 400;
  margin-top: 40px;
}

.testimonial-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(21, 55, 98, 0.08);
}

.testimonial-avatar::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffd9c0;
  z-index: 2;
}

.testimonial-avatar::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 7px;
  width: 28px;
  height: 18px;
  border-radius: 16px 16px 12px 12px;
  background: #5179c6;
  z-index: 1;
}

.testimonial-avatar.male::after {
  background: #4d87de;
}

.testimonial-avatar-feng.female::before,
.testimonial-avatar-sun::before,
.testimonial-avatar-wang::before {
  background: #ffd7c2;
}

.testimonial-avatar-zhao::before,
.testimonial-avatar-zhou::before {
  background: #f6d8b2;
}

.testimonial-avatar-li::before,
.testimonial-avatar-feng.male::before {
  background: #ffd8c4;
}

.testimonial-avatar-feng.female::after,
.testimonial-avatar-sun::after,
.testimonial-avatar-wang::after {
  background:
    radial-gradient(circle at 50% 12px, #2d2d38 0 11px, transparent 11px),
    linear-gradient(180deg, #30354a 0%, #5968a7 100%);
}

.testimonial-avatar-zhao::after,
.testimonial-avatar-zhou::after {
  background:
    radial-gradient(circle at 50% 12px, #87531f 0 11px, transparent 11px),
    linear-gradient(180deg, #f0cc86 0%, #e0b859 100%);
}

.testimonial-avatar-li::after,
.testimonial-avatar-feng.male::after {
  background:
    radial-gradient(circle at 50% 11px, #222 0 10px, transparent 10px),
    linear-gradient(180deg, #4b8ae6 0%, #5b7fca 100%);
}

.site-footer {
  margin-top: 42px;
}


@media (max-width: 1440px) {
  .hero-copy{
    left: 50%;
    transform: translateX(-50%);
  }
  .feature-inner{
    padding: 0 !important;
  }
}