/* R40 搬家/货运/物流服务 · P0+P1 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Inter', sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.55;
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

body[data-theme='vibrant'] { --primary:#FF6B35; --primary-light:#FFF3E0; --accent:#E55A2B; --bg:#F5F5F5; --bg-card:#FFF; --text:#0A1628; --text-light:#64748B; --border:#FFDCC8; --gold:#F59E0B; }
body[data-theme='techblue'] { --primary:#1E40AF; --primary-light:#EFF6FF; --accent:#1D4ED8; --bg:#F8FAFC; --bg-card:#FFF; --text:#0F172A; --text-light:#64748B; --border:#BFDBFE; --gold:#F59E0B; }
body[data-theme='minimal'] { --primary:#111827; --primary-light:#F9FAFB; --accent:#374151; --bg:#FAFAFA; --bg-card:#FFF; --text:#111827; --text-light:#6B7280; --border:#E5E7EB; --gold:#CA8A04; }
body[data-theme='naturegreen'] { --primary:#166534; --primary-light:#F0FDF4; --accent:#15803D; --bg:#F0FDF4; --bg-card:#FFF; --text:#14532D; --text-light:#4B5563; --border:#BBF7D0; --gold:#CA8A04; }
body[data-theme='warmbrown'] { --primary:#8B4513; --primary-light:#FFF8F0; --accent:#A0522D; --bg:#FFF8F0; --bg-card:#FFF; --text:#5D4037; --text-light:#795548; --border:#FFCCBC; --gold:#D97706; }
body[data-theme='brandred'] { --primary:#DC2626; --primary-light:#FEF2F2; --accent:#B91C1C; --bg:#FEF2F2; --bg-card:#FFF; --text:#7F1D1D; --text-light:#991B1B; --border:#FECACA; --gold:#F59E0B; }

.page { max-width: 960px; margin: 0 auto; }
.section { padding: 2rem 1rem; }
.section__title { font-size: 1.25rem; font-weight: 800; margin-bottom: .25rem; }
.section__sub { font-size: .85rem; color: var(--text-light); margin-bottom: 1.25rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .7rem 1.25rem; border-radius: 8px; font-weight: 600; font-size: .88rem;
  border: none; cursor: pointer; background: var(--primary); color: #fff; transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.btn-outline { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-outline-light { background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.7); color: #fff; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: #fff; }

/* Hero */
.hero { position: relative; min-height: 72vh; display: flex; align-items: center; color: #fff; overflow: hidden; border-radius: 0 0 1.25rem 1.25rem; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,22,40,.82), rgba(0,0,0,.45)); }
.hero__content { position: relative; z-index: 1; padding: 2.5rem 1.25rem 3rem; max-width: 960px; margin: 0 auto; width: 100%; }
.hero__brand { font-size: .8rem; opacity: .9; margin-bottom: .35rem; letter-spacing: .05em; }
.hero__title { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 900; line-height: 1.2; margin-bottom: .5rem; }
.hero__tagline { font-size: .9rem; opacity: .92; max-width: 22rem; margin-bottom: 1rem; }
.hero__promises { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.25rem; }
.hero__promise { font-size: .72rem; padding: .35rem .65rem; background: rgba(255,255,255,.14); border-radius: 999px; backdrop-filter: blur(4px); }
.hero__btns { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.5rem; }
.hero__scroll { font-size: .78rem; opacity: .75; }

/* Trust */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-card { text-align: center; padding: 1rem .5rem; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); }
.trust-card__val { font-size: 1.6rem; font-weight: 900; color: var(--primary); font-variant-numeric: tabular-nums; }
.trust-card__lbl { font-size: .72rem; color: var(--text-light); margin-top: .2rem; }
.trust-platforms { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.trust-platform { padding: .45rem .75rem; background: var(--primary-light); border-radius: 8px; font-size: .75rem; }

/* Calculator */
.calc-wizard { background: var(--bg-card); border-radius: 16px; border: 1px solid var(--border); overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.calc-steps { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--primary-light); border-bottom: 1px solid var(--border); }
.calc-step { padding: .75rem .35rem; text-align: center; cursor: pointer; border: none; background: transparent; color: var(--text-light); }
.calc-step.active { background: var(--bg-card); color: var(--primary); font-weight: 700; }
.calc-step.done { color: var(--primary); opacity: .7; }
.calc-step__num { display: block; font-size: .7rem; font-weight: 800; }
.calc-step__lbl { font-size: .68rem; }
.calc-panel { padding: 1.25rem; }
.calc-panel__title { font-size: .95rem; font-weight: 700; margin-bottom: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
.form-row--3 { grid-template-columns: 1fr 1fr auto; align-items: end; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--text-light); }
input, select, textarea { padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); }
.switch-label { flex-direction: row; align-items: center; gap: .45rem; font-size: .82rem; color: var(--text); }
.room-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.room-tab { padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: .8rem; }
.room-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.item-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .item-grid { grid-template-columns: repeat(3, 1fr); } }
.item-chip { display: flex; flex-direction: column; gap: .15rem; padding: .65rem; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; font-size: .78rem; transition: border-color .2s, background .2s; }
.item-chip input { position: absolute; opacity: 0; pointer-events: none; }
.item-chip.active { border-color: var(--primary); background: var(--primary-light); }
.item-chip small { color: var(--text-light); font-size: .68rem; }
.calc-summary { font-size: .85rem; margin-bottom: 1rem; padding: .65rem; background: var(--primary-light); border-radius: 8px; }
.calc-nav { display: flex; gap: .65rem; flex-wrap: wrap; }
.calc-nav .btn { flex: 1; min-width: 120px; }
.vehicle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .vehicle-grid { grid-template-columns: repeat(3, 1fr); } }
.vehicle-card { position: relative; padding: .85rem .65rem; border: 2px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; text-align: center; transition: transform .2s, border-color .2s, box-shadow .2s; }
.vehicle-card.selected { border-color: var(--primary); transform: scale(1.02); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.vehicle-card.recommended:not(.selected) { border-color: var(--gold); }
.vehicle-card__badge { position: absolute; top: .35rem; right: .35rem; font-size: .6rem; background: var(--gold); color: #fff; padding: .1rem .35rem; border-radius: 4px; }
.vehicle-card__emoji { font-size: 1.5rem; display: block; margin-bottom: .25rem; }
.vehicle-card__name { font-weight: 700; font-size: .85rem; display: block; }
.vehicle-card__meta { font-size: .68rem; color: var(--text-light); }
.vehicle-detail { font-size: .82rem; padding: .65rem; background: var(--bg); border-radius: 8px; margin-bottom: .75rem; }
.calc-insurance { margin-bottom: 1rem; }
.quote-main { font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 900; color: var(--primary); text-align: center; margin: .5rem 0; }
.quote-online { text-align: center; font-size: .88rem; margin-bottom: 1rem; color: var(--text-light); }
.quote-lines { list-style: none; margin-bottom: 1.25rem; }
.quote-lines li { display: flex; justify-content: space-between; padding: .45rem 0; border-bottom: 1px dashed var(--border); font-size: .82rem; }

/* Promises */
.promise-grid { display: grid; gap: .85rem; }
@media (min-width: 640px) { .promise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .promise-grid { grid-template-columns: repeat(4, 1fr); } }
.promise-card { padding: 1.15rem; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); animation: fadeUp .5s ease both; }
.promise-card__icon { font-size: 2rem; margin-bottom: .5rem; }
.promise-card h3 { font-size: .95rem; margin-bottom: .35rem; }
.promise-card p { font-size: .78rem; color: var(--text-light); line-height: 1.5; }
.promise-card__hl { display: inline-block; margin-top: .5rem; font-size: .72rem; font-weight: 700; color: var(--gold); background: rgba(245,158,11,.12); padding: .2rem .5rem; border-radius: 4px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Process */
.process-steps { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1rem; }
.process-step { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; font-size: .72rem; min-width: 4.5rem; }
.process-step.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 700; }
.process-step__n { font-size: .85rem; font-weight: 800; }
.process-detail { padding: 1.15rem; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); }
.process-detail__icon { font-size: 2rem; }
.process-detail h3 { margin: .5rem 0 .35rem; font-size: 1rem; }
.process-detail p { font-size: .85rem; color: var(--text-light); line-height: 1.6; }

