.course-system-pro {
  position: relative;
  min-height: auto;
  padding: 104px min(6vw, 96px) 96px;
  background:
    radial-gradient(circle at 74% 43%, rgba(255, 255, 255, 0.16), transparent 12%),
    radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.11), transparent 20%),
    radial-gradient(circle at 16% 78%, rgba(255, 107, 26, 0.13), transparent 22%),
    linear-gradient(115deg, #050608 0%, #0b0d11 48%, #11151b 100%);
  color: #f7fbff;
  overflow: hidden;
}

.course-system-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 73% 34%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.4px) 0 0 / 23px 23px,
    radial-gradient(circle at 86% 22%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.6px) 0 0 / 53px 53px,
    linear-gradient(150deg, transparent 0 46%, rgba(255, 255, 255, 0.045) 46% 54%, transparent 54% 100%);
  opacity: 0.52;
  pointer-events: none;
}

.course-system-pro::after {
  content: "Programming";
  position: absolute;
  left: 8%;
  bottom: -34px;
  z-index: 0;
  color: rgba(255, 255, 255, 0.035);
  font-size: clamp(82px, 12vw, 190px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
  pointer-events: none;
}

.course-tech-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.course-tech-bg .code-mark {
  position: absolute;
  right: 17%;
  top: 20%;
  color: rgba(255, 255, 255, 0.055);
  font-size: clamp(220px, 26vw, 460px);
  line-height: 1;
  font-weight: 950;
  transform: rotate(-18deg) skewX(-8deg);
  filter: blur(0.2px);
}

.course-tech-bg .particle-ring {
  position: absolute;
  right: -7%;
  top: 13%;
  width: min(55vw, 780px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 43%, rgba(255, 255, 255, 0.28) 44%, rgba(255, 255, 255, 0.1) 48%, transparent 55%),
    radial-gradient(circle at 18% 48%, rgba(255, 255, 255, 0.92) 0 3%, rgba(255, 255, 255, 0.32) 6%, transparent 14%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.7px) 0 0 / 8px 8px;
  mask-image: radial-gradient(circle, transparent 0 41%, #000 43% 57%, transparent 61%);
  opacity: 0.78;
  filter: drop-shadow(0 0 42px rgba(255, 255, 255, 0.18));
}

.course-tech-bg .glass-shard {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.025));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.25);
  transform-style: preserve-3d;
}

.course-tech-bg .shard-a {
  right: 42%;
  top: 18%;
  width: 250px;
  height: 150px;
  transform: perspective(800px) rotateX(58deg) rotateZ(-25deg);
}

.course-tech-bg .shard-b {
  right: 8%;
  top: 64%;
  width: 190px;
  height: 120px;
  transform: perspective(800px) rotateX(64deg) rotateZ(24deg);
}

.course-tech-bg .orange-cube {
  position: absolute;
  right: 3%;
  bottom: -26px;
  width: 92px;
  height: 92px;
  background: linear-gradient(145deg, #ffb12f, #ff6b1a 58%, #d94b0f);
  box-shadow: 0 26px 70px rgba(255, 107, 26, 0.24);
  transform: rotate(-12deg) skew(-8deg);
}

.course-tech-bg .cube-b {
  right: 12%;
  bottom: -44px;
  width: 74px;
  height: 74px;
  opacity: 0.9;
  transform: rotate(18deg) skew(-10deg);
}

.value-pro-section {
  position: relative;
  min-height: 920px;
  padding: 116px min(6vw, 96px) 104px;
  background:
    linear-gradient(115deg, rgba(255, 138, 28, 0.18) 0 10%, transparent 10% 100%),
    linear-gradient(155deg, transparent 0 66%, rgba(126, 86, 255, 0.14) 66% 78%, transparent 78% 100%),
    linear-gradient(24deg, transparent 0 42%, rgba(33, 196, 164, 0.14) 42% 52%, transparent 52% 100%),
    linear-gradient(135deg, #f8fbff 0%, #eef7ff 46%, #fff8f0 100%);
  color: #111827;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(430px, 0.9fr) minmax(560px, 1.1fr);
  gap: min(5vw, 72px);
  align-items: center;
}

.value-pro-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(22, 103, 201, 0.065) 1px, transparent 1px) 0 0 / 92px 92px,
    linear-gradient(180deg, rgba(22, 103, 201, 0.052) 1px, transparent 1px) 0 0 / 92px 92px,
    linear-gradient(120deg, transparent 0 54%, rgba(255, 255, 255, 0.74) 54% 60%, transparent 60% 100%);
  pointer-events: none;
}

