/*
  Pi-Lead academic blue-gold presentation skin.
  Scope: visual presentation only. No page behavior or API endpoints are changed.

  Rollback:
  remove this line from index.html:
  <link rel="stylesheet" href="skins/pilead-reference-blue.css">
*/

:root {
  --primary: #163A70;
  --primary-light: #235A9F;
  --primary-dark: #102B55;
  --accent: #D4A437;
  --accent-deep: #A97C18;
  --deep: #10233F;
  --text: #1F2937;
  --muted: #667085;
  --bg: #F7F9FC;
  --section-bg: #EEF3F8;
  --card: #FFFFFF;
  --border: #DDE5EF;
  --button-bg: #163A70;
  --button-hover: #102B55;
  --math-color: #D4A437;
  --math-bg: #FFF7DF;
  --thinking-color: #235A9F;
  --thinking-bg: #EAF2FA;
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(212,164,55,.10), transparent 24rem),
    radial-gradient(circle at 88% 18%, rgba(22,58,112,.08), transparent 30rem),
    linear-gradient(180deg, #F7F9FC 0%, #FFFFFF 38%, #F7F9FC 100%);
}

nav {
  height: 76px;
  padding: 0 6.4%;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid #DDE5EF;
  box-shadow: 0 8px 24px rgba(15,23,42,.04);
  z-index: 160;
}

.nav-logo img {
  height: 48px;
}

.nav-logo .brand {
  color: #102B55;
  letter-spacing: -.02em;
}

.nav-logo .brand small {
  color: #A97C18;
}

.nav-links {
  gap: 2.45rem;
}

.nav-links a {
  position: relative;
  color: #10233F;
  font-size: 1.08rem;
  font-weight: 800;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.72rem;
  height: 2px;
  background: transparent;
}

.nav-links li:first-child a::after,
.nav-links a:hover::after {
  background: #D4A437;
}

.hamburger {
  position: relative;
  z-index: 170;
  padding: .45rem;
}

.mobile-menu {
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  z-index: 150;
  border-bottom: 1px solid #DDE5EF;
  box-shadow: 0 18px 34px rgba(15,23,42,.14);
}

.user-chip {
  background: #F5F0E4 !important;
  color: #102B55 !important;
}

.lang-btn {
  background: #F7F9FC;
}

.btn {
  border-radius: 6px;
}

.btn-primary {
  background: linear-gradient(180deg, #1C477F 0%, #163A70 100%);
  box-shadow: 0 10px 22px rgba(22,58,112,.24);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #163A70 0%, #102B55 100%);
}

.btn-outline {
  background: #FFFFFF;
  border-color: #D4A437;
  color: #163A70;
}

.marquee {
  background: #F7F9FC;
}

.hero {
  min-height: 500px;
  padding: 3.85rem 6.8% 6.7rem;
  align-items: flex-start;
  background:
    linear-gradient(90deg, rgba(247,249,252,.98) 0%, rgba(238,243,248,.94) 42%, rgba(229,236,245,.56) 100%),
    radial-gradient(circle at 78% 48%, rgba(212,164,55,.14), transparent 17rem),
    radial-gradient(circle at 82% 60%, rgba(22,58,112,.10), transparent 19rem);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 68%;
  background:
    linear-gradient(90deg, rgba(247,249,252,1) 0%, rgba(247,249,252,.36) 24%, rgba(247,249,252,0) 48%),
    url("../assets/hero-boy.png") center right / cover no-repeat;
  opacity: .98;
  filter: saturate(.98) contrast(1.02);
  z-index: 0;
}

.hero::after {
  content: "π";
  position: absolute;
  left: 54%;
  top: 9%;
  font-size: clamp(3.2rem, 7vw, 6rem);
  font-weight: 900;
  color: rgba(212,164,55,.20);
  pointer-events: none;
  z-index: 1;
}

.hero-pi-bg {
  color: rgba(22,58,112,.07);
  opacity: .8;
}

.hero-content {
  max-width: 600px;
}

.hero-badge {
  background: rgba(212,164,55,.13);
  color: #7C5A10;
  border: 1px solid rgba(212,164,55,.35);
}

.hero h1 {
  color: #102B55;
  font-size: clamp(2.45rem, 4.8vw, 4.15rem);
  letter-spacing: -.03em;
}

.hero h1 em {
  color: #B8871B;
}

.hero p {
  max-width: 610px;
  color: #29364A;
  font-size: 1.1rem;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1rem 0 .2rem;
  max-width: 620px;
}

.hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .42rem .72rem;
  border: 1px solid rgba(212,164,55,.32);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #102B55;
  font-size: .86rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(16,43,85,.06);
}

