/*
 * MusicRent 乐器租赁平台 — 主样式表
 * 设计基调：青春活力 / 音乐无界 / 像音乐生活杂志
 * 主色：橙 #F97316 / 白 / 深灰 / 音符彩色点缀
 * ★ 遵循 PBootCMS AI 开发规范 V3.6
 */

/* Google Fonts: Poppins (headings) + Noto Sans SC (body/CJK) */


/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
  /* 主色调 — 活力橙 */
  --orange: #F97316;
  --orange-dark: #EA580C;
  --orange-light: #FFF7ED;
  --orange-50: #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-500: #F97316;
  --orange-600: #EA580C;

  /* 深灰系 */
  --text: #1A1A2E;
  --text-secondary: #475569;
  --text-muted: #94A3B8;

  /* 背景 */
  --bg: #FFFFFF;
  --bg-alt: #FAFAFA;
  --bg-warm: #FFF7ED;
  --bg-card: #FFFFFF;
  --bg-dark: #1A1A2E;

  /* 边框 */
  --border: #E5E7EB;
  --border-light: #F1F5F9;

  /* 音符彩色点缀 */
  --accent-purple: #8B5CF6;
  --accent-pink: #EC4899;
  --accent-cyan: #06B6D4;
  --accent-green: #10B981;
  --accent-yellow: #F59E0B;
  --accent-blue: #3B82F6;
  --accent-red: #EF4444;

  /* 圆角 — 大圆角年轻感 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.1), 0 8px 20px rgba(0,0,0,0.05);
  --shadow-orange: 0 4px 14px rgba(249,115,22,0.25);

  /* 字体 — Poppins (English headings) + Noto Sans SC (Chinese body) */
  --font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: "Poppins", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* 间距 */
  --header-h: 72px;
  --container-max: 1200px;
  --section-gap: 80px;

  /* 过渡 */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration: 200ms;
  --duration-slow: 300ms;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--duration) var(--ease)}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;border:none;outline:none;background:none}
button{cursor:pointer}
input,select,textarea{background:var(--bg)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.25}
.section-title,.card__title,.cat-card__name,.story-card__name,.cta-section__title,.footer__col-title,.inner-banner__title,.detail__title,.sidebar__title,.review-card__name{font-family:var(--font-heading)}

/* Selection */
::selection{background:var(--orange-100);color:var(--orange-600)}

/* ============================================================
   Container
   ============================================================ */
.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 24px;
}

/* ============================================================
   Header / Navigation
   ★ 13.3: nav__dropdown z-index ≥ 10
   ★ 13.4: hamburger 独立于 nav__actions
   ★ 13.11: 白色实底 + 深色文字
   ============================================================ */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-light);
  transition:box-shadow var(--duration-slow) var(--ease);
}
.header.scrolled{
  box-shadow:var(--shadow-md);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 24px;
  height:var(--header-h);
  flex-wrap:nowrap;
  min-width:0;
}

/* Logo */
.header__logo{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.header__logo-icon{
  width:42px;
  height:42px;
  background:linear-gradient(135deg, var(--orange), var(--orange-dark));
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.2rem;
}
.header__logo-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.header__logo-name{
  font-size:1.15rem;
  font-weight:700;
  color:var(--text);
}
.header__logo-sub{
  font-size:0.65rem;
  color:var(--text-muted);
  letter-spacing:0.08em;
}

/* Nav — ★ 单横排不换行，不收缩，保持所有导航可见 */
.header__nav{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
  overflow:visible;
  flex-shrink:0;
}
.header__nav-link,
.header__nav-item > a{
  display:flex;
  align-items:center;
  gap:4px;
  padding:8px 14px;
  border-radius:var(--radius);
  font-size:0.92rem;
  font-weight:500;
  color:var(--text-secondary);
  transition:all var(--duration) var(--ease);
  white-space:nowrap;
  cursor:pointer;
}
.header__nav-link:hover,
.header__nav-item:hover > a{
  color:var(--orange);
  background:var(--orange-50);
}
.header__nav-link.active{
  color:var(--orange);
  background:var(--orange-50);
  font-weight:600;
}

/* Dropdown ★ 13.3 z-index */
.header__nav-item{
  position:relative;
}
.header__dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
  min-width:160px;
  padding:8px;
  opacity:0;
  visibility:hidden;
  transition:all var(--duration-slow) var(--ease);
  z-index:60;
}
.header__nav-item:hover .header__dropdown{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.header__dropdown a{
  display:block;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  font-size:0.9rem;
  color:var(--text-secondary);
  white-space:nowrap;
  transition:all var(--duration) var(--ease);
}
.header__dropdown a:hover{
  color:var(--orange);
  background:var(--orange-50);
}

/* Header actions — ★ 固定右侧不收缩 */
.header__actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.header__cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 20px;
  background:var(--orange);
  color:#fff;
  border-radius:var(--radius-full);
  font-size:0.88rem;
  font-weight:600;
  transition:all var(--duration) var(--ease);
  box-shadow:var(--shadow-orange);
}
.header__cta:hover{
  background:var(--orange-dark);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(249,115,22,0.35);
}

