:root {
  --cartoon-navy: #07385c;
  --cartoon-cyan: #16bdc7;
  --cartoon-blue: #3187ef;
  --cartoon-orange: #ff9823;
  --cartoon-cream: #fff8df;
  --cartoon-sky: #eafaff;
  --cartoon-sprite: url("../img/course-cartoon-ip-reference.png");
}

.course-sales .course-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 7% 18%, rgba(255, 213, 90, .22) 0 7%, transparent 18%),
    radial-gradient(circle at 92% 9%, rgba(44, 208, 221, .19) 0 8%, transparent 24%),
    linear-gradient(135deg, #fffef7 0%, #f3fdff 46%, #e7f8ff 100%);
}

.course-sales .course-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .34;
  background-image:
    linear-gradient(rgba(19, 116, 147, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 116, 147, .07) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, transparent, #000 44%, #000 100%);
  content: "";
}

.course-hero-video {
  position: relative;
  padding: 28px;
  border-radius: 40px;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(218,247,252,.72));
  box-shadow: 0 28px 68px rgba(12, 71, 102, .17);
}

.course-hero-video::before {
  position: absolute;
  z-index: 8;
  top: -10px;
  left: -32px;
  max-width: 210px;
  padding: 13px 18px;
  border: 2px solid #b9dce8;
  border-radius: 22px 22px 22px 6px;
  color: var(--cartoon-navy);
  background: #fff;
  box-shadow: 0 12px 28px rgba(13, 67, 96, .13);
  content: "从任务到成品，一整套带回去！";
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
  transform: rotate(-3deg);
}

.course-video-frame-hero {
  overflow: visible;
  border: 8px solid #fff;
  border-radius: 30px;
  box-shadow: 0 22px 50px rgba(8, 58, 88, .21);
}

.sales-v2-stats {
  background: linear-gradient(180deg, #fff, #f8fdff);
}

.sales-v2-stats .course-trust-item {
  position: relative;
  overflow: hidden;
}

.sales-v2-stats .course-trust-item::before {
  display: grid;
  width: 36px;
  height: 36px;
  margin: 0 auto 7px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--cartoon-cyan), var(--cartoon-blue));
  box-shadow: 0 8px 18px rgba(22, 189, 199, .22);
  content: "✦";
  font-size: 17px;
}

.sales-v2-stats .course-trust-item:nth-child(2)::before { content: "▶"; }
.sales-v2-stats .course-trust-item:nth-child(3)::before { content: "⚡"; }
.sales-v2-stats .course-trust-item:nth-child(4)::before { content: "↻"; }

.sales-v2-overview {
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 207, 73, .14), transparent 23%),
    radial-gradient(circle at 90% 28%, rgba(45, 198, 210, .15), transparent 26%),
    linear-gradient(180deg, #f6fdff 0%, #fff 100%);
}