html[lang="en"] .hero {
  min-height: 500px;
  padding-top: 3.85rem;
  padding-bottom: 6.7rem;
}

html[lang="en"] .hero-content {
  max-width: 720px;
}

html[lang="en"] .hero h1 {
  max-width: 720px;
  font-size: clamp(2.32rem, 4.05vw, 3.7rem);
  line-height: 1.04;
}

html[lang="en"] .hero p {
  max-width: 660px;
  font-size: 1.02rem;
  line-height: 1.55;
}

html[lang="en"] .hero-points {
  max-width: 700px;
}

.hero-cta {
  margin-top: 1.2rem;
}

.hero-cta .btn {
  min-width: 168px;
  border-radius: 6px;
}

.float-cards {
  left: 7%;
  right: auto;
  top: auto;
  bottom: 1.4rem;
  transform: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(128px, 1fr));
  width: min(520px, 86vw);
  gap: 0;
  background: #FFFFFF;
  border: 1px solid #DDE5EF;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(16,43,85,.12);
  overflow: hidden;
}

.float-card {
  animation: none;
  border-radius: 0;
  box-shadow: none;
  padding: 1.05rem 1.15rem;
  justify-content: center;
}

.float-card + .float-card {
  border-left: 1px solid #DDE5EF;
}

.float-icon {
  width: 36px;
  height: 36px;
  color: transparent;
  font-size: 0;
  background: center / contain no-repeat;
}

.float-card:nth-child(1) .float-icon {
  background-image: url("../assets/icons/students.png");
}

.float-card:nth-child(2) .float-icon {
  background-image: url("../assets/icons/bank.png");
}

.float-card:nth-child(3) .float-icon {
  background-image: url("../assets/icons/satisfaction.png");
}

.float-value {
  color: #163A70;
}

.float-label {
  color: #667085;
}

section {
  padding: 3.2rem 6.8%;
}

.features,
.courses,
.contact,
.how {
  background: transparent;
}

.features {
  position: relative;
  overflow: hidden;
}

.features::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(248,250,252,.78), rgba(255,255,255,.9)),
    url("../logo.jpg") 10% 20% / 170px auto repeat;
  opacity: .28;
  filter: grayscale(.08) saturate(.78);
  pointer-events: none;
  z-index: 0;
}

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

.features .section-tag,
.features .section-title,
.courses .section-tag,
.courses .section-title,
.contact .section-tag,
.contact .section-title {
  text-align: center;
}

.features .section-tag,
.courses .section-tag,
.contact .section-tag {
  color: #A97C18;
}

.section-title {
  color: #102B55;
}

.section-sub {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.features-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.35rem;
}

.feature-card {
  text-align: center;
  min-height: 210px;
  padding: 1.55rem 1.35rem 1.45rem;
  border: 1px solid #DDE5EF;
  border-top: 0;
  box-shadow: 0 14px 32px rgba(16,43,85,.08);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  margin: 0 auto 1.05rem;
  border-radius: 50%;
  background: #F5F0E4;
  box-shadow: inset 0 0 0 8px #E8DDBE;
  color: transparent;
  font-size: 0;
}

