/* 迪诺教育：材质、光影与轻量 3D 层次 */
.site-header {
  box-shadow: 0 8px 30px rgba(8, 31, 71, .06);
}

.brand-mark {
  background: linear-gradient(145deg, #3b85ed 0%, #2368d8 45%, #154aa8 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45),
              inset -5px -7px 14px rgba(4, 35, 90, .22),
              0 7px 14px rgba(35, 104, 216, .2);
}

.button {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2),
              0 8px 18px rgba(7, 26, 60, .14);
}

.button-warm {
  background: linear-gradient(180deg, #ff9b57 0%, #ff8130 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42),
              inset 0 -2px 0 rgba(170, 67, 0, .17),
              0 11px 24px rgba(255, 125, 40, .23);
}

.hero {
  perspective: 1400px;
  box-shadow: inset 0 -90px 130px rgba(3, 18, 48, .2);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 78% 33%, rgba(83, 157, 255, .22), transparent 30%),
              radial-gradient(circle at 48% 110%, rgba(85, 215, 223, .12), transparent 29%);
}

.hero-grid {
  opacity: .86;
}

.dino-shape {
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: inset 16px 12px 28px rgba(255, 255, 255, .14),
              inset -22px -28px 45px rgba(1, 31, 88, .35),
              0 22px 25px rgba(2, 21, 58, .26),
              0 55px 95px rgba(1, 18, 53, .36);
}

.dino-shape span {
  text-shadow: 1px 1px 0 #d9e8ff,
               3px 3px 0 rgba(11, 60, 144, .75),
               7px 9px 17px rgba(0, 22, 68, .36),
               -5px -6px 18px rgba(255, 255, 255, .16);
}

.visual-ring {
  box-shadow: inset 0 0 45px rgba(92, 167, 255, .045),
              0 0 50px rgba(71, 143, 241, .035);
}

.floating-card {
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 #fff,
              inset 0 -8px 18px rgba(34, 74, 129, .035),
              0 8px 14px rgba(2, 23, 64, .12),
              0 28px 60px rgba(2, 20, 58, .23);
}

.floating-card::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(35, 104, 216, .28), transparent);
}

.fc-three .progress {
  box-shadow: inset 0 1px 3px rgba(13, 43, 91, .18);
}

.fc-three .progress i {
  background: linear-gradient(90deg, #1855bd, #3984ef);
  box-shadow: 0 0 12px rgba(35, 104, 216, .35);
}

.program-card {
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75),
              0 14px 28px rgba(10, 39, 79, .07);
  transform-style: preserve-3d;
}

.program-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .38), transparent 38%, rgba(24, 56, 105, .035));
}

.program-card::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -18px;
  height: 24px;
  background: rgba(7, 26, 60, .18);
  filter: blur(18px);
  opacity: 0;
  transition: opacity .25s;
}

.program-card > * {
  position: relative;
  z-index: 1;
}

.program-art {
  transform: translateZ(18px);
}

.program-art i {
  box-shadow: inset -12px -16px 26px rgba(23, 55, 103, .06),
              inset 8px 8px 18px rgba(255, 255, 255, .72),
              0 18px 26px rgba(17, 49, 92, .09);
}

.method-screen {
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12),
              0 18px 22px rgba(10, 36, 78, .13),
              0 45px 85px rgba(10, 36, 78, .2);
  transform: perspective(1200px) rotateY(-1.5deg) rotateX(.7deg);
}

.screen-body {
  box-shadow: inset 0 1px 0 #fff;
}

.teacher-card,
.course-card,
.profile-card,
.case-card,
.news-feature {
  box-shadow: 0 12px 28px rgba(11, 39, 80, .07);
  transition: transform .3s cubic-bezier(.2, .75, .2, 1), box-shadow .3s;
}

.portrait-face,
.portrait-large {
  box-shadow: inset 10px 7px 18px rgba(255, 255, 255, .52),
              inset -14px -18px 28px rgba(30, 65, 115, .09),
              0 18px 28px rgba(30, 62, 107, .12);
}