.value-pro-section::after {
  content: "";
  position: absolute;
  right: -8vw;
  top: 10%;
  width: 58vw;
  height: 76%;
  background:
    linear-gradient(135deg, rgba(255, 122, 24, 0.2), transparent 28%),
    linear-gradient(225deg, rgba(22, 103, 201, 0.2), transparent 30%),
    rgba(255, 255, 255, 0.42);
  clip-path: polygon(13% 8%, 100% 0, 86% 86%, 28% 100%, 0 48%);
  pointer-events: none;
}

.value-pro-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  perspective: 1200px;
}

.value-pro-bg .plane {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.08));
  box-shadow: 0 28px 70px rgba(46, 92, 150, 0.14);
  transform-style: preserve-3d;
}

.value-pro-bg .plane-a {
  width: 420px;
  height: 250px;
  right: 8%;
  top: 11%;
  background: linear-gradient(135deg, rgba(45, 158, 255, 0.18), rgba(255, 255, 255, 0.35));
  transform: rotateX(58deg) rotateZ(-16deg);
}

.value-pro-bg .plane-b {
  width: 260px;
  height: 170px;
  left: 6%;
  bottom: 12%;
  background: linear-gradient(135deg, rgba(255, 138, 28, 0.2), rgba(255, 255, 255, 0.28));
  transform: rotateX(62deg) rotateZ(18deg);
}

.value-pro-bg .plane-c {
  width: 180px;
  height: 180px;
  right: 28%;
  bottom: 10%;
  background: linear-gradient(135deg, rgba(126, 86, 255, 0.18), rgba(33, 196, 164, 0.14));
  transform: rotateX(64deg) rotateZ(42deg);
}

.value-pro-copy,
.value-system-panel {
  position: relative;
  z-index: 2;
}

.value-pro-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: #0f63ce;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.value-pro-kicker::before {
  content: "";
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1667c9, #21c4a4 42%, #ff8a1c 72%, #7e56ff);
}

.value-pro-copy h2 {
  margin: 0 0 24px;
  color: #101827;
  max-width: 660px;
  font-size: clamp(40px, 4vw, 58px);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: 0;
  text-align: left;
}

.value-pro-copy h2::after {
  content: "";
  display: block;
  width: 210px;
  height: 8px;
  margin-top: 24px;
  background: linear-gradient(90deg, #1667c9, #21c4a4 36%, #ff8a1c 68%, #7e56ff);
  box-shadow: 0 16px 34px rgba(22, 103, 201, 0.22);
}

.value-pro-copy p {
  max-width: 600px;
  margin: 0;
  color: #46556f;
  font-size: 19px;
  line-height: 1.9;
  font-weight: 650;
}

.value-pro-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 38px;
}

.value-pro-proof b {
  min-height: 86px;
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.58)),
    var(--proof-accent, rgba(22, 103, 201, 0.12));
  color: #111827;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 950;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 22px 54px rgba(22, 46, 86, 0.1);
  backdrop-filter: blur(14px);
}

.value-pro-proof b:nth-child(1) {
  --proof-accent: linear-gradient(135deg, rgba(22, 103, 201, 0.16), transparent);
  border-bottom: 4px solid #1667c9;
}

.value-pro-proof b:nth-child(2) {
  --proof-accent: linear-gradient(135deg, rgba(33, 196, 164, 0.18), transparent);
  border-bottom: 4px solid #21c4a4;
}

.value-pro-proof b:nth-child(3) {
  --proof-accent: linear-gradient(135deg, rgba(255, 138, 28, 0.2), transparent);
  border-bottom: 4px solid #ff8a1c;
}

