/* 非兮本然官网 - 全局样式 */
:root {
  --primary: #2D1B4E;
  --primary-light: #3C2A5C;
  --secondary: #9B8EC4;
  --accent: #C9A96E;
  --bg: #F8F6F2;
  --bg-alt: #EDE8E2;
  --text: #2C2C2C;
  --text-light: #6B6B6B;
  --white: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Serif SC', 'Source Han Serif SC', Georgia, serif;
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* 图片容器 - 统一管理，防止不同尺寸图片破坏布局 */
.img-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.img-container:hover img {
  transform: scale(1.03);
}

/* 固定宽高比图片容器 */
.img-container-16-9 { aspect-ratio: 16 / 9; }
.img-container-4-3 { aspect-ratio: 4 / 3; }
.img-container-3-2 { aspect-ratio: 3 / 2; }
.img-container-1-1 { aspect-ratio: 1 / 1; }
.img-container-3-4 { aspect-ratio: 3 / 4; }

/* 导航栏 */
.nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(248, 246, 242, 0.92);
  border-bottom: 1px solid rgba(45, 27, 78, 0.08);
  transition: all 0.3s ease;
}
.nav-fixed.scrolled {
  box-shadow: 0 2px 20px rgba(45, 27, 78, 0.08);
}

/* 悬浮CTA按钮 */
.floating-cta {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 20px 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  border-radius: 8px;
  font-size: 14px;
  letter-spacing: 3px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(45, 27, 78, 0.3);
  transition: all 0.3s ease;
}
.floating-cta:hover {
  background: linear-gradient(135deg, var(--accent), #D4B87A);
  box-shadow: 0 6px 30px rgba(201, 169, 110, 0.4);
  transform: translateY(-50%) scale(1.02);
}

/* 卡片悬浮效果 */
.card-hover {
  transition: all 0.4s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(45, 27, 78, 0.12);
}

/* 渐变文字 */
.text-gradient {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 分割线装饰 */
.section-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  margin: 16px auto 0;
}

/* Toast提示 */
.toast {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 15px;
  z-index: 10000;
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-success {
  background: #2D1B4E;
  color: white;
  box-shadow: 0 4px 20px rgba(45, 27, 78, 0.3);
}
.toast-error {
  background: #DC2626;
  color: white;
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.3);
}

/* 瀑布流布局（学员案例图片集） */
.masonry-grid {
  columns: 3;
  column-gap: 16px;
}
.masonry-grid .masonry-item {
  break-inside: avoid;
  margin-bottom: 16px;
}
@media (max-width: 1024px) {
  .masonry-grid { columns: 2; }
}
@media (max-width: 640px) {
  .masonry-grid { columns: 1; }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .floating-cta {
    right: 10px;
    padding: 14px 8px;
    font-size: 12px;
    letter-spacing: 2px;
  }
}