/* ============================================================
   Hamburger (★ 13.4: 独立于 header__actions)
   ============================================================ */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
  border-radius:var(--radius-sm);
  transition:background var(--duration) var(--ease);
  z-index:70;
}
.hamburger span{
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:all var(--duration-slow) var(--ease);
}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   Mobile Nav
   ============================================================ */
.mobile-nav{
  position:fixed;
  top:0;
  right:0;
  width:300px;
  max-width:80vw;
  height:100vh;
  background:var(--bg);
  z-index:65;
  transform:translateX(100%);
  transition:transform var(--duration-slow) var(--ease);
  box-shadow:var(--shadow-xl);
  overflow-y:auto;
}
.mobile-nav.active{transform:translateX(0)}
.mobile-nav__inner{
  padding:24px 20px;
  padding-top:100px;
}
.mobile-nav__link,
.mobile-nav__item{
  display:flex;
  align-items:center;
  padding:14px 16px;
  border-radius:var(--radius);
  font-size:1rem;
  color:var(--text-secondary);
  transition:all var(--duration) var(--ease);
  cursor:pointer;
}
.mobile-nav__link:hover,
.mobile-nav__link.active,
.mobile-nav__item:hover{
  color:var(--orange);
  background:var(--orange-50);
}
.mobile-nav__sub{
  padding-left:16px;
  max-height:0;
  overflow:hidden;
  transition:max-height var(--duration-slow) var(--ease);
}
.mobile-nav__sub.active{max-height:500px}
.mobile-nav__sub a{
  display:block;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  font-size:0.92rem;
  color:var(--text-muted);
  transition:all var(--duration) var(--ease);
}
.mobile-nav__sub a:hover{color:var(--orange);background:var(--orange-50)}

/* Overlay */
.mobile-nav__overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  z-index:64;
  opacity:0;
  visibility:hidden;
  transition:all var(--duration-slow) var(--ease);
}
.mobile-nav__overlay.active{opacity:1;visibility:visible}

/* ============================================================
   Section
   ============================================================ */
.section{
  padding:var(--section-gap) 0;
}
.section--alt{
  background:var(--bg-alt);
}
.section--warm{
  background:var(--orange-50);
}
.section--dark{
  background:var(--bg-dark);
  color:#fff;
}

/* Section header */
.section-header{
  text-align:center;
  margin-bottom:48px;
}
.section-tag{
  display:inline-block;
  padding:6px 16px;
  background:var(--orange-50);
  color:var(--orange);
  border-radius:var(--radius-full);
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.05em;
  margin-bottom:16px;
}
.section--dark .section-tag{
  background:rgba(249,115,22,0.2);
  color:var(--orange);
}
.section-title{
  font-family:var(--font-heading);
  font-size:2.2rem;
  font-weight:800;
  color:var(--text);
  margin-bottom:12px;
  letter-spacing:-0.02em;
}
.section--dark .section-title{color:#fff}
.section-subtitle{
  font-size:1.05rem;
  color:var(--text-secondary);
  max-width:600px;
}
.section--dark .section-subtitle{color:var(--text-muted)}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 28px;
  border-radius:var(--radius-full);
  font-size:0.95rem;
  font-weight:600;
  transition:all var(--duration) var(--ease);
  cursor:pointer;
  border:none;
  line-height:1.4;
}
.btn--primary{
  background:var(--orange);
  color:#fff;
  box-shadow:var(--shadow-orange);
}
.btn--primary:hover{
  background:var(--orange-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(249,115,22,0.4);
}
.btn--outline{
  background:transparent;
  color:var(--orange);
  border:2px solid var(--orange);
}
.btn--outline:hover{
  background:var(--orange);
  color:#fff;
}
.btn--white{
  background:#fff;
  color:var(--orange);
  box-shadow:var(--shadow);
}
.btn--white:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}
.btn--ghost{
  background:transparent;
  color:var(--text-secondary);
  border:1px solid var(--border);
}
.btn--ghost:hover{
  color:var(--orange);
  border-color:var(--orange);
  background:var(--orange-50);
}
.btn--lg{
  padding:16px 36px;
  font-size:1.05rem;
}