.sales-v2-quick-grid > div {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(37, 190, 201, .13);
  background: linear-gradient(145deg, #fff, #f2fcff);
  box-shadow: 0 14px 30px rgba(17, 78, 106, .09);
  transform: translateZ(0);
}

.sales-v2-quick-grid > div::after {
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(35, 198, 208, .1);
  content: "";
}

.sales-v2-showcase {
  background:
    radial-gradient(circle at 0 8%, rgba(39, 199, 210, .11), transparent 18%),
    radial-gradient(circle at 100% 62%, rgba(255, 188, 67, .11), transparent 18%),
    linear-gradient(180deg, #fff 0%, #f8fdff 54%, #fff 100%);
}

.sales-v2-card {
  position: relative;
  min-height: 460px;
  border: 3px solid rgba(255, 255, 255, .92);
  border-radius: 36px;
  background: linear-gradient(135deg, #fff 0%, #fbfeff 100%);
  box-shadow:
    0 24px 60px rgba(15, 72, 103, .15),
    0 0 0 1px rgba(40, 168, 190, .13);
}

.sales-v2-card::before {
  position: absolute;
  z-index: 8;
  top: 20px;
  right: 22px;
  width: 52px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cartoon-cyan), var(--cartoon-blue), var(--cartoon-orange));
  box-shadow: 0 5px 14px rgba(32, 167, 191, .2);
  content: "";
}

.sales-v2-copy {
  position: relative;
  z-index: 4;
  padding: 50px 50px 48px 54px;
}

.sales-v2-number {
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 9px 20px rgba(21, 174, 186, .19);
}

.sales-v2-copy h3 {
  text-shadow: 0 2px 0 rgba(255,255,255,.8);
}

.sales-v2-copy li {
  border: 1px solid rgba(24, 185, 195, .15);
  background: linear-gradient(135deg, #effbfb, #f5fbff);
  box-shadow: 0 6px 14px rgba(24, 111, 133, .06);
}

.sales-v2-result {
  position: relative;
  overflow: hidden;
  border-width: 2px;
  background: linear-gradient(135deg, #e7fbf8, #eef7ff);
  box-shadow: 0 10px 22px rgba(17, 131, 149, .1);
}

.sales-v2-result::after {
  position: absolute;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.46);
  content: "";
}

.sales-v2-visual {
  min-height: 460px;
  border: 14px solid #f7fdff;
  border-radius: 34px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 194, 56, .24), transparent 22%),
    radial-gradient(circle at 16% 82%, rgba(31, 195, 208, .2), transparent 28%),
    linear-gradient(145deg, #e5faff, #f9fcff 56%, #fff7e7);
}

.sales-v2-card:nth-of-type(2n) .sales-v2-visual {
  background:
    radial-gradient(circle at 16% 18%, rgba(63, 145, 242, .2), transparent 24%),
    radial-gradient(circle at 86% 86%, rgba(255, 184, 56, .2), transparent 25%),
    linear-gradient(145deg, #f8fdff, #e9f8ff 54%, #fff8e7);
}

.sales-v2-showcase .sales-v2-card .sales-v2-visual::before {
  position: absolute;
  z-index: 5;
  top: 22px;
  right: 20px;
  bottom: auto;
  left: auto;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(23, 191, 201, .95), rgba(56, 125, 237, .95));
  box-shadow: 0 12px 24px rgba(23, 129, 165, .22);
  content: "AI";
  color: #fff;
  font-size: 17px;
  font-weight: 1000;
  line-height: 54px;
  text-align: center;
}

.sales-v2-showcase .sales-v2-card .sales-v2-visual::after {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: -4px;
  left: auto;
  width: 205px;
  height: 235px;
  border: 0;
  border-radius: 100px 100px 26px 26px;
  background-color: transparent;
  background-image: var(--cartoon-sprite);
  background-repeat: no-repeat;
  background-size: 876px 1795px;
  filter: drop-shadow(0 16px 19px rgba(11, 65, 95, .18));
  content: "";
  pointer-events: none;
  mask-image: radial-gradient(ellipse 78% 86% at 52% 50%, #000 58%, transparent 80%);
}

.sales-v2-card:nth-of-type(2n) .sales-v2-visual::after {
  right: auto;
  left: 0;
}

.sales-v2-card:nth-of-type(1) .sales-v2-visual::after,
.sales-v2-card:nth-of-type(6) .sales-v2-visual::after,
.sales-v2-card:nth-of-type(11) .sales-v2-visual::after { background-position: -660px -215px; }
.sales-v2-card:nth-of-type(2) .sales-v2-visual::after,
.sales-v2-card:nth-of-type(7) .sales-v2-visual::after,
.sales-v2-card:nth-of-type(12) .sales-v2-visual::after { background-position: -6px -500px; }
.sales-v2-card:nth-of-type(3) .sales-v2-visual::after,
.sales-v2-card:nth-of-type(8) .sales-v2-visual::after { background-position: -660px -710px; }
.sales-v2-card:nth-of-type(4) .sales-v2-visual::after,
.sales-v2-card:nth-of-type(9) .sales-v2-visual::after { background-position: -6px -1035px; }
.sales-v2-card:nth-of-type(5) .sales-v2-visual::after,
.sales-v2-card:nth-of-type(10) .sales-v2-visual::after { background-position: -670px -1305px; }

/* Final P0 polish: cards 05 and 09 use a taller, bottom-anchored half-body crop. */
.sales-v2-card:nth-of-type(5) .sales-v2-visual::after {
  right: -6px;
  bottom: 0;
  width: 300px;
  height: 315px;
  background-image: url("../img/codex-value-v1-cover.png");
  background-position: -340px 40px;
  background-size: 640px 360px;
  border-radius: 0 28px 28px 0;
  mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
  transform: none;
}

.sales-v2-card:nth-of-type(9) .sales-v2-visual::after {
  right: -6px;
  bottom: 0;
  width: 300px;
  height: 315px;
  background-image: url("../img/codex-value-v1-cover.png");
  background-position: -340px 40px;
  background-size: 640px 360px;
  border-radius: 0 28px 28px 0;
  mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
  transform: none;
}

.sales-v2-card:nth-of-type(5) .sales-v2-insights.is-wide { width: 67%; }
.sales-v2-card:nth-of-type(9) .sales-v2-platforms { padding-right: 210px; }

.sales-v2-card:nth-of-type(5) .sales-v2-visual,
.sales-v2-card:nth-of-type(9) .sales-v2-visual {
  background:
    linear-gradient(90deg, transparent 0%, rgba(10, 47, 78, .86) 32%, #082842 100%) right bottom / 330px 315px no-repeat,
    radial-gradient(circle at 16% 82%, rgba(31, 195, 208, .2), transparent 28%),
    linear-gradient(145deg, #e5faff, #f9fcff 56%, #fff7e7);
}

.sales-v2-card:nth-of-type(5) .sales-v2-visual > small,
.sales-v2-card:nth-of-type(9) .sales-v2-visual > small {
  top: 18px;
  right: 24px;
}

.sales-v2-visual > small,
.sales-v2-visual figcaption {
  z-index: 9;
  right: 18px;
  bottom: auto;
  top: 22px;
  max-width: 230px;
  padding: 12px 16px;
  border: 2px solid #b8dce8;
  border-radius: 20px 20px 20px 7px;
  color: #0b4f72;
  background: #fff;
  box-shadow: 0 12px 26px rgba(15, 79, 109, .13);
  font-size: 13px;
  transform: rotate(2deg);
}

.sales-v2-card:nth-of-type(2n) .sales-v2-visual > small,
.sales-v2-card:nth-of-type(2n) .sales-v2-visual figcaption {
  right: auto;
  left: 18px;
  border-radius: 20px 20px 7px 20px;
  transform: rotate(-2deg);
}

.sales-v2-visual > :not(small):not(figcaption) {
  transform: translateX(-42px);
}

.sales-v2-card:nth-of-type(2n) .sales-v2-visual > :not(small):not(figcaption) {
  transform: translateX(42px);
}

.sales-v2-proof img {
  opacity: .72;
  filter: saturate(.9) contrast(.96) brightness(1.07);
}

.sales-v2-proof::before {
  z-index: 2;
  inset: 0;
  background: linear-gradient(90deg, rgba(235, 250, 254, .92), rgba(242,250,255,.2) 42%, rgba(255,247,230,.18));
}

.sales-v2-screen,
.sales-v2-sheet,
.sales-v2-insights,
.sales-v2-topic,
.sales-v2-phone,
.sales-v2-platforms > span,
.sales-v2-knowledge > span,
.sales-v2-knowledge > b {
  box-shadow: 0 18px 38px rgba(14, 75, 105, .16), 0 0 0 2px rgba(255,255,255,.86);
}

.sales-v2-screen { width: 62%; }
.sales-v2-insights.is-wide { width: 72%; }
.sales-v2-skill img { max-width: 55%; }
.sales-v2-platforms { padding-right: 170px; }
.sales-v2-card:nth-of-type(2n) .sales-v2-platforms { padding-right: 38px; padding-left: 170px; }

.sales-v2-app {
  gap: 18px;
}

.cartoon-command,
.cartoon-phone {
  position: relative;
  z-index: 3;
  background: #fff;
  box-shadow: 0 18px 40px rgba(14, 73, 104, .16), 0 0 0 2px rgba(255,255,255,.86);
}

.cartoon-command {
  display: grid;
  width: 36%;
  gap: 9px;
  padding: 20px;
  border-radius: 22px;
}

.cartoon-command span {
  color: var(--cartoon-cyan);
  font-size: 13px;
  font-weight: 900;
}

.cartoon-command b {
  color: var(--cartoon-navy);
  font-size: 17px;
  line-height: 1.45;
}

.cartoon-phone {
  display: grid;
  width: 34%;
  min-height: 285px;
  align-content: center;
  gap: 9px;
  padding: 24px;
  border: 8px solid #123b61;
  border-radius: 38px;
  color: var(--cartoon-navy);
}

.cartoon-phone small,
.cartoon-phone strong,
.cartoon-phone b { display: block; }
.cartoon-phone strong { font-size: 27px; }
.cartoon-phone i { height: 12px; border-radius: 999px; background: #dceef5; }
.cartoon-phone b { margin-top: 10px; padding: 8px; border-radius: 10px; color:#fff; background:var(--cartoon-cyan); text-align:center; }

.sales-v2-cta {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  padding: 30px 34px 30px 242px;
  border: 5px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background: linear-gradient(110deg, #0a9daa, #24ccd0 53%, #29b9dd);
  box-shadow: 0 22px 48px rgba(21, 171, 185, .26), inset 0 2px 0 rgba(255,255,255,.35);
}

.sales-v2-cta::before {
  position: absolute;
  z-index: 2;
  bottom: -18px;
  left: 4px;
  width: 205px;
  height: 220px;
  border-radius: 100px;
  background-image: var(--cartoon-sprite);
  background-position: -660px -1305px;
  background-repeat: no-repeat;
  background-size: 876px 1795px;
  filter: drop-shadow(0 10px 14px rgba(2,62,81,.18));
  content: "";
  mask-image: radial-gradient(ellipse 82% 88% at 55% 48%, #000 58%, transparent 82%);
}

.sales-v2-cta::after {
  position: absolute;
  top: 14px;
  left: 152px;
  color: #fff7b8;
  content: "✦";
  font-size: 28px;
  animation: cartoon-spark 2.2s ease-in-out infinite;
}

.sales-v2-cta strong {
  font-size: 29px;
  line-height: 1.25;
}

.sales-v2-cta button {
  border: 3px solid rgba(255,255,255,.72);
  background: linear-gradient(135deg, #ffb02b, #ff841f);
  box-shadow: 0 15px 30px rgba(175, 76, 7, .3), inset 0 2px 0 rgba(255,255,255,.4);
}

.cartoon-capability-map {
  position: relative;
  overflow: hidden;
  padding: 86px 0 92px;
  background:
    radial-gradient(circle at 4% 14%, rgba(255, 199, 59, .18), transparent 20%),
    radial-gradient(circle at 92% 80%, rgba(35, 194, 207, .17), transparent 22%),
    linear-gradient(180deg, #f5fdff, #eaf9ff);
}

.cartoon-capability-map::after {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 205px;
  height: 235px;
  background-image: var(--cartoon-sprite);
  background-position: -660px -215px;
  background-repeat: no-repeat;
  background-size: 876px 1795px;
  filter: drop-shadow(0 15px 20px rgba(9,65,92,.15));
  mask-image: radial-gradient(ellipse 80% 88% at 55% 50%, #000 58%, transparent 82%);
  content: "";
}

.cartoon-capability-note {
  position: absolute;
  top: 34px;
  right: calc((100% - 1120px)/2 + 20px);
  color: #0b6a85;
  font-size: 17px;
  font-weight: 900;
  transform: rotate(-3deg);
}

.cartoon-capability-note span {
  display: inline-block;
  margin-left: 8px;
  color: var(--cartoon-cyan);
  font-size: 28px;
}

.cartoon-capability-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.cartoon-capability-grid > div {
  display: grid;
  min-height: 154px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 18px 10px;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 25px;
  background: linear-gradient(145deg, #fff, #f7fcff);
  box-shadow: 0 16px 34px rgba(14, 78, 106, .11), 0 0 0 1px rgba(30,180,194,.12);
  text-align: center;
}

.cartoon-capability-grid i {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--cartoon-cyan), var(--cartoon-blue));
  box-shadow: 0 10px 21px rgba(25, 150, 181, .2);
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}

.cartoon-capability-grid > div:nth-child(4n+2) i { background: linear-gradient(135deg, #6e5bed, #3a8bf0); }
.cartoon-capability-grid > div:nth-child(4n+3) i { background: linear-gradient(135deg, #ff9e2b, #ff7e37); }
.cartoon-capability-grid > div:nth-child(4n+4) i { background: linear-gradient(135deg, #15b98a, #19c5c4); }
.cartoon-capability-grid strong { color:var(--cartoon-navy); font-size:15px; }
.cartoon-capability-grid span { color:#7890a0; font-size:11px; }

@keyframes cartoon-spark {
  0%,100% { transform: rotate(-10deg) scale(.9); opacity:.7; }
  50% { transform: rotate(8deg) scale(1.15); opacity:1; }
}

@media (max-width: 900px) {
  .cartoon-capability-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .cartoon-capability-note { right:30px; }
}

@media (max-width: 640px) {
  .course-hero-video { margin-top: 28px; padding: 8px; border-radius: 26px; }
  .course-hero-video::before { display:none; }
  .course-video-frame-hero { border-width:4px; border-radius:22px; }
  .sales-v2-stats .course-trust-item::before { width:31px; height:31px; margin-bottom:5px; border-radius:10px; font-size:14px; }
  .sales-v2-card { border-radius:27px; }
  .sales-v2-visual { min-height:350px; border-width:8px; border-radius:24px; }
  .sales-v2-showcase .sales-v2-card .sales-v2-visual::after { width:148px; height:175px; right:-10px; background-size:657px 1346px; }
  .sales-v2-card:nth-of-type(2n) .sales-v2-visual::after { right:auto; left:-10px; }
  .sales-v2-card:nth-of-type(1) .sales-v2-visual::after,
  .sales-v2-card:nth-of-type(6) .sales-v2-visual::after,
  .sales-v2-card:nth-of-type(11) .sales-v2-visual::after { background-position: -495px -161px; }
  .sales-v2-card:nth-of-type(2) .sales-v2-visual::after,
  .sales-v2-card:nth-of-type(7) .sales-v2-visual::after,
  .sales-v2-card:nth-of-type(12) .sales-v2-visual::after { background-position: -5px -375px; }
  .sales-v2-card:nth-of-type(3) .sales-v2-visual::after,
  .sales-v2-card:nth-of-type(8) .sales-v2-visual::after { background-position: -495px -532px; }
  .sales-v2-card:nth-of-type(4) .sales-v2-visual::after,
  .sales-v2-card:nth-of-type(9) .sales-v2-visual::after { background-position: -5px -776px; }
  .sales-v2-card:nth-of-type(5) .sales-v2-visual::after,
  .sales-v2-card:nth-of-type(10) .sales-v2-visual::after { background-position: -503px -979px; }
  .sales-v2-card:nth-of-type(5) .sales-v2-visual::after {
    right: -8px;
    bottom: 0;
    width: 210px;
    height: 235px;
    background-position: -272px 26px;
    background-size: 512px 288px;
    transform: none;
  }
  .sales-v2-card:nth-of-type(9) .sales-v2-visual::after {
    right: -8px;
    bottom: 0;
    width: 210px;
    height: 235px;
    background-position: -272px 26px;
    background-size: 512px 288px;
    transform: none;
  }
  .sales-v2-card:nth-of-type(5) .sales-v2-insights.is-wide { width: 72%; }
  .sales-v2-card:nth-of-type(9) .sales-v2-platforms { padding-right: 118px; padding-left: 20px; }
  .sales-v2-card:nth-of-type(5) .sales-v2-visual,
  .sales-v2-card:nth-of-type(9) .sales-v2-visual {
    background:
      linear-gradient(90deg, transparent 0%, rgba(10, 47, 78, .86) 32%, #082842 100%) right bottom / 220px 235px no-repeat,
      radial-gradient(circle at 16% 82%, rgba(31, 195, 208, .2), transparent 28%),
      linear-gradient(145deg, #e5faff, #f9fcff 56%, #fff7e7);
  }
  .sales-v2-card:nth-of-type(5) .sales-v2-visual > small,
  .sales-v2-card:nth-of-type(9) .sales-v2-visual > small {
    top: 12px;
    right: 12px;
  }
  .sales-v2-visual > small,
  .sales-v2-visual figcaption { top:14px; right:12px; max-width:170px; padding:9px 12px; font-size:11px; }
  .sales-v2-card:nth-of-type(2n) .sales-v2-visual > small,
  .sales-v2-card:nth-of-type(2n) .sales-v2-visual figcaption { right:auto; left:12px; }
  .sales-v2-visual > :not(small):not(figcaption) { transform:translateX(-26px) scale(.9); }
  .sales-v2-card:nth-of-type(2n) .sales-v2-visual > :not(small):not(figcaption) { transform:translateX(26px) scale(.9); }
  .sales-v2-screen { width:82%; }
  .sales-v2-insights.is-wide { width:92%; }
  .sales-v2-platforms,
  .sales-v2-card:nth-of-type(2n) .sales-v2-platforms { padding-right:105px; padding-left:24px; }
  .sales-v2-card:nth-of-type(2n) .sales-v2-platforms { padding-right:24px; padding-left:105px; }
  .cartoon-command { width:43%; padding:13px; }
  .cartoon-command b { font-size:14px; }
  .cartoon-phone { width:42%; min-height:240px; padding:16px; }
  .sales-v2-cta { min-height:0; padding:25px 18px 25px 105px; border-width:3px; border-radius:28px; text-align:left; }
  .sales-v2-cta::before { left:-14px; bottom:-8px; width:132px; height:150px; background-position:-503px -979px; background-size:657px 1346px; }
  .sales-v2-cta::after { left:80px; }
  .sales-v2-cta strong { font-size:20px; }
  .sales-v2-cta span { font-size:11px; }
  .sales-v2-cta button { margin-left:-67px; width:calc(100% + 67px); }
  .cartoon-capability-map { padding:70px 0; }
  .cartoon-capability-map::after { display:none; }
  .cartoon-capability-note { position:static; margin:0 18px 24px; text-align:right; font-size:14px; }
  .cartoon-capability-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .cartoon-capability-grid > div { min-height:132px; border-radius:21px; }
  .cartoon-capability-grid > div:last-child { grid-column:1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .sales-v2-cta::after { animation:none; }
}