.feature-icon::before,
.course-icon::before {
  content: "";
  display: block;
  width: 76%;
  height: 76%;
  background: center / contain no-repeat;
}

.feature-card:nth-child(1) .feature-icon::before {
  background-image: url("../assets/icons/curriculum.png");
}

.feature-card:nth-child(2) .feature-icon::before {
  background-image: url("../assets/icons/trend.png");
}

.feature-card:nth-child(3) .feature-icon::before {
  background-image: url("../assets/icons/training.png");
}

.feature-card:nth-child(4) .feature-icon::before {
  background-image: url("../assets/icons/method.png");
}

.feature-title {
  color: #102B55;
  font-size: 1.2rem;
  line-height: 1.28;
  margin-bottom: .55rem;
}

.feature-desc {
  font-size: 1.03rem;
  line-height: 1.68;
}

.bg-classroom > .bg-img {
  opacity: .045;
  filter: grayscale(.2) saturate(.85);
}

.bg-classroom > .bg-veil {
  background: linear-gradient(180deg, rgba(247,249,252,.93), rgba(255,255,255,.92));
}

.courses-grid {
  max-width: 1120px;
  gap: 1rem;
}

.course-card {
  min-height: 292px;
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(16,43,85,.07);
}

.course-card:first-child {
  background:
    radial-gradient(circle at 82% 38%, rgba(212,164,55,.22), transparent 9rem),
    linear-gradient(135deg, #FFFFFF 0%, #FFF7DF 100%);
}

.course-card:nth-child(2) {
  background:
    radial-gradient(circle at 82% 38%, rgba(35,90,159,.16), transparent 9rem),
    linear-gradient(135deg, #FFFFFF 0%, #EAF2FA 100%);
}

.course-title {
  color: #102B55;
  font-size: 1.45rem;
}

.course-card:nth-child(2) .course-title {
  color: #163A70;
}

.course-summary {
  padding: 0 1.6rem .95rem;
  display: grid;
  gap: .46rem;
}

.course-summary p {
  margin: 0;
  color: #536173;
  font-size: .92rem;
  line-height: 1.48;
}

.course-summary strong {
  color: #102B55;
  margin-right: .18rem;
}

.course-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  color: transparent !important;
  font-size: 0;
}

.course-card:first-child .course-icon {
  background: #FFF7DF !important;
}

.course-card:nth-child(2) .course-icon {
  background: #EAF2FA !important;
}

.course-card:first-child .course-icon::before {
  background-image: url("../assets/icons/curriculum.png");
}

.course-card:nth-child(2) .course-icon::before {
  background-image: url("../assets/icons/method.png");
}

.level-tag,
.grade-tag {
  border-radius: 999px;
}

.course-card:first-child .level-tag {
  background: #FFF7DF !important;
  color: #7C5A10 !important;
  border: 1px solid rgba(212,164,55,.28);
}

.course-card:first-child .level-tag:nth-child(5) {
  background: #D4A437 !important;
  color: #10233F !important;
}

.course-card:nth-child(2) .level-tag {
  background: #EAF2FA !important;
  color: #163A70 !important;
  border: 1px solid rgba(22,58,112,.18);
}

.course-card:nth-child(2) .level-tag:nth-child(2) {
  background: #163A70 !important;
  color: #FFFFFF !important;
}

.grade-tag,
.grade-tag.blue {
  background: #FFFFFF !important;
  color: #163A70 !important;
  border: 1px solid #DDE5EF;
}

.framework {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #F7F9FC 0%, #FFFFFF 100%);
}

.framework::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(212,164,55,.12), transparent 18rem),
    radial-gradient(circle at 88% 28%, rgba(22,58,112,.08), transparent 24rem);
  pointer-events: none;
}

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

.framework .section-tag,
.framework .section-title {
  text-align: center;
}

.framework .section-tag {
  color: #A97C18;
}

.framework-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1120px;
  margin: 1.8rem auto 0;
}