/* ============================================================
   Hero / Banner (Swiper)
   ============================================================ */
.hero{
  position:relative;
  height:560px;
  overflow:hidden;
  background:var(--bg-dark);
}
.hero .swiper{width:100%;height:100%}
.hero__slide{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(26,26,46,0.7) 0%, rgba(26,26,46,0.3) 50%, rgba(249,115,22,0.25) 100%);
  z-index:2;
}
.hero__content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  z-index:3;
  width:90%;
  max-width:720px;
}
.hero__title{
  font-size:3rem;
  font-weight:900;
  color:#fff;
  margin-bottom:16px;
  letter-spacing:-0.02em;
  line-height:1.15;
  text-shadow:0 2px 20px rgba(0,0,0,0.3);
}
.hero__subtitle{
  font-size:1.2rem;
  color:rgba(255,255,255,0.85);
  margin-bottom:32px;
  line-height:1.5;
}
.hero__actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.hero__actions .btn--primary{
  padding:14px 32px;
  font-size:1rem;
}
.hero__actions .btn--outline{
  border-color:rgba(255,255,255,0.6);
  color:#fff;
  padding:14px 32px;
  font-size:1rem;
}
.hero__actions .btn--outline:hover{
  background:#fff;
  color:var(--text);
  border-color:#fff;
}
.hero-pagination{
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  gap:8px;
}
.hero-pagination .swiper-pagination-bullet{
  width:10px;
  height:10px;
  background:rgba(255,255,255,0.5);
  opacity:1;
  border-radius:var(--radius-full);
  transition:all var(--duration-slow) var(--ease);
}
.hero-pagination .swiper-pagination-bullet-active{
  background:var(--orange);
  width:28px;
}

/* ============================================================
   Stats / Platform Data
   ============================================================ */
.stats-section{
  position:relative;
  margin-top:-40px;
  z-index:5;
}
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  background:var(--bg-card);
  border-radius:var(--radius-2xl);
  padding:36px 28px;
  box-shadow:var(--shadow-xl);
}
.stat-item{
  text-align:center;
  padding:16px;
}
.stat-item__number{
  font-size:2.5rem;
  font-weight:900;
  color:var(--orange);
  margin-bottom:6px;
  line-height:1;
}
.stat-item__label{
  font-size:0.88rem;
  color:var(--text-secondary);
}

/* ============================================================
   Cards
   ============================================================ */
.card{
  display:block;
  background:var(--bg-card);
  border-radius:var(--radius-xl);
  overflow:hidden;
  transition:all var(--duration-slow) var(--ease);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border-light);
  cursor:pointer;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--orange-100);
}
.card__image{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}
.card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.4s var(--ease);
}
.card:hover .card__image img{transform:scale(1.05)}
.card__body{padding:20px}
.card__tag{
  display:inline-block;
  padding:4px 10px;
  background:var(--orange-50);
  color:var(--orange);
  border-radius:var(--radius-full);
  font-size:0.75rem;
  font-weight:600;
  margin-bottom:10px;
}
.card__title{
  font-size:1.1rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:8px;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card__desc{
  font-size:0.9rem;
  color:var(--text-muted);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card__meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  font-size:0.85rem;
  color:var(--text-muted);
}
.card__price{
  font-size:1.35rem;
  font-weight:800;
  color:var(--orange);
  margin-top:8px;
}

/* Card Grid */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

/* Circle Category Card */
.cat-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:28px 16px;
  background:var(--bg-card);
  border-radius:var(--radius-xl);
  transition:all var(--duration-slow) var(--ease);
  box-shadow:var(--shadow-sm);
  border:2px solid transparent;
  cursor:pointer;
}
.cat-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--orange);
}
.cat-card__icon{
  width:80px;
  height:80px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  margin-bottom:16px;
  transition:all var(--duration-slow) var(--ease);
}
.cat-card:hover .cat-card__icon{transform:scale(1.1)}
.cat-card__name{
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
}
.cat-card__price{
  font-size:0.9rem;
  color:var(--orange);
  font-weight:600;
}
.cat-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}