/* Reviews */
.review-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card { padding: 1rem; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); }
.review-card__route { font-size: .72rem; color: var(--primary); font-weight: 600; margin: .35rem 0; }
.review-card__text { font-size: .82rem; line-height: 1.55; margin-bottom: .5rem; }
.review-card__name { font-size: .75rem; color: var(--text-light); }

/* FAQ */
.faq-search { width: 100%; padding: .65rem .85rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 1rem; }
.faq-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: .5rem; overflow: hidden; background: #fff; }
.faq-q { width: 100%; text-align: left; padding: .85rem 1rem; border: none; background: transparent; cursor: pointer; font-size: .85rem; font-weight: 600; }
.faq-q span { color: var(--primary); font-size: .72rem; margin-right: .35rem; }
.faq-a { padding: 0 1rem 1rem; font-size: .82rem; color: var(--text-light); line-height: 1.6; }
.empty { text-align: center; color: var(--text-light); padding: 2rem; font-size: .85rem; }

/* Booking */
.booking-steps { display: flex; gap: .5rem; margin-bottom: 1rem; font-size: .75rem; }
.booking-steps span { flex: 1; text-align: center; padding: .4rem; border-radius: 6px; background: var(--bg); color: var(--text-light); }
.booking-steps span.active { background: var(--primary); color: #fff; font-weight: 700; }
.booking-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.15rem; display: grid; gap: .75rem; }
.booking-done p { font-size: .88rem; margin-bottom: .35rem; }