.value-system-panel {
  min-height: 620px;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: perspective(1200px) rotateX(5deg) rotateY(-7deg);
}

.value-system-panel::before,
.value-system-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.value-system-panel::before {
  left: 50%;
  top: 50%;
  width: min(92%, 700px);
  height: 470px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.26)),
    linear-gradient(120deg, rgba(22, 103, 201, 0.1), rgba(126, 86, 255, 0.08) 50%, rgba(255, 138, 28, 0.1));
  box-shadow: 0 38px 100px rgba(24, 58, 104, 0.18);
  backdrop-filter: blur(18px);
  clip-path: polygon(5% 9%, 96% 0, 100% 84%, 47% 100%, 0 88%);
  transform: translate(-50%, -50%);
}

.value-system-panel::after {
  left: 50%;
  top: 50%;
  width: min(70%, 520px);
  height: 270px;
  border: 1px dashed rgba(22, 103, 201, 0.2);
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(22, 103, 201, 0.18) 49.7% 50.3%, transparent 50.3%),
    linear-gradient(180deg, transparent 49.7%, rgba(22, 103, 201, 0.18) 49.7% 50.3%, transparent 50.3%);
  transform: translate(-50%, -50%);
  box-shadow: none;
}

.system-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 224px;
  height: 188px;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.26), transparent 34%),
    linear-gradient(135deg, #1667c9 0%, #18b7ff 36%, #21c4a4 62%, #ff8a1c 100%);
  color: #fff;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  box-shadow: 0 32px 80px rgba(22, 103, 201, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  z-index: 2;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}

.system-core span {
  font-size: 13px;
  font-weight: 900;
  opacity: 0.86;
}

.system-core strong {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 950;
}

.system-node {
  position: absolute;
  width: 220px;
  min-height: 142px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66)),
    linear-gradient(135deg, var(--node-a), var(--node-b));
  box-shadow: 0 24px 64px rgba(30, 67, 112, 0.14);
  backdrop-filter: blur(16px);
  border-radius: 8px;
  overflow: hidden;
}

.system-node::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: linear-gradient(180deg, var(--node-solid), rgba(255, 255, 255, 0.2));
}

.system-node em {
  color: var(--node-solid);
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.system-node strong {
  display: block;
  margin: 10px 0 8px;
  color: #111827;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 950;
}

.system-node span {
  color: #536178;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
}

.node-a {
  --node-a: rgba(22, 103, 201, 0.22);
  --node-b: rgba(24, 183, 255, 0.08);
  --node-solid: #1667c9;
  left: 46px;
  top: 54px;
}

.node-b {
  --node-a: rgba(33, 196, 164, 0.22);
  --node-b: rgba(22, 103, 201, 0.08);
  --node-solid: #18a884;
  right: 46px;
  top: 54px;
}

.node-c {
  --node-a: rgba(255, 138, 28, 0.24);
  --node-b: rgba(255, 209, 102, 0.08);
  --node-solid: #ff7a18;
  left: 46px;
  bottom: 54px;
}

.node-d {
  --node-a: rgba(126, 86, 255, 0.22);
  --node-b: rgba(255, 95, 200, 0.08);
  --node-solid: #7e56ff;
  right: 46px;
  bottom: 54px;
}

.course-pro-head,
.science-pro-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  max-width: 1260px;
  margin: 0 auto 42px;
}

.course-pro-kicker,
.science-pro-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #1168d8;
  font-size: 14px;
  font-weight: 900;
}

.course-system-pro .course-pro-kicker {
  color: #f6fbff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.16);
}

.course-pro-kicker::before,
.science-pro-kicker::before {
  content: "";
  width: 34px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #1168d8, #ff8a1c);
}

.course-pro-head h2,
.science-pro-head h2 {
  margin: 0 0 14px;
  color: #111827;
  font-size: clamp(36px, 4.6vw, 66px);
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 950;
  text-align: left;
}