.course-cover::after,
.profile-visual::after,
.case-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .38), transparent 38%, rgba(13, 47, 98, .08));
}

.case-top {
  position: relative;
  overflow: hidden;
}

.course-cover > span,
.course-cover > b,
.course-cover > i,
.profile-visual > span,
.profile-visual > div,
.case-top > * {
  z-index: 1;
}

.case-top > * {
  position: relative;
}

.course-cover > i {
  box-shadow: inset 8px 8px 16px rgba(255, 255, 255, .45),
              inset -11px -13px 22px rgba(16, 55, 109, .09),
              0 18px 30px rgba(22, 57, 109, .12);
}

.news-art,
.news-hero-art {
  box-shadow: inset 18px 16px 38px rgba(255, 255, 255, .08),
              inset -25px -28px 55px rgba(5, 35, 96, .21);
}

.welcome-screen {
  background: radial-gradient(circle at 50% 43%, #173b78 0%, #0b2554 34%, #071a3c 100%);
}

.welcome-inner {
  perspective: 900px;
}

.welcome-inner h1 {
  text-shadow: 1px 1px 0 #e8f1ff,
               3px 3px 0 #a9c7ef,
               6px 7px 0 rgba(39, 83, 151, .72),
               12px 15px 30px rgba(0, 13, 42, .55);
  transform-style: preserve-3d;
}

.welcome-inner > i {
  box-shadow: 0 4px 0 rgba(145, 56, 0, .45),
              0 12px 26px rgba(255, 139, 61, .3);
}

@media (min-width: 821px) {
  .hero-visual {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    transform-style: preserve-3d;
    transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform .28s ease-out;
  }

  .hero-visual .ring-one { transform: translateZ(-25px); }
  .hero-visual .ring-two { transform: translateZ(-5px); }
  .hero-visual .dino-shape { transform: translateZ(35px) rotate(6deg); }
  .hero-visual .fc-one { transform: translateZ(92px) rotateY(-7deg) rotateX(2deg); }
  .hero-visual .fc-two { transform: translateZ(76px) rotateY(7deg) rotateX(-2deg); }
  .hero-visual .fc-three { transform: translateZ(105px) rotateY(-4deg) rotateX(2deg); }
}

@media (hover: hover) {
  .program-card:hover {
    transform: perspective(900px) translateY(-10px) rotateX(2deg);
    box-shadow: 0 26px 50px rgba(10, 39, 79, .14);
  }

  .program-card:hover::after { opacity: 1; }

  .teacher-card:hover,
  .course-card:hover,
  .profile-card:hover,
  .case-card:hover,
  .news-feature:hover {
    transform: perspective(1000px) translateY(-7px) rotateX(1.2deg);
    box-shadow: 0 26px 50px rgba(10, 39, 79, .14);
  }
}

@media (max-width: 820px) {
  .method-screen { transform: none; }

  .program-card,
  .teacher-card,
  .course-card,
  .profile-card,
  .case-card,
  .news-feature {
    box-shadow: 0 10px 24px rgba(10, 39, 79, .08);
  }
}

/* 教师摄影头像 */
.portrait-face,
.portrait-large {
  overflow: hidden;
}

.portrait-face img,
.portrait-large img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.t-two .portrait-face img,
.pc-coral .portrait-large img {
  object-position: 50% 35%;
}

.t-three .portrait-face img,
.pc-purple .portrait-large img {
  object-position: 50% 18%;
}

.pc-indigo .portrait-large img {
  object-position: 50% 18%;
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual { transform: none !important; }
}

/* 意见箱、电话和在线咨询 */
.service-dock {
  position: fixed;
  right: 22px;
  bottom: 25px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}

.service-button {
  width: 98px;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(10, 39, 79, .12);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
              0 12px 28px rgba(7, 26, 60, .17);
  transition: transform .2s, box-shadow .2s;
}

.service-button:hover {
  transform: translateY(-3px) translateZ(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
              0 17px 34px rgba(7, 26, 60, .22);
}

.service-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.feedback-button {
  background: #fff;
  color: var(--navy);
}

.phone-button {
  background: linear-gradient(180deg, #367ce1, #1d5fc7);
  color: #fff;
  border-color: rgba(20, 75, 167, .5);
}

.consult-button {
  background: linear-gradient(180deg, #ff9b57, #ff8130);
  color: #14213d;
  border-color: rgba(202, 84, 5, .2);
}

.feedback-types {
  margin: 2px 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.feedback-types legend {
  width: 100%;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
}

.feedback-types label {
  position: relative;
  display: block;
}

.feedback-types input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feedback-types span {
  min-height: 38px;
  border: 1px solid #d8e0ea;
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 10px;
  cursor: pointer;
  transition: .2s;
}

.feedback-types input:checked + span {
  border-color: var(--blue);
  background: #edf4ff;
  color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

.feedback-types input:focus-visible + span {
  outline: 3px solid rgba(35, 104, 216, .18);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .service-dock {
    right: 14px;
    bottom: 15px;
    gap: 7px;
  }

  .service-button {
    width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 50%;
  }

  .service-button span { display: none; }
}

@media (max-width: 420px) {
  .feedback-types { grid-template-columns: 1fr; }
}

/* 首页简约品牌首屏 */
.page[data-page="home"] .hero {
  min-height: calc(100vh - 112px);
  background: #0b2554;
}

.page[data-page="home"] .hero::before {
  background: radial-gradient(circle at 50% 48%, rgba(47, 113, 219, .2), transparent 32%);
}

.page[data-page="home"] .hero-grid {
  opacity: .34;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
}

.page[data-page="home"] .hero-orb,
.page[data-page="home"] .hero-visual,
.page[data-page="home"] .hero-proof,
.page[data-page="home"] .trust-strip {
  display: none;
}

.page[data-page="home"] .hero-layout {
  min-height: calc(100vh - 112px);
  grid-template-columns: 1fr;
  place-items: center;
  padding-top: 70px;
  padding-bottom: 80px;
}

.page[data-page="home"] .hero-copy {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.page[data-page="home"] .hero-copy .eyebrow {
  justify-content: center;
  margin-bottom: 27px;
  color: #8fc3ff;
  letter-spacing: .28em;
}

.page[data-page="home"] .hero-copy .eyebrow > span {
  display: none;
}

.page[data-page="home"] .hero-copy h1 {
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: clamp(70px, 8.5vw, 116px);
  line-height: 1;
  letter-spacing: -.07em;
  text-shadow: 1px 1px 0 #e8f1ff,
               3px 3px 0 rgba(127, 172, 229, .7),
               8px 10px 25px rgba(0, 17, 53, .38);
}

.page[data-page="home"] .hero-copy > .hero-slogan {
  margin: 31px 0 13px;
  max-width: none;
  color: #fff;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.5;
}

.page[data-page="home"] .hero-copy > .hero-description {
  max-width: 680px;
  margin: 0 auto 34px;
  color: #aebed8;
  font-size: 14px;
  line-height: 1.9;
}

.page[data-page="home"] .hero-actions {
  justify-content: center;
}

.service-dock {
  bottom: 140px;
}

@media (max-width: 820px) {
  .page[data-page="home"] .hero,
  .page[data-page="home"] .hero-layout {
    min-height: calc(100vh - 68px);
  }

  .page[data-page="home"] .hero-layout {
    padding-top: 55px;
    padding-bottom: 65px;
  }

  .page[data-page="home"] .hero-copy h1 {
    font-size: clamp(54px, 16vw, 76px);
  }

  .page[data-page="home"] .hero-copy > .hero-slogan {
    margin-top: 25px;
    font-size: 18px;
  }

  .page[data-page="home"] .hero-copy > .hero-description {
    max-width: 520px;
    font-size: 13px;
  }

  .page[data-page="home"] .hero-actions {
    width: min(360px, 100%);
    margin: 0 auto;
  }

  .service-dock {
    bottom: 88px;
  }
}