/* Advantage Card */
.adv-card{
  text-align:center;
  padding:32px 20px;
  border-radius:var(--radius-xl);
  transition:all var(--duration-slow) var(--ease);
}
.adv-card:hover{
  background:var(--bg-card);
  box-shadow:var(--shadow-md);
}
.adv-card__icon{
  width:72px;
  height:72px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  margin-bottom:18px;
}
.adv-card__title{
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:8px;
  color:var(--text);
}
.adv-card__desc{
  font-size:0.9rem;
  color:var(--text-secondary);
  line-height:1.6;
}
.adv-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

/* Story Card */
.story-card{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  aspect-ratio:3/4;
  cursor:pointer;
}
.story-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.5s var(--ease);
}
.story-card:hover .story-card__img{transform:scale(1.08)}
.story-card__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(26,26,46,0.85) 0%, rgba(26,26,46,0.2) 50%, transparent 100%);
}
.story-card__info{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:28px 20px;
  color:#fff;
}
.story-card__quote{
  font-size:1rem;
  font-weight:600;
  margin-bottom:6px;
  line-height:1.5;
}
.story-card__name{
  font-size:0.85rem;
  opacity:0.8;
}
.story-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

/* ============================================================
   Process Steps
   ============================================================ */
.process{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  position:relative;
}
.process::before{
  content:'';
  position:absolute;
  top:40px;
  left:10%;
  right:10%;
  height:3px;
  background:linear-gradient(to right, var(--orange), var(--accent-purple), var(--accent-pink), var(--accent-cyan), var(--accent-green));
  border-radius:3px;
  z-index:0;
}
.process-step{
  flex:1;
  text-align:center;
  position:relative;
  z-index:1;
}
.process-step__num{
  width:80px;
  height:80px;
  border-radius:50%;
  background:var(--bg-card);
  border:3px solid var(--orange);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  font-weight:900;
  color:var(--orange);
  margin-bottom:16px;
  transition:all var(--duration) var(--ease);
  position:relative;
}
.process-step:hover .process-step__num{
  background:var(--orange);
  color:#fff;
  transform:scale(1.1);
  box-shadow:var(--shadow-orange);
}
.process-step__title{
  font-size:0.95rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:4px;
}
.process-step__time{
  font-size:0.8rem;
  color:var(--text-muted);
}

/* ============================================================
   CTA Section
   ============================================================ */
.cta-section{
  background:linear-gradient(135deg, var(--orange), var(--orange-dark));
  padding:72px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.cta-section .container{position:relative;z-index:1}
.cta-section__title{
  font-size:2.5rem;
  font-weight:900;
  color:#fff;
  margin-bottom:16px;
}
.cta-section__actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ============================================================
   Forms
   ============================================================ */
.form-group{margin-bottom:18px}
.form-group label{
  display:block;
  margin-bottom:6px;
  font-size:0.9rem;
  font-weight:600;
  color:var(--text);
}
.form-control{
  width:100%;
  padding:12px 16px;
  border:2px solid var(--border);
  border-radius:var(--radius);
  font-size:0.95rem;
  color:var(--text);
  background:var(--bg);
  transition:all var(--duration) var(--ease);
}
.form-control:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-100)}
.form-control::placeholder{color:var(--text-muted)}
textarea.form-control{resize:vertical;min-height:100px}
.required{color:var(--accent-red)}

/* ============================================================
   Footer
   ============================================================ */