.course-system-pro .course-pro-head h2 {
  color: #f7fbff;
  text-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.course-pro-head p,
.science-pro-head p {
  max-width: 820px;
  margin: 0;
  color: #48566d;
  font-size: 18px;
  line-height: 1.8;
  font-weight: 650;
}

.course-system-pro .course-pro-head p {
  color: rgba(236, 244, 255, 0.88);
}

.course-age-badge {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(17, 104, 216, 0.18);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 22px 54px rgba(12, 27, 52, 0.14);
  backdrop-filter: blur(12px);
}

.course-system-pro .course-age-badge {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.course-age-badge strong {
  color: #ff7a18;
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
}

.course-age-badge span {
  margin-top: 8px;
  color: #647084;
  font-size: 13px;
  font-weight: 850;
}

.course-system-pro .course-age-badge span {
  color: rgba(236, 244, 255, 0.76);
}

.course-path-grid {
  max-width: 1260px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  position: relative;
  z-index: 2;
}

.course-path-card {
  position: relative;
  min-height: 312px;
  padding: 26px 22px 22px;
  border: 1px solid rgba(22, 103, 201, 0.12);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 60px rgba(12, 27, 52, 0.12);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.course-system-pro .course-path-card {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.07));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

.course-path-card.featured {
  border-color: rgba(229, 72, 77, 0.55);
  background: linear-gradient(180deg, rgba(255, 245, 245, 0.96), rgba(255, 255, 255, 0.9));
  box-shadow: 0 28px 80px rgba(229, 72, 77, 0.18);
}

.course-system-pro .course-path-card.featured {
  border-color: rgba(255, 107, 26, 0.62);
  background:
    linear-gradient(180deg, rgba(255, 107, 26, 0.18), rgba(255, 255, 255, 0.075));
  box-shadow: 0 32px 90px rgba(255, 107, 26, 0.17), 0 28px 80px rgba(0, 0, 0, 0.28);
}

.course-path-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  background: var(--accent);
}

.path-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 30px;
  padding: 0 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 14%, white);
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
}

.course-path-card h3 {
  margin: 22px 0 8px;
  color: #111827;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 950;
}

.course-system-pro .course-path-card h3 {
  color: #f7fbff;
}

.course-path-card .age {
  margin: 0 0 18px;
  color: #647084;
  font-size: 14px;
  font-weight: 850;
}

.course-system-pro .course-path-card .age {
  color: rgba(220, 232, 250, 0.76);
}

.course-path-card p {
  margin: 0 0 18px;
  color: #48566d;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 650;
}

.course-system-pro .course-path-card p {
  color: rgba(230, 239, 252, 0.82);
}

.course-path-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.course-path-card li {
  position: relative;
  padding-left: 18px;
  color: #263248;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 750;
}

.course-system-pro .course-path-card li {
  color: rgba(242, 247, 255, 0.88);
}

.course-path-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 7px;
  height: 7px;
  background: var(--accent);
}

.course-flow {
  max-width: 1260px;
  margin: 28px auto 0;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(248, 251, 255, 0.66)),
    linear-gradient(90deg, rgba(22, 103, 201, 0.08), rgba(33, 196, 164, 0.08), rgba(255, 138, 28, 0.08));
  color: #111827;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  gap: 14px;
  align-items: center;
  box-shadow: 0 30px 70px rgba(12, 27, 52, 0.14);
  position: relative;
  z-index: 2;
  overflow: hidden;
  backdrop-filter: blur(14px);
}

.course-system-pro .course-flow {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055)),
    linear-gradient(90deg, rgba(22, 103, 201, 0.08), rgba(33, 196, 164, 0.08), rgba(255, 138, 28, 0.12));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.3);
}

.course-flow b {
  --flow-color: #1667c9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.54)),
    color-mix(in srgb, var(--flow-color) 18%, transparent);
  color: #111827;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--flow-color) 24%, transparent);
  white-space: nowrap;
}

.course-system-pro .course-flow b {
  border-color: rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07)),
    color-mix(in srgb, var(--flow-color) 20%, transparent);
  color: #f7fbff;
}

.course-flow b:nth-of-type(1) {
  --flow-color: #1667c9;
}

.course-flow b:nth-of-type(2) {
  --flow-color: #21c4a4;
}

