/* ============================================================
   UP2U FOOTWEAR — H5 landing page
   配色：粉白 + 玫瑰金
   ============================================================ */

:root {
  --font-serif: 'Cormorant Garamond', Georgia, 'Songti SC', serif;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --radius: 22px;
  --radius-sm: 14px;
  --maxw: 1160px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* 粉白 + 玫瑰金 */
  --bg: #FFF7F9;
  --bg-alt: #FDEEF2;
  --surface: #FFFFFF;
  --primary: #B76E79;        /* 玫瑰金 */
  --primary-soft: #E7B7BF;
  --accent: #D9A46B;         /* 金 */
  --text: #4A4143;
  --text-soft: #8A7B7E;
  --hero-grad: linear-gradient(135deg, rgba(255,244,247,.72), rgba(248,215,222,.55));
  --shadow: 0 18px 40px -22px rgba(183,110,121,.45);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; }

a { color: inherit; }

/* ---------- 通用 section 标题 ---------- */
.section__eyebrow {
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 500;
  margin-bottom: .6rem;
}

.section__title {
  font-size: clamp(1.9rem, 6vw, 3rem);
  color: var(--text);
  margin-bottom: 1rem;
}

.section__sub {
  color: var(--text-soft);
  font-size: 1rem;
  max-width: 40ch;
  margin: 0 auto;
}

.section__head { text-align: center; max-width: 640px; margin: 0 auto clamp(2.5rem, 6vw, 4rem); }

/* ---------- 首屏 Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg .hero__img { filter: saturate(1.02); }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: var(--hero-grad);
  backdrop-filter: blur(2px);
}
/* 飘浮粉色光晕 */
.hero__blob {
  position: absolute; z-index: 1; border-radius: 50%;
  filter: blur(60px); opacity: .5; pointer-events: none;
}
.hero__blob--1 {
  width: 340px; height: 340px; top: -60px; left: -70px;
  background: radial-gradient(circle, #F8D7DE, transparent 70%);
  animation: float1 12s ease-in-out infinite;
}
.hero__blob--2 {
  width: 300px; height: 300px; bottom: -50px; right: -60px;
  background: radial-gradient(circle, #F3D9B8, transparent 70%);
  animation: float2 15s ease-in-out infinite;
}
@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px, 40px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-36px, -30px); } }

.hero__content {
  position: relative; z-index: 2;
  padding: 2rem 1.5rem;
  max-width: 720px;
}
.hero__eyebrow {
  font-size: 1rem; letter-spacing: .3em; color: var(--primary);
  margin-bottom: 1rem; font-weight: 400;
}
.hero__title {
  font-size: clamp(2.8rem, 12vw, 6rem);
  letter-spacing: .02em;
  color: var(--text);
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 20px rgba(255,255,255,.5);
}
.hero__slogan {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 3.6vw, 1.5rem);
  color: var(--primary);
  margin-bottom: 2.2rem;
}
.hero__cta {
  display: inline-block;
  padding: .9rem 2.4rem;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-size: .9rem; letter-spacing: .08em;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), background .3s;
}
.hero__cta:hover { transform: translateY(-3px); background: var(--accent); }

.hero__scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 2; width: 26px; height: 42px;
  border: 2px solid var(--primary); border-radius: 999px;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 4px; height: 8px; border-radius: 2px; background: var(--primary);
  animation: scrollDot 1.6s infinite;
}
@keyframes scrollDot {
  0% { opacity: 0; top: 8px; }
  40% { opacity: 1; }
  80% { opacity: 0; top: 22px; }
  100% { opacity: 0; }
}

/* ---------- 公司简介 About ---------- */
.about { padding: clamp(4rem, 10vw, 7rem) 1.5rem; background: var(--bg); }
.about__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about__lead {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.4rem; color: var(--primary); margin-bottom: 1.4rem;
}
.about__body { color: var(--text-soft); margin-bottom: 1.1rem; }
.about__media { position: relative; }
.about__media img {
  aspect-ratio: 4 / 5; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.about__badge {
  position: absolute; bottom: -18px; right: -8px;
  background: var(--surface); color: var(--primary);
  font-family: var(--font-serif); font-weight: 600; line-height: 1.3;
  padding: 1rem 1.4rem; border-radius: var(--radius-sm);
  box-shadow: var(--shadow); font-size: 1.05rem; text-align: right;
}

/* ---------- 数据亮点带 ---------- */
.stats {
  background: var(--bg-alt);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(2rem, 8vw, 6rem);
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  text-align: center;
}
.stats__item { display: flex; flex-direction: column; }
.stats__num {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 3.6rem); color: var(--primary); line-height: 1;
}
.stats__num em { font-style: normal; color: var(--accent); }
.stats__label {
  margin-top: .5rem; font-size: .8rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-soft);
}