.framework-card {
  min-height: 238px;
  padding: 1.35rem;
  border: 1px solid #DDE5EF;
  border-radius: 8px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 30px rgba(16,43,85,.07);
}

.framework-step {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: #102B55;
  color: #D4A437;
  font-weight: 900;
  font-size: .86rem;
  letter-spacing: .04em;
}

.framework-card h3 {
  margin: 0 0 .55rem;
  color: #102B55;
  font-size: 1.08rem;
  line-height: 1.28;
}

.framework-card p {
  margin: 0;
  color: #536173;
  font-size: .96rem;
  line-height: 1.62;
}

.exam-entry {
  margin: 1rem 6.8% 0;
  padding: 2rem 2.6%;
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 40%, rgba(212,164,55,.25), transparent 13rem),
    linear-gradient(135deg, #102B55 0%, #163A70 58%, #0C2344 100%);
}

.exam-entry .section-tag,
.exam-entry .section-title {
  text-align: left;
}

.exam-card {
  margin-top: 1.2rem;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
}

.exam-badge {
  border: 1px solid rgba(255,255,255,.22);
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  font-size: 0;
}

.exam-badge::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: url("../assets/icons/exam.png") center / contain no-repeat;
}

.exam-badge::after {
  font-size: .78rem;
}

html[lang="zh-CN"] .exam-badge:nth-child(1)::after { content: "即时评分"; }
html[lang="zh-CN"] .exam-badge:nth-child(2)::after { content: "智能错题本"; }
html[lang="zh-CN"] .exam-badge:nth-child(3)::after { content: "定时模式"; }
html[lang="zh-CN"] .exam-badge:nth-child(4)::after { content: "多端适配"; }
html[lang="en"] .exam-badge:nth-child(1)::after { content: "Instant Grading"; }
html[lang="en"] .exam-badge:nth-child(2)::after { content: "Smart Mistake Book"; }
html[lang="en"] .exam-badge:nth-child(3)::after { content: "Timed Mode"; }
html[lang="en"] .exam-badge:nth-child(4)::after { content: "Multi-Device"; }

.contact-icon {
  width: 34px;
  height: 34px;
  color: transparent;
  font-size: 0;
  background: center / contain no-repeat;
}

.contact-card:nth-child(1) .contact-icon {
  background-image: url("../assets/icons/bank.png");
}

.contact-card:nth-child(2) .contact-icon {
  background-image: url("../assets/icons/students.png");
}

.contact-card:nth-child(3) .contact-icon {
  background-image: url("../assets/icons/exam.png");
}

.btn-exam {
  background: linear-gradient(180deg, #E4BC57 0%, #D4A437 100%);
  color: #0F172A;
  border-radius: 6px;
}

.btn-exam:hover {
  background: linear-gradient(180deg, #D4A437 0%, #A97C18 100%);
  color: #0F172A;
}

.contact-card {
  border-radius: 8px;
}

footer {
  margin-top: 2.5rem;
  background:
    radial-gradient(circle at 14% 20%, rgba(212,164,55,.20), transparent 18rem),
    linear-gradient(135deg, #0C2344 0%, #163A70 55%, #102B55 100%);
}

@media (max-width: 980px) {
  .hero {
    min-height: auto;
    padding-bottom: 2.8rem;
  }

  .hero::before,
  .hero::after {
    display: none;
  }

  .float-cards {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: 1.8rem;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .float-card + .float-card {
    border-left: 0;
    border-top: 1px solid #E2E8F0;
  }

  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .framework-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exam-entry {
    margin-left: 4%;
    margin-right: 4%;
  }
}

@media (max-width: 640px) {
  nav {
    height: 70px;
    padding: 0 5%;
  }

  .mobile-menu {
    top: 70px;
  }

  .hero,
  section {
    padding-left: 5%;
    padding-right: 5%;
  }

  .hero h1 {
    font-size: 2.45rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .framework-grid {
    grid-template-columns: 1fr;
  }
}