.course-flow b:nth-of-type(3) {
  --flow-color: #ff8a1c;
}

.course-flow b:nth-of-type(4) {
  --flow-color: #7e56ff;
}

.course-flow i {
  display: block;
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(22, 103, 201, 0.13);
  overflow: hidden;
}

.course-flow i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1667c9 0%, #21c4a4 28%, #ff8a1c 58%, #7e56ff 82%, #1667c9 100%);
  background-size: 220% 100%;
  animation: courseFlowLine 2.8s linear infinite;
}

.course-flow i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 10px;
  border-top: 3px solid #7e56ff;
  border-right: 3px solid #7e56ff;
  transform: translateY(-50%) rotate(45deg);
  background: transparent;
}

@keyframes courseFlowLine {
  from {
    background-position: 120% 0;
  }

  to {
    background-position: -120% 0;
  }
}

.science-classroom-pro {
  position: relative;
  padding: 104px min(6vw, 96px) 104px;
  background: #07111f;
  color: #fff;
  overflow: hidden;
}

.science-classroom-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(180deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 80px 80px,
    radial-gradient(circle at 82% 16%, rgba(55, 182, 255, 0.18), transparent 32%);
  pointer-events: none;
}

.science-pro-head {
  align-items: center;
  color: #fff;
}

.science-pro-head h2 {
  color: #fff;
}

.science-pro-head p {
  color: rgba(255, 255, 255, 0.74);
}

.science-pro-tag {
  position: relative;
  z-index: 1;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #a7d8ff;
  font-size: 14px;
  font-weight: 900;
}

.science-question-grid {
  position: relative;
  z-index: 1;
  max-width: 1260px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.science-question-card {
  min-height: 272px;
  padding: 22px 18px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.055);
  display: grid;
  align-content: start;
  gap: 14px;
}

.science-question-card em {
  color: #ffb36a;
  font-style: normal;
  font-size: 13px;
  font-weight: 950;
}

.science-question-card h3 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 950;
}

.science-question-card p {
  margin: 0;
  color: rgba(255,255,255,0.74);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 600;
}