.footer{
  background:var(--bg-dark);
  color:#fff;
  padding-top:60px;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 24px 48px;
}
.footer__brand-desc{
  font-size:0.9rem;
  color:var(--text-muted);
  line-height:1.7;
  margin-bottom:20px;
}
.footer__social{
  display:flex;
  gap:10px;
}
.footer__social a{
  width:40px;
  height:40px;
  border-radius:var(--radius);
  background:rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-size:1.1rem;
  transition:all var(--duration) var(--ease);
}
.footer__social a:hover{background:var(--orange);color:#fff}
.footer__col-title{
  font-size:1rem;
  font-weight:700;
  margin-bottom:20px;
  color:#fff;
}
.footer__links a{
  display:block;
  padding:6px 0;
  font-size:0.9rem;
  color:var(--text-muted);
  transition:all var(--duration) var(--ease);
}
.footer__links a:hover{color:var(--orange);padding-left:6px}
.footer__contact-item{
  display:flex;
  gap:10px;
  padding:6px 0;
  font-size:0.9rem;
  color:var(--text-muted);
  align-items:flex-start;
}
.footer__contact-item i{color:var(--orange);margin-top:3px;flex-shrink:0}
.footer__qrcode{
  width:120px;
  height:120px;
  background:rgba(255,255,255,0.05);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  color:var(--text-muted);
  text-align:center;
  line-height:1.5;
}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:24px;
}
.footer__bottom-inner{
  max-width:var(--container-max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:0.85rem;
  color:var(--text-muted);
}
.footer__bottom-inner a{color:var(--text-muted)}
.footer__bottom-inner a:hover{color:var(--orange)}

/* Friends links */
.friend-links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:0;
  font-size:0.85rem;
}
.friend-links__label{color:var(--text-muted);white-space:nowrap}
.friend-links a{color:var(--text-muted)}
.friend-links a:hover{color:var(--orange)}

/* ============================================================
   Back to Top
   ============================================================ */
.back-top{
  position:fixed;
  bottom:24px;
  right:24px;
  width:48px;
  height:48px;
  background:var(--orange);
  color:#fff;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  box-shadow:var(--shadow-orange);
  z-index:40;
  opacity:0;
  visibility:hidden;
  transform:translateY(20px);
  transition:all var(--duration-slow) var(--ease);
  cursor:pointer;
}
.back-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-top:hover{background:var(--orange-dark);transform:translateY(-3px)}
/* ============================================================
   Inner Page: Banner
   ============================================================ */
.inner-banner{
  position:relative;
  height:320px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.inner-banner__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.inner-banner__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(26,26,46,0.75) 0%, rgba(26,26,46,0.4) 100%);
}
.inner-banner__content{
  position:relative;
  z-index:2;
  text-align:center;
  color:#fff;
}
.inner-banner__title{
  font-size:2.4rem;
  font-weight:900;
  margin-bottom:8px;
}
.inner-banner__subtitle{
  font-size:1.05rem;
  opacity:0.85;
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb-bar{
  background:var(--bg-alt);
  border-bottom:1px solid var(--border-light);
  padding:0 24px;
}
.breadcrumb{
  max-width:var(--container-max);
  margin:0 auto;
  padding:12px 0;
  font-size:0.88rem;
  color:var(--text-muted);
}
.breadcrumb a{color:var(--text-secondary)}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb i{margin:0 6px;font-size:0.65rem}

/* ============================================================
   Inner Page Layout (optionally with sidebar)
   ============================================================ */
.page-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:32px;
  max-width:var(--container-max);
  margin:0 auto;
  padding:32px 24px 60px;
}
.page-layout--full{
  grid-template-columns:1fr;
}

/* Sidebar */
.sidebar{
  background:var(--bg-card);
  border-radius:var(--radius-xl);
  border:1px solid var(--border-light);
  overflow:hidden;
  height:fit-content;
  position:sticky;
  top:calc(var(--header-h) + 24px);
}
.sidebar__title{
  padding:24px 20px 16px;
  font-size:1.2rem;
  font-weight:700;
  color:var(--text);
  border-bottom:1px solid var(--border-light);
}
.sidebar__nav a{
  display:block;
  padding:14px 24px;
  font-size:0.95rem;
  color:var(--text-secondary);
  border-left:3px solid transparent;
  transition:all var(--duration) var(--ease);
}
.sidebar__nav a:hover,
.sidebar__nav a.active{
  color:var(--orange);
  background:var(--orange-50);
  border-left-color:var(--orange);
}

/* List content */
.list-header{
  text-align:center;
  margin-bottom:36px;
}
.list-header h1{font-size:2rem;font-weight:800;margin-bottom:8px}

.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:40px;
  flex-wrap:wrap;
}
.pagination a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  font-size:0.9rem;
  color:var(--text-secondary);
  transition:all var(--duration) var(--ease);
}
.pagination a:hover,
.pagination a.active{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}

/* Empty state */
.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--text-muted);
}
.empty-state i{font-size:3rem;margin-bottom:16px;display:block;opacity:0.3}
.empty-state p{font-size:1rem}

/* ============================================================
   Detail Page
   ============================================================ */
