/* =============================================
   隆里电丝 Longly Dance - Apple 统一钛白/铂灰设计系统
   设计理念: 告别黑白屏割裂硬切块，建立全页统一通透的高阶钛白与苹果蓝体系
============================================= */

:root {
  /* 1. 苹果统一亮色核心 Palette */
  --apple-bg-light: #FBFBFD;      /* 苹果纯净浅灰主背景 */
  --apple-bg-white: #FFFFFF;      /* 纯白卡片与区块 */
  --apple-bg-subtle: #F5F5F7;     /* 次级极浅白灰 */
  
  --apple-text-dark: #1D1D1F;     /* 苹果炭素深黑 (全页统一高对比) */
  --apple-text-muted: #86868B;    /* 苹果经典次级灰 */
  --apple-text-light: #F5F5F7;    
  --apple-text-light-sub: #A1A1A6;

  /* 2. 苹果品牌交互色 (Apple Interactive Colors) */
  --apple-blue: #0066CC;         /* 苹果经典蓝 */
  --apple-blue-hover: #0077ED;
  --apple-blue-dark: #2997FF;    
  --apple-green: #30D158;        /* 苹果运行状态绿 */

  /* 3. 边框与圆角规范 (24px Apple Radius) */
  --apple-border-light: rgba(0, 0, 0, 0.08);
  --apple-border-subtle: rgba(0, 0, 0, 0.05);
  --apple-radius: 24px;
  --apple-radius-sm: 14px;
  --apple-radius-pill: 980px;

  /* 4. 苹果字体族 (SF Pro Font Stack) */
  --font-sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", monospace;

  /* 5. 缓动与布局间距 */
  --ease-apple: cubic-bezier(0.25, 1, 0.5, 1);
  --nav-height: 78px;             /* MiniMax 风格桌面导航栏高度 */
  --section-padding: 110px;
  --max-width: 1280px;
}

/* =============================================
   全局 Reset & 基础排版
============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  /* 参考 MiniMax 的自然滚动节奏，避免滚轮被强制吸附到下一整屏 */
  scroll-snap-type: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

body {
  background: var(--apple-bg-light);
  color: var(--apple-text-dark);
  font-family: var(--font-sf);
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: -0.022em;
  overflow-x: hidden;
  height: 100%;
  overflow-y: auto;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 200ms var(--ease-apple);
}

ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
img, svg { display: block; max-width: 100%; }

/* =============================================
   01.1 全屏内容节奏与自然滚动布局 (Natural Full-Height Section System)
============================================= */
section,
.snap-section {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  scroll-margin-top: var(--nav-height);
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-height) + 20px) 0 40px 0;
}

footer,
#footer,
.footer {
  min-height: auto !important;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  padding: 60px 0 30px 0;
}

/* 在小屏幕或纵向高度受限时改为内容自适应，防止信息被截断 */
@media (max-height: 750px), (max-width: 992px) {
  html {
    scroll-snap-type: none;
  }
  section,
  .snap-section {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
    min-height: auto !important;
    padding: 80px 0 !important;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 50px;            /* MiniMax 风格移动端导航栏高度 */
  }
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

/* =============================================
   全屏统一标准标题系统 (Unified Screen Header System)
============================================= */
.screen-header,
.painpoints-header {
  margin-bottom: 28px !important;
  width: 100%;
  text-align: left;
}

.screen-kicker,
.section-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--apple-blue);
  text-transform: uppercase;
  margin-bottom: 6px;
  white-space: nowrap;
}

.screen-title,
.section-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--apple-text-dark);
  margin-bottom: 8px;
  white-space: nowrap;
}

.screen-title span,
.section-title span {
  color: var(--apple-blue);
}

.screen-desc,
.section-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--apple-text-muted);
  max-width: 840px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* =============================================
   苹果风格按钮与 Action 链接 (Apple CTA Buttons)
============================================= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--apple-blue);
  color: #FFFFFF;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--apple-radius-pill);
  border: 1px solid var(--apple-blue);
  transition: all 200ms var(--ease-apple);
}

.btn-primary:hover {
  background: var(--apple-blue-hover);
  border-color: var(--apple-blue-hover);
  transform: scale(1.02);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--apple-blue);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--apple-radius-pill);
  border: 1px solid var(--apple-blue);
  transition: all 200ms var(--ease-apple);
}

.btn-outline:hover {
  background: rgba(0, 102, 204, 0.08);
  transform: scale(1.02);
}

/* 苹果经典蓝色超链接带小箭号 */
.apple-link {
  color: var(--apple-blue);
  font-size: 17px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 200ms var(--ease-apple);
}

.apple-link:hover {
  gap: 8px;
  text-decoration: underline;
}

/* =============================================
   苹果顺滑入场动画 (Apple Scroll Reveal)
============================================= */
.animate-in {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 800ms var(--ease-apple), transform 800ms var(--ease-apple);
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .animate-in {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}