/* ---------- 产品展示 ---------- */
.products { padding: clamp(4rem, 10vw, 7rem) 1.5rem; background: var(--bg); }
.product-group { max-width: var(--maxw); margin: 0 auto clamp(3rem, 7vw, 5rem); }
.product-group:last-child { margin-bottom: 0; }
.product-group__title {
  font-size: clamp(1.4rem, 4.5vw, 2rem); color: var(--text);
  margin-bottom: 1.8rem; display: flex; align-items: baseline; gap: .8rem;
}
.product-group__title span {
  font-family: var(--font-sans); font-size: .85rem; font-weight: 400;
  color: var(--text-soft); letter-spacing: .1em;
}
.product-group__title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--primary-soft), transparent);
}
.product-grid {
  display: grid; gap: clamp(.9rem, 2.5vw, 1.6rem);
  grid-template-columns: repeat(2, 1fr);
}
.card {
  background: var(--surface); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow); cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s;
}
.card img { aspect-ratio: 1 / 1; transition: transform .5s var(--ease); }
.card figcaption {
  padding: .8rem 1rem; font-size: .9rem; letter-spacing: .05em;
  color: var(--text); text-align: center;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(0,0,0,.35); }
.card:hover img { transform: scale(1.06); }

/* ---------- 联系我们 ---------- */
.contact {
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
  background: var(--bg-alt); text-align: center;
}
.contact__inner { max-width: 760px; margin: 0 auto; }
.contact__list {
  list-style: none; margin-top: 2.6rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
.contact__link {
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 1.5rem 1rem; box-shadow: var(--shadow); text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  height: 100%; transition: transform .3s var(--ease), box-shadow .3s;
}
a.contact__link:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -22px rgba(183,110,121,.55); }
.contact__icon {
  font-size: 1.5rem; color: var(--primary);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg-alt); display: grid; place-items: center;
  margin-bottom: .5rem;
}
.contact__k {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-soft);
}
.contact__v { font-size: .95rem; color: var(--text); word-break: break-word; }

.contact__qr {
  margin-top: 2.6rem; display: inline-flex; flex-direction: column; align-items: center; gap: .9rem;
}
.contact__qr img {
  width: 148px; height: 148px; border-radius: var(--radius-sm);
  background: var(--surface); padding: 8px; box-shadow: var(--shadow);
}
.contact__qr p { font-size: .85rem; color: var(--text-soft); line-height: 1.5; }
.contact__qr span { color: var(--primary); }

/* ---------- 页脚 ---------- */
.footer {
  background: var(--text); color: #fff;
  text-align: center; padding: 3rem 1.5rem;
}
.footer__brand { font-family: var(--font-serif); font-size: 1.15rem; letter-spacing: .05em; }
.footer__slogan {
  font-family: var(--font-serif); font-style: italic;
  color: var(--primary-soft); margin: .5rem 0 1.4rem;
}
.footer__copy { font-size: .78rem; opacity: .55; letter-spacing: .04em; }

/* ---------- 返回顶部 ---------- */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--primary); color: #fff; text-decoration: none;
  display: grid; place-items: center; font-size: 1.2rem;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); }

/* ---------- 产品图放大浮层 ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(74,65,67,.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 2rem;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: min(92vw, 640px); max-height: 76vh; width: auto; height: auto;
  border-radius: var(--radius-sm); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  transform: scale(.94); transition: transform .35s var(--ease);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__cap { color: #fff; font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: .05em; }
.lightbox__close {
  position: absolute; top: 18px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.2); color: #fff; font-size: 1.6rem; line-height: 1;
}
.lightbox__close:hover { background: rgba(255,255,255,.35); }

/* 左右切换按钮 */
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.2); color: #fff;
  font-size: 2rem; line-height: 1; display: grid; place-items: center;
  transition: background .25s, opacity .25s;
}
.lightbox__nav:hover { background: rgba(255,255,255,.35); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
/* 只有一张图时隐藏切换按钮（由 JS 加 .is-single 控制） */
.lightbox.is-single .lightbox__nav { display: none; }

@media (max-width: 767px) {
  .lightbox__nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

/* ---------- 滚动淡入 ---------- */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 响应式 ---------- */
@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .contact__list { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .about__inner { grid-template-columns: 1fr; }
  .about__media { order: -1; max-width: 420px; margin: 0 auto; }
  .about__badge { right: 8px; }
}

/* 尊重系统减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scroll span, .hero__blob { animation: none; }
}