.detail{
  max-width:860px;
  margin:0 auto;
  padding:40px 24px 60px;
}
.detail-gallery{
  border-radius:var(--radius-xl);
  overflow:hidden;
  margin-bottom:32px;
}
.detail-gallery img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.detail__header{margin-bottom:24px}
.detail__title{font-size:2rem;font-weight:800;margin-bottom:12px}
.detail__meta-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:0.9rem;
  color:var(--text-muted);
}
.detail__params{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:28px;
}
.detail__param{
  background:var(--orange-50);
  border-radius:var(--radius-lg);
  padding:20px;
  text-align:center;
}
.detail__param-label{font-size:0.8rem;color:var(--text-muted);margin-bottom:6px}
.detail__param-value{font-size:1.2rem;font-weight:700;color:var(--text)}
.detail__body{margin-bottom:40px;line-height:1.8;font-size:1.02rem;color:var(--text-secondary)}
.detail__body img{border-radius:var(--radius-lg);margin:20px 0}
.detail__pager{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
  padding:24px 0;
  border-top:1px solid var(--border-light);
  font-size:0.9rem;
  color:var(--text-muted);
}
.detail__pager a{color:var(--orange)}
.related-title{font-size:1.3rem;font-weight:700;margin-bottom:20px}
.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

/* ============================================================
   Tabs
   ============================================================ */
.tabs{
  display:flex;
  gap:0;
  border-bottom:2px solid var(--border-light);
  margin-bottom:24px;
}
.tab-btn{
  padding:14px 24px;
  font-size:0.95rem;
  font-weight:600;
  color:var(--text-secondary);
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:all var(--duration) var(--ease);
}
.tab-btn:hover{color:var(--orange)}
.tab-btn.active{color:var(--orange);border-bottom-color:var(--orange)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ============================================================
   Contact Grid
   ============================================================ */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 24px;
}
.contact-info__item{
  display:flex;
  gap:16px;
  padding:16px 0;
}
.contact-info__icon{
  width:48px;
  height:48px;
  border-radius:var(--radius);
  background:var(--orange-50);
  color:var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  flex-shrink:0;
}
.contact-info__label{font-size:0.85rem;color:var(--text-muted);margin-bottom:4px}
.contact-info__value{font-size:1rem;font-weight:600;color:var(--text)}

.contact-form-card{
  background:var(--bg-card);
  border-radius:var(--radius-xl);
  padding:36px;
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-md);
}

/* ============================================================
   Filter Bar
   ============================================================ */
.filter-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 0;
  flex-wrap:wrap;
}
.filter-bar a{
  padding:8px 18px;
  border-radius:var(--radius-full);
  font-size:0.88rem;
  font-weight:500;
  color:var(--text-secondary);
  transition:all var(--duration) var(--ease);
  border:1px solid transparent;
}
.filter-bar a:hover{color:var(--orange);background:var(--orange-50)}
.filter-bar a.active{
  background:var(--orange);
  color:#fff;
  border-color:var(--orange);
}

/* ============================================================
   Search Page
   ============================================================ */
.search-box{
  padding:40px 24px;
  text-align:center;
}
.search-form-row{
  display:flex;
  gap:12px;
  max-width:600px;
  margin:0 auto;
}
.search-input-wrap{
  flex:1;
  position:relative;
}
.search-input-wrap i{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
}
.search-input-wrap input{
  width:100%;
  padding:14px 16px 14px 44px;
  border:2px solid var(--border);
  border-radius:var(--radius-full);
  font-size:0.95rem;
  background:var(--bg);
  transition:all var(--duration) var(--ease);
}
.search-input-wrap input:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-100)}

.search-result-item{
  display:flex;
  gap:20px;
  padding:20px;
  border:1px solid var(--border-light);
  border-radius:var(--radius-lg);
  margin-bottom:14px;
  transition:all var(--duration) var(--ease);
  cursor:pointer;
}
.search-result-item:hover{border-color:var(--orange-100);box-shadow:var(--shadow-md)}
.search-result-item__thumb{
  width:160px;
  height:110px;
  border-radius:var(--radius);
  overflow:hidden;
  flex-shrink:0;
}
.search-result-item__thumb img{width:100%;height:100%;object-fit:cover}
.search-result-item__info{flex:1}
.search-result-item__title{font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:6px}
.search-result-item__date{font-size:0.82rem;color:var(--text-muted);margin-bottom:8px}
.search-result-item__desc{font-size:0.9rem;color:var(--text-secondary);line-height:1.5}

