/* ============================================================

   home.css · Our Smart Baby

   首页专属样式

   加载顺序：32/34

   ============================================================ */



/* 首页容器 */

.home-page {

  width: 100%;

}



/* Hero区 */

.home-hero-section {

  padding: var(--rhythm-breath) var(--gutter) var(--rhythm-silence);

  background: linear-gradient(180deg,

    var(--color-primary-50) 0%,

    var(--color-bg) 100%);

  text-align: center;

  position: relative;

  overflow: hidden;

}



.home-hero-section::before {

  content: '';

  position: absolute;

  top: -50%;

  left: 50%;

  transform: translateX(-50%);

  width: 800px;

  height: 800px;

  border-radius: 50%;

  background: radial-gradient(circle, var(--color-primary-100) 0%, transparent 70%);

  opacity: 0.5;

  z-index: 0;

  pointer-events: none;

}



.home-hero-section > * {

  position: relative;

  z-index: 1;

}



.home-hero-section .hero-tagline {

  display: inline-block;

  padding: var(--space-1) var(--space-4);

  background-color: white;

  border: 1px solid var(--color-primary-200);

  border-radius: var(--radius-full);

  font-size: var(--text-sm);

  color: var(--color-primary-600);

  font-weight: var(--font-medium);

  margin-bottom: var(--rhythm-normal);

}



.home-hero-section h1 {

  font-size: var(--text-5xl);

  font-weight: var(--font-bold);

  line-height: var(--leading-tight);

  margin: 0 auto var(--rhythm-normal);

  max-width: 900px;

}



.home-hero-section .hero-sub {

  font-size: var(--text-lg);

  color: var(--color-text-secondary);

  max-width: 640px;

  margin: 0 auto var(--rhythm-loose);

  line-height: var(--leading-relaxed);

}



.home-hero-section .hero-buttons {

  display: flex;

  gap: var(--space-3);

  justify-content: center;

  flex-wrap: wrap;

}



/* 首屏价值可见 */

@media (max-width: 768px) and (max-height: 700px) {

  .home-hero-section {

    padding: var(--rhythm-loose) var(--gutter);

  }



  .home-hero-section h1 { font-size: var(--text-3xl); }

  .home-hero-section .hero-sub { font-size: var(--text-base); margin-bottom: var(--rhythm-normal); }

}



/* 筒仓入口区 */

.home-silos {

  max-width: 1200px;

  margin: 0 auto;

  padding: var(--rhythm-breath) var(--gutter);

}



.home-silos h2 {

  font-size: var(--text-2xl);

  margin-bottom: var(--rhythm-normal);

  text-align: center;

}



/* 精选内容区 */

.home-featured-section {

  max-width: 1200px;

  margin: 0 auto;

  padding: var(--rhythm-breath) var(--gutter);

}



.home-featured-section .section-header {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  margin-bottom: var(--rhythm-normal);

}



.home-featured-section h2 {

  font-size: var(--text-2xl);

}



.home-featured-section .see-all {

  font-size: var(--text-sm);

  color: var(--color-primary-600);

  font-weight: var(--font-medium);

}



/* 探索入口区 */

.home-explore-section {

  max-width: 1000px;

  margin: var(--rhythm-breath) auto;

  padding: 0 var(--gutter);

}



/* Why Trust Us区 */

.home-trust-section {

  max-width: 1200px;

  margin: 0 auto;

  padding: var(--rhythm-breath) var(--gutter);

}



/* 社区仪式区 */

.home-ritual-section {

  max-width: 900px;

  margin: 0 auto;

  padding: var(--rhythm-loose) var(--gutter);

}



/* 移动端 */

@media (max-width: 768px) {

  .home-hero-section h1 { font-size: var(--text-3xl); }

  .home-hero-section .hero-sub { font-size: var(--text-base); }



  .home-featured-section .section-header {

    flex-direction: column;

    align-items: flex-start;

    gap: var(--space-2);

  }

}