.science-note {
  position: relative;
  z-index: 1;
  max-width: 1260px;
  margin: 24px auto 0;
  padding: 18px 22px;
  border-left: 4px solid #ff8a1c;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.82);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .studio-wheel-section {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .studio-wheel-stage {
    transform: none;
  }

  .value-pro-section {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .value-system-panel {
    transform: none;
  }

  .course-path-grid,
  .science-question-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-flow {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .course-flow i {
    height: 28px;
    width: 4px;
    margin: 0 auto;
  }

  .course-flow i::before {
    background: linear-gradient(180deg, #1667c9 0%, #21c4a4 28%, #ff8a1c 58%, #7e56ff 82%, #1667c9 100%);
    background-size: 100% 220%;
    animation-name: courseFlowLineVertical;
  }

  .course-flow i::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}

@keyframes courseFlowLineVertical {
  from {
    background-position: 0 120%;
  }

  to {
    background-position: 0 -120%;
  }
}

.studio-wheel-section {
  position: relative;
  min-height: 920px;
  padding: 112px min(6vw, 96px) 104px;
  background:
    linear-gradient(140deg, rgba(22, 103, 201, 0.08) 0 18%, transparent 18% 100%),
    linear-gradient(25deg, transparent 0 62%, rgba(255, 138, 28, 0.11) 62% 78%, transparent 78% 100%),
    linear-gradient(135deg, #f4f8ff 0%, #eaf2ff 54%, #fff7ee 100%);
  color: #111827;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(620px, 1.22fr);
  gap: min(5vw, 72px);
  align-items: center;
}

.studio-wheel-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, rgba(22, 103, 201, 0.08) 1px, transparent 1px) 0 0 / 140px 82px,
    linear-gradient(90deg, rgba(22, 103, 201, 0.035) 1px, transparent 1px) 0 0 / 92px 92px;
  pointer-events: none;
}

.studio-wheel-section::after {
  content: "";
  position: absolute;
  right: -10vw;
  top: 13%;
  width: 62vw;
  height: 70%;
  background:
    linear-gradient(135deg, rgba(22, 103, 201, 0.14), transparent 32%),
    linear-gradient(225deg, rgba(255, 138, 28, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.46);
  clip-path: polygon(7% 12%, 100% 0, 92% 88%, 40% 100%, 0 54%);
  pointer-events: none;
}

.studio-wheel-copy,
.studio-wheel-stage {
  position: relative;
  z-index: 2;
}

.studio-wheel-copy {
  width: 100%;
  justify-self: start;
  text-align: left;
}

.studio-wheel-copy span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: #1667c9;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.studio-wheel-copy span::before {
  content: "";
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1667c9, #21c4a4 42%, #ff8a1c 72%, #7e56ff);
}

.studio-wheel-copy h2 {
  max-width: none;
  margin: 0 0 22px;
  color: #101827;
  font-size: clamp(42px, 4.6vw, 66px);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: left;
}

.studio-wheel-copy h2::after {
  content: "";
  display: block;
  width: 180px;
  height: 8px;
  margin-top: 24px;
  margin-left: 0;
  background: linear-gradient(90deg, #ff6b1a, #ffb02e);
  box-shadow: 0 16px 34px rgba(255, 107, 26, 0.24);
}

.studio-wheel-copy p {
  max-width: 590px;
  margin: 0;
  color: #46556f;
  font-size: 19px;
  line-height: 1.9;
  font-weight: 700;
}

.studio-wheel-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 36px;
}

.studio-wheel-tags b {
  min-height: 78px;
  padding: 16px 14px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: #111827;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 950;
  box-shadow: 0 22px 54px rgba(22, 46, 86, 0.1);
  backdrop-filter: blur(14px);
}

.studio-wheel-tags b:nth-child(1) {
  border-bottom: 4px solid #1667c9;
}

.studio-wheel-tags b:nth-child(2) {
  border-bottom: 4px solid #21c4a4;
}

.studio-wheel-tags b:nth-child(3) {
  border-bottom: 4px solid #ff8a1c;
}

.studio-wheel-stage {
  width: min(660px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: perspective(1200px) rotateX(4deg) rotateY(-4deg);
}

.studio-wheel-stage::before,
.studio-wheel-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.studio-wheel-stage::before {
  inset: 2%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.16) 58%, transparent 60%);
  box-shadow: 0 42px 110px rgba(24, 58, 104, 0.16);
}

.studio-wheel-stage::after {
  inset: 30%;
  background: #dce7f9;
  box-shadow: inset 0 0 0 1px rgba(22, 103, 201, 0.08), 0 28px 70px rgba(30, 67, 112, 0.12);
}

.studio-wheel-svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 32px 48px rgba(30, 67, 112, 0.18));
}

.studio-wheel-slice {
  cursor: pointer;
  outline: none;
  transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.2, 0.85, 0.2, 1);
  transform-box: view-box;
  transform-origin: center;
}

.studio-wheel-slice path {
  fill: rgba(255, 255, 255, 0.94);
  stroke: #e8eefc;
  stroke-width: 7;
  transition: transform 0.32s cubic-bezier(0.2, 0.85, 0.2, 1), fill 0.28s, filter 0.28s, stroke 0.28s;
  transform-box: fill-box;
  transform-origin: center;
}

.studio-wheel-slice {
  --slice-color: #ff6b1a;
}

.studio-wheel-slice text {
  pointer-events: none;
  fill: #111827;
  font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif;
  font-weight: 950;
  transition: fill 0.28s;
}

.studio-wheel-slice .slice-title {
  font-size: 20px;
}

.studio-wheel-slice .slice-subtitle {
  font-size: 12px;
  font-weight: 850;
  fill: #6b7890;
}

.studio-wheel-slice .slice-icon-bg {
  fill: color-mix(in srgb, var(--slice-color) 12%, white);
  transition: fill 0.28s;
}

.slice-ui-icon {
  stroke: var(--slice-color);
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: stroke 0.28s;
}