.page-footer { text-align: center; padding: 2rem 1rem 1rem; font-size: .78rem; color: var(--text-light); }
.page-footer__sub { margin-top: .25rem; font-size: .68rem; opacity: .85; }

/* Panels */
.scene-panel, .theme-panel { position: fixed; z-index: 900; }
.scene-panel { left: .75rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.theme-panel { right: .75rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.scene-panel__toggle, .theme-panel__toggle {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bg-card); box-shadow: 0 4px 16px rgba(0,0,0,.15); font-size: 1.2rem;
}
.scene-panel__list, .theme-panel__list {
  position: absolute; bottom: 52px; background: var(--bg-card); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .5rem; min-width: 140px;
}
.scene-panel__list { left: 0; }
.theme-panel__list { right: 0; display: flex; flex-wrap: wrap; gap: .35rem; width: 160px; }
.scene-panel__list button { display: block; width: 100%; text-align: left; padding: .45rem .65rem; border: none; background: transparent; cursor: pointer; font-size: .78rem; border-radius: 6px; }
.scene-panel__list button.active, .theme-panel__list button.active { background: var(--primary-light); color: var(--primary); font-weight: 700; }
.theme-panel__list button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); background: var(--swatch); cursor: pointer; padding: 0; }

.contact-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
  background: rgba(0,0,0,.88); padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
}
.contact-footer__btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; max-width: 960px; margin: 0 auto; }
.contact-footer__cta { background: #c41e1e !important; color: #fff !important; text-align: center; padding: .6rem .35rem; border-radius: 6px; font-size: .78rem; font-weight: 700; }
.contact-footer__btn { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; padding: .6rem .35rem; border-radius: 6px; font-size: .78rem; cursor: pointer; text-align: center; }
.contact-footer__brand { text-align: center; font-size: .62rem; color: rgba(255,255,255,.55); margin-top: .4rem; }