/* ============================================================
   Music Note Animations
   ============================================================ */
@keyframes float-note{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(5deg)}}
@keyframes pulse-orange{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0.4)}50%{box-shadow:0 0 0 15px rgba(249,115,22,0)}}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.float-note{animation:float-note 3s ease-in-out infinite}
.pulse-orange{animation:pulse-orange 2s infinite}

/* ============================================================
   AOS Overrides
   ============================================================ */
[data-aos]{transition-timing-function:var(--ease)}

/* ============================================================
   租赁套餐卡片网格（plans.html）
   ★ 内联 4 列网格在手机宽度下会溢出，改为类控制并响应式
   ============================================================ */
.plans-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-bottom:48px;
}
@media (max-width:1024px){
  .plans-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .plans-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* 套餐卡片（plans.html，内联样式重构为类，支持响应式压缩） */
.plan-card{
  background:var(--bg-card);
  border:2px solid var(--border-light);
  border-radius:var(--radius-xl);
  padding:32px 20px;
  text-align:center;
  transition:all 0.3s var(--ease);
}
.plan-card--hot{
  background:var(--orange-50);
  border-color:var(--orange);
  position:relative;
}
.plan-card__badge{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--orange);
  color:#fff;
  padding:4px 14px;
  border-radius:var(--radius-full);
  font-size:0.75rem;
  font-weight:700;
}
.plan-card__icon{font-size:2rem;color:var(--orange);margin-bottom:14px;display:block}
.plan-card__name{font-weight:800;margin-bottom:6px}
.plan-card__price{color:var(--orange);font-size:1.5rem;font-weight:900}
.plan-card__price span{font-size:0.9rem;font-weight:400;color:var(--text-muted)}
.plan-card__note{font-size:0.85rem;color:var(--text-muted);margin-top:6px}
@media (max-width:520px){
  .plan-card{padding:18px 10px}
  .plan-card__icon{font-size:1.4rem;margin-bottom:10px}
  .plan-card__name{font-size:0.95rem;margin-bottom:4px}
  .plan-card__price{font-size:1.1rem}
  .plan-card__note{font-size:0.72rem;margin-top:4px}
}

/* ★ 正文网格（DB 内容，minmax 280px 在 320px 溢出 8px）：小屏强制单列 */
@media (max-width:520px){
  .detail__body div[style*="minmax(280px"]{grid-template-columns:1fr!important;margin:20px 0}
}

/* ============================================================
   表单双列行（booking.html）
   ★ 手机小屏改为单列，避免输入框过挤
   ============================================================ */
.form-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:520px){
  .form-row-2{grid-template-columns:1fr}
}

/* ============================================================
   Responsive (768px breakpoint)
   ============================================================ */
@media (max-width: 1199px) {
  /* ★ Header: 桌面导航（logo+9项+CTA）需约1306px视口才能完整放下，
     1199px 以下统一切换为汉堡菜单（移动端布局），消除向右溢出 */
  .header__nav{display:none}
  .header__cta{display:none}
  .hamburger{display:flex}
  .header__inner{padding:0 16px}
  .header__logo-name{font-size:1rem}
  .header__logo-sub{display:none}
  .header__logo-icon{width:36px;height:36px;font-size:1rem}
  .header__actions{gap:8px}
}

@media (min-width: 1200px) and (max-width: 1305px) {
  /* ★ Header: 1200-1305px 桌面导航比容器宽约 4-68px，小幅收紧间距使其放下；
     ≥1306px 不生效，保持原桌面外观 */
  .header__inner{padding:0 20px}
  .header__nav{gap:2px}
  .header__nav-link,
  .header__nav-item > a{padding:8px 11px}
}

@media (max-width: 1024px) {
  :root{--section-gap:56px}

  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .adv-grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .process::before{left:15%;right:15%}
  .hero{height:420px}
  .hero__title{font-size:2.2rem}
  .stats{grid-template-columns:repeat(2,1fr);gap:12px}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .detail__params{grid-template-columns:repeat(2,1fr)}
  .page-layout{grid-template-columns:1fr}
  .sidebar{position:static}
}