.studio-wheel-slice:hover path,
.studio-wheel-slice:focus path,
.studio-wheel-slice.is-active path {
  fill: var(--slice-color);
  stroke: rgba(255, 255, 255, 0.98);
  filter:
    drop-shadow(0 26px 22px rgba(255, 107, 26, 0.3))
    drop-shadow(0 10px 12px rgba(31, 64, 112, 0.14));
  transform: scale(1.075);
}

.studio-wheel-slice:hover,
.studio-wheel-slice:focus,
.studio-wheel-slice.is-active {
  transform: translate(var(--active-x), var(--active-y));
}

.studio-wheel-svg:has(.studio-wheel-slice:hover) .studio-wheel-slice:not(:hover):not(.is-active) {
  opacity: 0.82;
}

.studio-wheel-slice:hover text,
.studio-wheel-slice:focus text,
.studio-wheel-slice.is-active text,
.studio-wheel-slice:hover .slice-subtitle,
.studio-wheel-slice:focus .slice-subtitle,
.studio-wheel-slice.is-active .slice-subtitle {
  fill: #fff;
}

.studio-wheel-slice:hover .slice-ui-icon,
.studio-wheel-slice:focus .slice-ui-icon,
.studio-wheel-slice.is-active .slice-ui-icon {
  stroke: #fff;
}

.studio-wheel-slice:hover .slice-icon-bg,
.studio-wheel-slice:focus .slice-icon-bg,
.studio-wheel-slice.is-active .slice-icon-bg {
  fill: rgba(255, 255, 255, 0.22);
}

.studio-wheel-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #e4ecfb;
  color: #253248;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(22, 103, 201, 0.08), 0 22px 58px rgba(30, 67, 112, 0.16);
}

.studio-wheel-center strong {
  font-size: 32px;
  line-height: 1.12;
  font-weight: 950;
}

.is-section-paused *,
.is-section-paused *::before,
.is-section-paused *::after {
  animation-play-state: paused !important;
}

.is-section-paused canvas,
.is-section-paused iframe,
.is-section-paused video {
  visibility: hidden !important;
}

.is-section-paused .about-wall-column,
.is-section-paused .hero-galaxy-canvas,
.is-section-paused .particleify-canvas {
  animation-play-state: paused !important;
  visibility: hidden !important;
}

@media (max-width: 720px) {
  .studio-wheel-section,
  .value-pro-section,
  .course-system-pro,
  .science-classroom-pro {
    padding: 86px 18px 76px;
  }

  .studio-wheel-copy h2 {
    font-size: 40px;
    white-space: normal;
  }

  .studio-wheel-copy p {
    font-size: 17px;
  }

  .studio-wheel-tags {
    grid-template-columns: 1fr;
  }

  .studio-wheel-stage {
    width: 100%;
    max-width: 390px;
    aspect-ratio: 1;
  }

  .studio-wheel-center {
    width: 138px;
    height: 138px;
  }

  .studio-wheel-center strong {
    font-size: 21px;
  }

  .studio-wheel-center span,
  .studio-wheel-center em {
    font-size: 11px;
  }

  .studio-wheel-slice .slice-title {
    font-size: 14px;
  }

  .studio-wheel-slice .slice-subtitle {
    font-size: 9px;
  }

  .slice-ui-icon {
    stroke-width: 2.8;
  }

  .value-pro-copy h2 {
    font-size: 40px;
  }

  .value-pro-copy p {
    font-size: 17px;
  }

  .value-pro-proof {
    grid-template-columns: 1fr;
  }

  .value-system-panel {
    min-height: auto;
    display: grid;
    gap: 14px;
    padding: 18px;
  }

  .value-system-panel::before,
  .value-system-panel::after {
    display: none;
  }

  .system-core,
  .system-node {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    min-height: auto;
    transform: none;
  }

  .system-core {
    height: auto;
    border-radius: 18px;
    padding: 24px;
  }

  .course-pro-head,
  .science-pro-head {
    grid-template-columns: 1fr;
  }

  .course-age-badge {
    width: 112px;
    height: 112px;
  }

  .course-path-grid,
  .science-question-grid {
    grid-template-columns: 1fr;
  }
}