@media (max-width: 768px) {
  :root{
    --header-h:64px;
    --section-gap:48px;
    --container-max:100%;
  }
  .section-title{font-size:1.6rem}
  .hero{height:360px}
  .hero__title{font-size:1.8rem}
  .hero__subtitle{font-size:1rem}
  .hero__actions{flex-direction:column;align-items:center}
  .stats{grid-template-columns:repeat(2,1fr);margin:0 16px}
  .stat-item__number{font-size:2rem}
  .cat-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .cat-card__icon{width:60px;height:60px;font-size:1.5rem}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .story-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  /* ★ 用户故事列表页：一行一个（首页「音乐梦想」仍三列） */
  .story-grid.story-grid--list{grid-template-columns:1fr;gap:16px}
  .adv-grid{grid-template-columns:1fr}
  .process{flex-direction:column;align-items:center;gap:24px}
  .process::before{display:none}
  .process-step{display:flex;align-items:center;gap:16px;text-align:left;width:100%}
  .process-step__num{width:56px;height:56px;font-size:1.3rem;margin-bottom:0;flex-shrink:0}
  .footer__grid{grid-template-columns:1fr;gap:32px}
  /* ★ 快速链接：手机端改横向一行（自动换行），不再竖向列表 */
  .footer__links{display:flex;flex-wrap:wrap;gap:2px 18px}
  .footer__links a{display:inline-block;padding:5px 0}
  /* ★ Sidebar「乐器中心」：手机端默认收起分类列表，点标题展开 */
  .sidebar__title{cursor:pointer;display:flex;align-items:center;justify-content:space-between}
  .sidebar__toggle{transition:transform var(--duration) var(--ease);font-size:0.75rem;color:var(--text-muted)}
  .sidebar__nav{max-height:0;overflow:hidden;transition:max-height var(--duration-slow) var(--ease)}
  .sidebar.active .sidebar__nav{max-height:800px}
  .sidebar.active .sidebar__toggle{transform:rotate(180deg)}
  .footer__bottom-inner{flex-direction:column;text-align:center}
  .cta-section__title{font-size:1.6rem}
  .inner-banner{height:220px}
  .inner-banner__title{font-size:1.6rem}
  .related-grid{grid-template-columns:1fr}
  .detail__params{grid-template-columns:1fr}
  .detail__pager{grid-template-columns:1fr;text-align:center}
  .tabs{overflow-x:auto}
  .tab-btn{padding:12px 16px;font-size:0.88rem;white-space:nowrap}
  .search-result-item{flex-direction:column}
  .search-result-item__thumb{width:100%;height:180px}
}

@media (max-width: 520px) {
  /* ★ Cat-grid「探索你的音乐」：手机端保持一行三个，把卡片整体压缩
     （小图标/小内边距/小字号），三列在 320-520px 都能放下且更紧凑 */
  .cat-grid{gap:10px}
  .cat-card{padding:18px 10px}
  .cat-card__icon{width:44px;height:44px;font-size:1.15rem;margin-bottom:10px}
  .cat-card__name{font-size:0.9rem;margin-bottom:4px}
  .cat-card__price{font-size:0.72rem}
  /* ★ Adv-grid「为什么选择」：手机端四个并排一行，紧凑小卡片（说明文字隐藏防挤爆） */
  .adv-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .adv-card{padding:16px 4px}
  .adv-card__icon{width:36px;height:36px;font-size:1rem;margin-bottom:8px}
  .adv-card__title{font-size:0.8rem;margin-bottom:0}
  .adv-card__desc{display:none}
  /* ★ Story「音乐梦想」：手机端三卡并排更紧凑，压缩底部引用文字 */
  .story-card__info{padding:10px 8px}
  .story-card__quote{font-size:0.62rem;margin-bottom:3px;line-height:1.35}
  .story-card__name{font-size:0.58rem}
  /* ★ 用户故事列表页一行一个，卡片大，引用文字恢复正常大小 */
  .story-grid--list .story-card__info{padding:28px 20px}
  .story-grid--list .story-card__quote{font-size:1rem;margin-bottom:6px;line-height:1.5}
  .story-grid--list .story-card__name{font-size:0.85rem}
}

@media (max-width: 420px) {
  /* ★ Stats: 320-420px 两列网格放不下 2.5rem 数字会向右溢出，收紧内边距与字号 */
  .stats{padding:24px 12px;gap:10px}
  .stat-item{padding:12px 6px}
  .stat-item__number{font-size:1.75rem}
}

@media (min-width: 1200px) {
  .mobile-nav,.mobile-nav__overlay{display:none!important}
}