/* roulang page: index */
:root {
  --bg: #fbf6ec;
  --bg-soft: #f4ecdd;
  --surface: #fffdf8;
  --surface-2: #fff8e9;
  --ink: #211c16;
  --ink-2: #3d342a;
  --muted: #756b5e;
  --line: #e8dcc9;
  --brand: #f3b63c;
  --brand-soft: #ffe2a1;
  --brand-deep: #a86908;
  --coral: #ef6650;
  --mint: #35a98b;
  --night: #1d1812;
  --night-2: #2b241c;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --shadow-sm: 0 4px 14px rgba(42, 34, 22, .06);
  --shadow-md: 0 16px 40px rgba(42, 34, 22, .10);
  --shadow-lg: 0 28px 70px rgba(42, 34, 22, .16);
  --container: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(243, 182, 60, .16), transparent 34%),
    radial-gradient(circle at 95% 18%, rgba(53, 169, 139, .10), transparent 28%),
    var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
ul,
ol {
  margin-top: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: var(--brand-soft);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid rgba(243, 182, 60, .62);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(var(--container), 92%);
  margin-left: auto;
  margin-right: auto;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 246, 236, .88);
  border-bottom: 1px solid rgba(232, 220, 201, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav-shell {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 78px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), #ffd87a);
  color: var(--ink);
  font-size: 21px;
  font-weight: 900;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08), 0 7px 16px rgba(243, 182, 60, .22);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-text strong {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--ink);
}

.brand-text small {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--muted);
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 13px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

.nav-link:hover {
  background: rgba(243, 182, 60, .16);
  color: var(--ink);
  transform: translateY(-1px);
}

.nav-link.is-active {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
}

.search-box i {
  position: absolute;
  left: 14px;
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
}

.search-box input {
  width: 202px;
  height: 40px;
  margin: 0;
  padding: 0 14px 0 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, .9);
  color: var(--ink);
  font-size: 12px;
  transition: width .25s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.search-box input::placeholder {
  color: #9a8f80;
}

.search-box input:focus {
  width: 238px;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(243, 182, 60, .15);
  outline: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.btn i {
  font-size: 12px;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-brand {
  background: var(--brand);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(243, 182, 60, .30);
}

.btn-brand:hover {
  background: #ffc44f;
  box-shadow: 0 12px 26px rgba(243, 182, 60, .36);
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--brand);
  background: var(--surface-2);
}

.btn-dark {
  background: var(--ink);
  color: #fff;
}

.btn-sm {
  min-height: 38px;
  padding: 0 14px;
  font-size: 12px;
}

.btn-block {
  width: 100%;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: 54px 0 34px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, .72);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(239, 102, 80, .15);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.82); opacity: .7; }
}

.hero-brand {
  margin: 18px 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.hero h1 {
  margin: 10px 0 18px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.hero h1 .hl {
  position: relative;
  z-index: 0;
  background: linear-gradient(transparent 62%, rgba(243, 182, 60, .58) 62%);
}

.hero-sub {
  max-width: 620px;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.78;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
}

.hero-stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-stats strong {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.hero-stats span {
  color: var(--muted);
  font-size: 11px;
}

.hero-visual {
  position: relative;
  padding: 10px;
}

.cover-board {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}

.cover {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 170px;
  padding: 18px;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.cover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.cover::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -58px;
  right: -48px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}

.cover::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -64px;
  left: -38px;
  width: 150px;
  height: 150px;
  border: 22px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
}

.cover-a {
  grid-row: span 2;
  min-height: 370px;
  background: linear-gradient(160deg, #ff9278 0%, #ef6650 48%, #a93c31 100%);
}

.cover-b {
  background: linear-gradient(150deg, #41536d, #1d2b3c 72%);
}

.cover-c {
  color: var(--ink);
  background: linear-gradient(150deg, #f9d77f, #eaa32c 66%, #c2770e 100%);
}

.cover-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cover-badge {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  backdrop-filter: blur(6px);
}

.cover-c .cover-badge {
  background: rgba(255, 255, 255, .38);
}

.cover-title {
  margin-top: auto;
  padding-top: 26px;
  font-size: 29px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.cover-a .cover-title {
  font-size: 44px;
}

.cover-sub {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.6;
  opacity: .88;
}

.cover-play {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
  transition: transform .2s var(--ease);
}

.cover-play::before {
  content: "";
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid currentColor;
}

.cover:hover .cover-play {
  transform: scale(1.1);
}

.float-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  box-shadow: var(--shadow-md);
  animation: floaty 4s ease-in-out infinite;
}

.float-note i {
  color: var(--coral);
}

.float-note-a {
  top: 3%;
  left: -18px;
}

.float-note-b {
  right: -4px;
  bottom: 2%;
  animation-delay: 1.4s;
}

.float-note-b i {
  color: var(--mint);
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Sections */
.section {
  position: relative;
  padding: 64px 0;
}

.section-soft {
  background: var(--bg-soft);
  border-top: 1px solid rgba(232, 220, 201, .68);
  border-bottom: 1px solid rgba(232, 220, 201, .68);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 30px;
}

.section-head.compact {
  margin-bottom: 18px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
}

.kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.kicker-light {
  color: var(--brand);
}

.section-title {
  margin: 0 0 8px;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -.025em;
}

.section-desc {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: gap .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.text-link:hover {
  gap: 12px;
  color: var(--brand-deep);
  border-color: var(--brand-deep);
}

/* Tabs and media */
.tabs-bar {
  display: flex;
  gap: 8px;
  padding-bottom: 4px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs-bar::-webkit-scrollbar {
  display: none;
}

button.tab-btn {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, .72);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

button.tab-btn:hover {
  border-color: var(--brand);
  background: var(--surface-2);
  color: var(--brand-deep);
  transform: translateY(-1px);
}

button.tab-btn.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
  animation: fadeIn .28s var(--ease);
}

.tabs-content.is-searching .tab-panel {
  display: block;
  animation: fadeIn .28s var(--ease);
}

.tabs-content.is-searching .tab-panel + .tab-panel {
  margin-top: 26px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.media-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.media-card:hover {
  transform: translateY(-5px);
  border-color: #dcc9aa;
  box-shadow: var(--shadow-md);
}

.media-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  overflow: hidden;
}

.media-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .36), transparent 34%);
  pointer-events: none;
}

.thumb-1 { background: linear-gradient(135deg, #f7c35c, #e9824f); }
.thumb-2 { background: linear-gradient(135deg, #8bc7b7, #2f7d76); }
.thumb-3 { background: linear-gradient(135deg, #9b9be0, #5c56b5); }
.thumb-4 { background: linear-gradient(135deg, #f3a6b8, #c85076); }
.thumb-5 { background: linear-gradient(135deg, #a9c5e8, #4c6f9c); }
.thumb-6 { background: linear-gradient(135deg, #f5d68c, #c98c2c); }
.thumb-7 { background: linear-gradient(135deg, #b9c8a0, #5d7d45); }
.thumb-8 { background: linear-gradient(135deg, #d8b5e8, #8655a3); }
.thumb-9 { background: linear-gradient(135deg, #f0b58f, #b5643b); }

.thumb-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  backdrop-filter: blur(6px);
}

.thumb-duration {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .52);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.thumb-word {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .20);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  pointer-events: none;
}

.media-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px 17px 18px;
}

.media-title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
}

.media-desc {
  flex: 1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.66;
}

.media-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 10px;
}

.media-meta span:last-child {
  color: var(--brand-deep);
  font-weight: 800;
}

/* Category cards */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cat-card {
  --accent: var(--brand);
  --accent-soft: #ffe7b4;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  padding: 26px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.cat-card::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: var(--accent-soft);
  opacity: .66;
  pointer-events: none;
}

.cat-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.cat-yellow {
  --accent: var(--brand);
  --accent-soft: #ffe7b4;
}

.cat-coral {
  --accent: var(--coral);
  --accent-soft: #ffd7cf;
}

.cat-mint {
  --accent: var(--mint);
  --accent-soft: #c8f0e4;
}

.cat-icon {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 20px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.cat-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.cat-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.72;
}

.mini-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 12px;
}

.mini-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-list li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 900;
}

.cat-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  transition: gap .2s var(--ease), color .2s var(--ease);
}

.cat-card:hover .cat-link {
  gap: 12px;
  color: var(--accent);
}

/* Deep panel */
.deep-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  padding: 44px;
  overflow: hidden;
  background: var(--night);
  border-radius: var(--radius-xl);
  color: #f8f1e5;
  box-shadow: var(--shadow-lg);
}

.deep-panel::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -60px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 182, 60, .26), transparent 66%);
  pointer-events: none;
}

.deep-panel::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -140px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  border: 46px solid rgba(255, 255, 255, .035);
  pointer-events: none;
}

.deep-copy,
.deep-stats {
  position: relative;
  z-index: 1;
}

.deep-copy h2 {
  margin: 8px 0 16px;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.deep-copy p {
  margin: 0 0 24px;
  color: #cfc5b6;
  font-size: 14px;
  line-height: 1.82;
}

.deep-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.stat-card:hover {
  background: rgba(255, 255, 255, .10);
  transform: translateY(-3px);
}

.stat-card strong {
  color: var(--brand);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}

.stat-card span {
  color: #bdb3a4;
  font-size: 11px;
  line-height: 1.55;
}

.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.reason-card {
  display: flex;
  gap: 14px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.reason-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--brand-deep);
  font-size: 16px;
}

.reason-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 900;
}

.reason-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.68;
}

/* Scene scroll */
.scene-scroll {
  display: flex;
  gap: 18px;
  padding: 4px 4px 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.scene-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.scene-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.scene-thumb {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 132px;
  padding: 14px;
  color: #fff;
}

.scene-1 { background: linear-gradient(135deg, #f7c35c, #e9824f); }
.scene-2 { background: linear-gradient(135deg, #8bc7b7, #2f7d76); }
.scene-3 { background: linear-gradient(135deg, #f3a6b8, #c85076); }
.scene-4 { background: linear-gradient(135deg, #a9c5e8, #4c6f9c); }
.scene-5 { background: linear-gradient(135deg, #9b9be0, #5c56b5); }

.scene-thumb::after {
  content: "";
  position: absolute;
  top: -44px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}

.scene-ep {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .24);
  font-size: 10px;
  font-weight: 900;
  backdrop-filter: blur(6px);
}

.scene-time {
  position: relative;
  z-index: 1;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.scene-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--brand-deep);
  font-size: 10px;
  font-weight: 900;
}

.scene-body h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
}

.scene-body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.66;
}

.scene-body a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 4px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  transition: gap .2s var(--ease), color .2s var(--ease);
}

.scene-body a:hover {
  gap: 10px;
  color: var(--coral);
}

/* Timeline */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 10px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.step {
  position: relative;
  padding-right: 22px;
}

.step::before {
  content: "";
  position: absolute;
  top: -31px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px var(--bg);
}

.step-num {
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
}

.step h3 {
  margin: 6px 0 8px;
  font-size: 16px;
  font-weight: 900;
}

.step p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.step-tag {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 800;
}

.timeline-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}

.timeline-note i {
  color: var(--brand-deep);
}

/* Community */
.community-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 24px;
  align-items: start;
}

.profile-card {
  position: relative;
  padding: 28px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--coral), var(--mint));
}

.profile-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--brand), #ffd87a);
  color: var(--ink);
  font-size: 28px;
  font-weight: 900;
}

.profile-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
}

.profile-card p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.72;
}

.profile-stats {
  display: flex;
  gap: 28px;
  padding: 14px 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  margin-bottom: 18px;
}

.profile-stats strong {
  display: block;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.2;
}

.profile-stats span {
  color: var(--muted);
  font-size: 10px;
}

.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.review-stars {
  color: var(--brand-deep);
  font-size: 12px;
  letter-spacing: 2px;
}

.review-card p {
  flex: 1;
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.76;
}

.review-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 900;
}

.review-user strong {
  display: block;
  font-size: 11px;
}

.review-user span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

/* FAQ */
.faq-wrap {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 44px;
  align-items: start;
}

.faq-intro {
  position: sticky;
  top: 100px;
}

.faq-intro h2 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.faq-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.78;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-item {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease);
}

.faq-item:hover {
  border-color: #dcc9aa;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--brand-deep);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s var(--ease);
}

.faq-item[open] summary {
  color: var(--brand-deep);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.82;
}

.faq-answer p {
  margin: 0;
}

/* CTA */
.cta-band {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  padding: 40px 44px;
  overflow: hidden;
  background: var(--night);
  border-radius: var(--radius-xl);
  color: #fff;
}

.cta-band::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -60px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 182, 60, .30), transparent 66%);
  pointer-events: none;
}

.cta-band::after {
  content: "";
  position: absolute;
  bottom: -90px;
  left: 20%;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 26px solid rgba(255, 255, 255, .045);
  pointer-events: none;
}

.cta-band h2 {
  position: relative;
  z-index: 1;
  margin: 6px 0 10px;
  color: #fff;
  font-size: clamp(1.6rem, 2.7vw, 2.2rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.cta-band p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #c9bfb0;
  font-size: 12px;
  line-height: 1.8;
}

.cta-form-wrap {
  position: relative;
  z-index: 1;
}

.subscribe-form {
  display: flex;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}

.subscribe-form input {
  flex: 1;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  outline: none;
}

.subscribe-form input::placeholder {
  color: #a99f91;
}

.form-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  color: #a99f91;
  font-size: 10px;
}

/* Footer */
.site-footer {
  padding: 52px 0 22px;
  background: #17130f;
  color: #cfc5b6;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 40px;
  padding-bottom: 36px;
}

.footer-brand .brand {
  margin-bottom: 14px;
}

.footer-brand .brand-text strong {
  color: #fff;
}

.footer-brand .brand-text small {
  color: #9d9386;
}

.footer-brand p {
  max-width: 430px;
  margin: 0;
  color: #a99f91;
  font-size: 12px;
  line-height: 1.82;
}

.footer-col h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}

.footer-col a,
.footer-col p {
  display: block;
  width: fit-content;
  margin: 0 0 8px;
  color: #b8ae9f;
  font-size: 11px;
  line-height: 1.8;
  transition: color .2s var(--ease);
}

.footer-col a:hover {
  color: var(--brand);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  color: #857c70;
  font-size: 10px;
  line-height: 1.8;
}

.footer-bottom p {
  margin: 0;
}

/* Mobile bottom tabs */
.mobile-tabs {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 253, 248, .96);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(42, 34, 22, .08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.mobile-tabs .tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 2px;
  border-radius: 12px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.mobile-tabs .tab-item i {
  font-size: 17px;
}

.mobile-tabs .tab-item:hover {
  background: var(--bg-soft);
  color: var(--ink);
}

.mobile-tabs .tab-item.is-active {
  background: rgba(243, 182, 60, .14);
  color: var(--brand-deep);
}

/* Responsive */
@media (max-width: 1080px) {
  .nav-shell { gap: 14px; }
  .nav-link { padding: 9px 10px; font-size: 12px; }
  .search-box input { width: 170px; }
  .search-box input:focus { width: 200px; }
  .hero-grid { gap: 32px; }
  .cover-a .cover-title { font-size: 36px; }
  .section { padding: 52px 0; }
  .deep-panel { padding: 34px; }
  .category-grid { gap: 16px; }
  .reason-grid { gap: 14px; }
}

@media (max-width: 900px) {
  .nav-shell {
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    min-height: auto;
  }

  .nav-tools {
    margin-left: auto;
  }

  .nav-tools .search-box {
    display: none;
  }

  .nav-main {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding: 6px 0 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav-main::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    padding: 9px 12px;
    background: rgba(255, 253, 248, .72);
    border: 1px solid var(--line);
  }

  .nav-main .nav-link.is-active {
    border-color: var(--ink);
  }

  .hero {
    padding-top: 34px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }

  .media-grid {
    grid-template-columns: 1fr 1fr;
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .reason-grid {
    grid-template-columns: 1fr;
  }

  .community-grid {
    grid-template-columns: 1fr;
  }

  .faq-wrap {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .faq-intro {
    position: static;
  }

  .cta-band {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .mobile-tabs {
    display: flex;
  }

  body {
    padding-bottom: 78px;
  }

  .nav-cta {
    min-height: 36px;
    padding: 0 12px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 42px 0;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .deep-panel {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 30px 26px;
  }

  .timeline {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
  }

  .review-grid {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    gap: 22px;
  }
}

@media (max-width: 560px) {
  .container {
    width: 92%;
  }

  .brand-text small {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .hero {
    padding-top: 26px;
  }

  .hero-kicker {
    padding: 7px 11px;
    font-size: 10px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-stats {
    gap: 16px;
  }

  .hero-stats strong {
    font-size: 18px;
  }

  .cover-board {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .cover-a {
    grid-row: auto;
    grid-column: 1 / -1;
    min-height: 220px;
  }

  .cover-b,
  .cover-c {
    min-height: 150px;
  }

  .cover-title {
    font-size: 22px;
  }

  .cover-a .cover-title {
    font-size: 32px;
  }

  .cover-play {
    right: 12px;
    bottom: 12px;
    width: 38px;
    height: 38px;
  }

  .float-note {
    padding: 7px 9px;
    font-size: 9px;
  }

  .float-note-a {
    top: 8px;
    left: 8px;
  }

  .float-note-b {
    right: 8px;
    bottom: 8px;
  }

  .media-grid {
    grid-template-columns: 1fr;
  }

  .deep-panel {
    padding: 26px 20px;
    border-radius: 24px;
  }

  .deep-stats {
    grid-template-columns: 1fr 1fr;
  }

  .timeline {
    grid-template-columns: 1fr;
    row-gap: 0;
    padding-top: 0;
    border-top: 0;
  }

  .step {
    padding: 0 0 22px 26px;
    border-left: 1px solid var(--line);
  }

  .step::before {
    top: 4px;
    left: -6px;
  }

  .scene-card {
    flex-basis: 82%;
  }

  .cta-band {
    padding: 30px 20px;
    border-radius: 24px;
  }

  .subscribe-form {
    flex-direction: column;
    border-radius: 20px;
    padding: 10px;
  }

  .subscribe-form input {
    height: 44px;
  }

  .subscribe-form .btn {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 380px) {
  .hero h1 {
    font-size: 1.8rem;
  }

  .cover-a .cover-title {
    font-size: 28px;
  }
}

/* roulang page: category2 */
:root{
  --brand:#f2b21a;
  --brand-strong:#dd9605;
  --brand-soft:#fff2cf;
  --pink:#ff5f7e;
  --pink-soft:#ffe7ed;
  --ink:#1d1826;
  --ink-2:#3e3649;
  --muted:#7b7487;
  --line:#efe4d3;
  --bg:#fffbf4;
  --surface:#ffffff;
  --surface-2:#fdf4e4;
  --dark:#181220;
  --radius-xl:28px;
  --radius-lg:22px;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 2px 10px rgba(29,24,38,.06);
  --shadow-md:0 14px 32px rgba(29,24,38,.11);
  --shadow-lg:0 26px 60px rgba(29,24,38,.18);
  --container:1180px;
  --gap:clamp(16px,2vw,24px);
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.72;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.25;font-weight:800;letter-spacing:-.015em}
h1{font-size:clamp(29px,4.3vw,50px)}
h2{font-size:clamp(23px,3vw,35px)}
h3{font-size:17px}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:clamp(44px,6.5vw,86px) 0}
.section--band{background:linear-gradient(180deg,#fff6e5 0%,#fffbf4 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:730px;margin-bottom:clamp(22px,3vw,38px)}
.section-head p{margin-top:12px;color:var(--muted);font-size:15.5px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.16em;color:var(--brand-strong);margin-bottom:12px;text-transform:uppercase}
.eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--brand)}
.lead{color:var(--ink-2);font-size:16.5px;max-width:640px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;
  font-size:15px;font-weight:700;line-height:1.2;cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
}
.btn:focus-visible{outline:3px solid rgba(242,178,26,.55);outline-offset:3px}
.btn-brand{background:linear-gradient(135deg,#ffd45f,#efa100);color:#3a2a00;box-shadow:0 12px 26px rgba(239,161,0,.3)}
.btn-brand:hover{transform:translateY(-2px);color:#3a2a00;box-shadow:0 18px 34px rgba(239,161,0,.38)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
.btn-dark:hover{background:#2c2340;color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--brand);color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-sm{padding:9px 17px;font-size:13.5px}

/* ---------- 顶部导航 ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,251,244,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-shell{display:flex;align-items:center;gap:16px;min-height:76px}
.brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(140deg,#ffd75f,#eb9c00);color:#3a2a00;
  font-weight:900;font-size:19px;box-shadow:0 8px 18px rgba(235,156,0,.32);
}
.brand-text strong{display:block;font-size:15.5px;font-weight:800;letter-spacing:.01em;color:var(--ink);line-height:1.3}
.brand-text small{display:block;font-size:11px;color:var(--muted);letter-spacing:.06em}
.nav-main{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.nav-link{
  padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ink-2);
  white-space:nowrap;transition:.2s ease;
}
.nav-link:hover{background:rgba(242,178,26,.16);color:var(--ink)}
.nav-link.is-active{background:var(--ink);color:#fff;box-shadow:0 8px 18px rgba(29,24,38,.22)}
.nav-tools{display:flex;align-items:center;gap:10px}
.search-box{
  display:flex;align-items:center;gap:8px;padding:9px 15px;min-width:196px;
  background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--muted);
  transition:.2s ease;
}
.search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(242,178,26,.18)}
.search-box input{
  border:0;outline:0;background:transparent;box-shadow:none;
  margin:0;height:auto;padding:0;font-size:13.5px;color:var(--ink);width:100%;font-family:inherit;
}
.search-box input::placeholder{color:#a49cb0}
.nav-cta{white-space:nowrap}

/* ---------- 首屏 ---------- */
.hero{padding:clamp(30px,4.6vw,62px) 0 clamp(36px,5vw,64px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-160px;right:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,178,26,.20),rgba(242,178,26,0) 68%);pointer-events:none;
}
.hero::after{
  content:"";position:absolute;bottom:-180px;left:-160px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,95,126,.14),rgba(255,95,126,0) 70%);pointer-events:none;
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
  background:var(--brand-soft);color:#8a5f00;font-size:13px;font-weight:700;margin-bottom:18px;
}
.hero h1{margin-bottom:16px}
.hero h1 .hl{
  background:linear-gradient(180deg,transparent 62%,rgba(242,178,26,.55) 62%);
  padding:0 4px;border-radius:4px;
}
.hero-sub{color:var(--ink-2);font-size:16.5px;max-width:560px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);margin-top:32px;padding-top:24px;border-top:1px dashed var(--line)}
.stat strong{display:block;font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.stat span{font-size:12.5px;color:var(--muted)}

.hero-visual{position:relative}
.hero-cover{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:16/11;
  background:linear-gradient(140deg,#ffd788 0%,#f6a93f 48%,#e2703f 100%);
  box-shadow:var(--shadow-lg);
}
.hero-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,18,32,0) 34%,rgba(24,18,32,.86) 100%);
}
.hero-cover .cover-copy{position:absolute;left:22px;right:22px;bottom:20px;z-index:3;color:#fff}
.hero-cover .cover-copy strong{display:block;font-size:18px;font-weight:800;margin-bottom:4px}
.hero-cover .cover-copy span{font-size:13px;color:rgba(255,255,255,.82)}
.play{
  position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;z-index:3;border:0;cursor:pointer;
  background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 12px 28px rgba(0,0,0,.24);
  transition:.24s ease;
}
.hero-cover:hover .play{transform:scale(1.08);background:var(--brand);color:#3a2a00}
.hero-float{
  position:absolute;right:-14px;bottom:-22px;z-index:4;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 16px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:12px;
}
.hero-float i{color:var(--pink);font-size:17px}
.hero-float strong{display:block;font-size:14px;color:var(--ink)}
.hero-float span{font-size:11.5px;color:var(--muted)}

/* ---------- 甜度标签 ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(20px,3vw,32px)}
.chip{
  padding:9px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.2s ease;
}
.chip:hover{border-color:var(--brand);color:var(--ink);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 10px 20px rgba(29,24,38,.2)}

/* ---------- 片段卡片 ---------- */
.clip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.clip-card{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease;
}
.clip-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#f4dfae}
.cover{position:relative;aspect-ratio:16/10;overflow:hidden}
.cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,18,32,0) 42%,rgba(24,18,32,.7) 100%);
}
.cover .play{width:50px;height:50px;font-size:15px}
.clip-card:hover .play{transform:scale(1.1);background:var(--brand);color:#3a2a00}
.cover-tag{
  position:absolute;top:12px;left:12px;z-index:3;padding:4px 11px;border-radius:999px;
  background:rgba(24,18,32,.74);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  backdrop-filter:blur(4px);
}
.cover-tag.tag-hot{background:rgba(255,95,126,.92);color:#fff}
.cover-dur{
  position:absolute;right:12px;bottom:12px;z-index:3;padding:3px 10px;border-radius:8px;
  background:rgba(24,18,32,.74);color:#fff;font-size:11.5px;font-weight:600;
}
.clip-body{padding:18px 19px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.clip-body h3{font-size:16.5px;line-height:1.42}
.clip-body p{font-size:14px;color:var(--muted);flex:1}
.clip-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.sweetness{display:inline-flex;align-items:center;gap:5px;color:var(--pink);font-weight:700}
.sweetness i{font-size:11px}

/* ---------- 甜度排行 ---------- */
.rank-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,40px);align-items:start}
.rank-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(16px,2.4vw,28px);box-shadow:var(--shadow-sm)}
.rank-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
.rank-item:last-child{border-bottom:0;padding-bottom:0}
.rank-item:first-child{padding-top:0}
.rank-no{
  width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--brand-strong);font-weight:800;font-size:13px;
}
.rank-item:nth-child(1) .rank-no{background:linear-gradient(135deg,#ffd45f,#efa100);color:#3a2a00}
.rank-main{flex:1;min-width:0}
.rank-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.rank-top strong{font-size:14.8px;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-top span{font-size:12px;color:var(--muted);white-space:nowrap}
.rank-bar{height:7px;border-radius:99px;background:#f6eddd;overflow:hidden}
.rank-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffd45f,#f2892b)}
.rank-score{font-size:14px;font-weight:800;color:var(--brand-strong);width:34px;text-align:right}
.rank-side{display:flex;flex-direction:column;gap:14px}
.side-card{
  background:linear-gradient(150deg,#231b32,#181220);color:#e8e2f2;border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--shadow-md);
}
.side-card h3{color:#fff;font-size:17px;margin-bottom:10px}
.side-card p{font-size:14px;color:#b6aec6;line-height:1.75}
.side-card .btn{margin-top:18px}
.side-note{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.side-note h3{font-size:15.5px;margin-bottom:8px}
.side-note p{font-size:13.5px;color:var(--muted)}

/* ---------- 横向名场面 ---------- */
.rail{display:flex;gap:16px;overflow-x:auto;padding:4px 4px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:#ead9b6;border-radius:99px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail-item{
  flex:0 0 268px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;transition:transform .24s ease,box-shadow .24s ease;
}
.rail-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.rail-item .cover{aspect-ratio:16/9}
.rail-body{padding:15px 16px 17px}
.rail-body strong{display:block;font-size:15px;margin-bottom:5px;color:var(--ink)}
.rail-body span{font-size:12.5px;color:var(--muted)}

/* ---------- 角色卡 ---------- */
.role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.role-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,2.6vw,28px);transition:transform .24s ease,box-shadow .24s ease;
}
.role-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.avatar{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  font-size:19px;font-weight:800;color:#3a2a00;margin-bottom:16px;
  background:linear-gradient(140deg,#ffe08a,#f3a521);
}
.role-card:nth-child(2) .avatar{background:linear-gradient(140deg,#c6b8ff,#8a6cf0);color:#231a45}
.role-card:nth-child(3) .avatar{background:linear-gradient(140deg,#ffc0d0,#ff7c98);color:#4a0f22}
.role-card h3{font-size:17px;margin-bottom:4px}
.role-role{font-size:12.5px;color:var(--brand-strong);font-weight:700;letter-spacing:.04em;margin-bottom:10px;display:block}
.role-card p{font-size:14px;color:var(--muted);line-height:1.7}
.tag-line{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tag{
  padding:4px 11px;border-radius:999px;background:var(--surface-2);color:#8a6a1d;
  font-size:11.5px;font-weight:700;border:1px solid #f5e5c4;
}

/* ---------- 观看路径 ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);counter-reset:step}
.step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 20px;transition:transform .24s ease,box-shadow .24s ease;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.step-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:12px;background:var(--ink);color:#fff;
  font-size:13px;font-weight:800;margin-bottom:14px;
}
.step h3{font-size:15.5px;margin-bottom:7px}
.step p{font-size:13.5px;color:var(--muted);line-height:1.7}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(22px,4vw,48px);align-items:start}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.faq-item[open]{border-color:#f2dca9;box-shadow:var(--shadow-sm)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:17px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;font-size:15.2px;font-weight:700;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:11px;
  color:var(--muted);transition:transform .24s ease;flex-shrink:0;
}
.faq-item[open] summary::after{transform:rotate(180deg);color:var(--brand-strong)}
.faq-item summary:hover{color:var(--brand-strong)}
.faq-body{padding:0 22px 18px;font-size:14.5px;color:var(--muted);line-height:1.8}
.faq-aside{background:linear-gradient(160deg,#fff5de,#fff9ef);border:1px solid #f6e4bd;border-radius:var(--radius-lg);padding:clamp(22px,3vw,32px)}
.faq-aside h2{font-size:22px;margin-bottom:12px}
.faq-aside p{font-size:14.5px;color:var(--ink-2)}
.faq-aside .btn{margin-top:20px}

/* ---------- CTA ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  background:radial-gradient(circle at 82% 12%,rgba(242,178,26,.32),transparent 58%),linear-gradient(140deg,#221a31,#151019);
  padding:clamp(30px,5vw,60px);color:#fff;text-align:center;
}
.cta h2{color:#fff;font-size:clamp(23px,3.2vw,36px)}
.cta p{color:#bdb4cd;font-size:15.5px;max-width:620px;margin:14px auto 0}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.cta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.cta .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}

/* ---------- 页脚 ---------- */
.site-footer{background:var(--dark);color:#c9c1d8;margin-top:clamp(46px,6vw,90px);padding-top:clamp(40px,5.5vw,70px)}
.footer-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:clamp(24px,4vw,52px)}
.footer-brand .brand{margin-bottom:16px}
.footer-brand .brand-text strong{color:#fff}
.footer-brand .brand-text small{color:#a49ab6}
.footer-brand p{font-size:14px;color:#a49ab6;line-height:1.8;max-width:400px}
.footer-col h3{font-size:14.5px;color:#fff;margin-bottom:14px;letter-spacing:.03em}
.footer-col a{display:block;padding:5px 0;font-size:14px;color:#b3aac4}
.footer-col a:hover{color:var(--brand)}
.footer-col p{font-size:13.5px;color:#9a91ac;line-height:1.8;margin-bottom:8px}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  margin-top:clamp(28px,4vw,48px);padding-top:20px;padding-bottom:24px;
  border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#8b8299;
}

/* ---------- 移动端底部 Tab ---------- */
.tab-bar{display:none}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-visual{max-width:560px}
  .clip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rank-grid{grid-template-columns:1fr}
  .faq-wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
  .nav-main{display:none}
  .search-box{min-width:160px}
}
@media (max-width:900px){
  .nav-tools .search-box{display:none}
  .tab-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px rgba(29,24,38,.08);
  }
  .tab-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:5px 2px;border-radius:12px;font-size:10.5px;font-weight:600;color:#8b8499;
    transition:.2s ease;
  }
  .tab-item i{font-size:16px}
  .tab-item:hover{color:var(--ink)}
  .tab-item.is-active{color:var(--brand-strong);background:var(--brand-soft)}
  body{padding-bottom:74px}
  .hero-float{right:6px;bottom:-18px}
}
@media (max-width:768px){
  .nav-shell{min-height:66px;gap:10px}
  .brand-mark{width:38px;height:38px;font-size:17px;border-radius:11px}
  .brand-text strong{font-size:14px}
  .brand-text small{font-size:10px}
  .clip-grid{grid-template-columns:1fr}
  .role-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-stats{gap:22px}
  .stat strong{font-size:22px}
  .rail-item{flex:0 0 230px}
  .cta{padding:32px 20px}
}
@media (max-width:520px){
  .container{padding:0 16px}
  h1{font-size:27px}
  .hero-sub{font-size:15.2px}
  .btn{width:100%;padding:13px 18px}
  .hero-actions .btn,.cta-actions .btn{width:100%}
  .nav-cta{display:none}
  .hero-float{padding:10px 13px}
  .hero-float strong{font-size:13px}
  .rank-top strong{white-space:normal}
  .footer-bottom{flex-direction:column}
}

/* roulang page: category1 */
:root{
  --yellow:#FFC93C;
  --yellow-deep:#F2A600;
  --yellow-soft:#FFF4D2;
  --ink:#15161A;
  --ink-soft:#23252C;
  --muted:#6C717C;
  --line:#E9E7DF;
  --bg:#FFFCF5;
  --card:#FFFFFF;
  --rose:#FF5C7A;
  --mint:#20C79A;
  --radius-xl:28px;
  --radius-lg:20px;
  --radius:14px;
  --radius-sm:10px;
  --pill:999px;
  --shadow-xs:0 2px 6px rgba(21,22,26,.05);
  --shadow-sm:0 8px 22px rgba(21,22,26,.07);
  --shadow-md:0 18px 46px rgba(21,22,26,.10);
  --shadow-lg:0 30px 70px rgba(21,22,26,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0;}
a{color:inherit;text-decoration:none;transition:color .22s var(--ease);}
button{font-family:inherit;}
h1,h2,h3,h4,p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
:focus-visible{outline:3px solid rgba(255,92,122,.6);outline-offset:3px;border-radius:8px;}
::selection{background:var(--yellow);color:#231a00;}

.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px;}

/* ---------- 顶部导航 ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,252,245,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-shell{display:flex;align-items:center;gap:22px;min-height:78px;}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.brand-mark{
  width:44px;height:44px;border-radius:15px;
  background:linear-gradient(135deg,#FFD95E,#F2A600);
  display:grid;place-items:center;
  font-weight:800;font-size:20px;color:#241a00;
  box-shadow:0 8px 18px rgba(242,166,0,.32);
}
.brand-text strong{display:block;font-size:16px;line-height:1.25;letter-spacing:.2px;color:var(--ink);}
.brand-text small{display:block;font-size:11.5px;line-height:1.4;color:var(--muted);letter-spacing:.6px;}
.nav-main{display:flex;align-items:center;gap:4px;margin-left:6px;}
.nav-link{
  display:inline-block;padding:9px 15px;border-radius:var(--pill);
  font-size:14.5px;font-weight:500;color:#4b4e58;white-space:nowrap;
  transition:background .22s var(--ease),color .22s var(--ease);
}
.nav-link:hover{background:var(--yellow-soft);color:#7a5a00;}
.nav-link.is-active{background:var(--ink);color:#fff;font-weight:600;}
.nav-tools{margin-left:auto;display:flex;align-items:center;gap:12px;}
.search-box{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--pill);padding:8px 14px;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.search-box i{color:#9ca0aa;font-size:13px;}
.search-box input{
  border:0;outline:0;background:transparent;
  width:150px;font-size:13.5px;color:var(--ink);
}
.search-box input::placeholder{color:#a7abb4;}
.search-box:focus-within{border-color:var(--yellow-deep);box-shadow:0 0 0 4px rgba(255,201,60,.22);}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--pill);padding:14px 28px;
  font-size:15px;font-weight:700;line-height:1.2;
  border:1px solid transparent;cursor:pointer;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease);
}
.btn-brand{
  background:linear-gradient(135deg,#FFD95E,#F2A600);
  color:#241a00;
  box-shadow:0 12px 26px rgba(242,166,0,.30);
}
.btn-brand:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(242,166,0,.38);color:#241a00;}
.btn-brand:active{transform:translateY(0);box-shadow:0 8px 18px rgba(242,166,0,.30);}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 12px 26px rgba(21,22,26,.22);}
.btn-dark:hover{background:var(--ink-soft);transform:translateY(-2px);box-shadow:0 18px 34px rgba(21,22,26,.28);color:#fff;}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--yellow-deep);background:var(--yellow-soft);transform:translateY(-2px);color:#7a5a00;}
.btn-sm{padding:9px 18px;font-size:13.5px;}
.btn-block{width:100%;}

/* ---------- 通用板块 ---------- */
.section{padding:78px 0;}
.section-tight{padding:56px 0;}
.section-head{max-width:730px;margin-bottom:40px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:2px;
  color:var(--yellow-deep);
}
.section-tag::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--yellow);}
.section-head.center .section-tag::before{display:none;}
.section-head h2{
  font-size:clamp(24px,3vw,34px);line-height:1.32;letter-spacing:-.4px;
  margin:14px 0 14px;
}
.section-sub{color:var(--muted);font-size:16px;margin:0;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:66px 0 82px;}
.hero::before{
  content:"";position:absolute;top:-180px;right:-120px;width:640px;height:640px;
  background:radial-gradient(circle at 50% 50%,rgba(255,201,60,.34),rgba(255,201,60,0) 68%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;bottom:-220px;left:-160px;width:520px;height:520px;
  background:radial-gradient(circle at 50% 50%,rgba(255,92,122,.14),rgba(255,92,122,0) 70%);
  pointer-events:none;
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--yellow-soft);color:#8a5a00;
  border-radius:var(--pill);padding:8px 18px;
  font-size:13px;font-weight:700;letter-spacing:.3px;
}
.eyebrow i{font-size:12px;}
.hero h1{
  font-size:clamp(30px,4vw,50px);
  line-height:1.24;letter-spacing:-.8px;
  margin:22px 0 20px;
}
.hero h1 em{font-style:normal;position:relative;color:#B07200;}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:5px;height:12px;
  background:rgba(255,201,60,.45);border-radius:4px;z-index:-1;
}
.hero-lead{font-size:16.5px;color:#555963;max-width:560px;margin-bottom:30px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px;}
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  border-top:1px dashed #E3DFD2;padding-top:24px;max-width:560px;
}
.hero-stats div strong{display:block;font-size:24px;line-height:1.2;letter-spacing:-.5px;color:var(--ink);}
.hero-stats div span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;}

/* 封面视觉 */
.hero-visual{position:relative;}
.cover-grid{
  display:grid;grid-template-columns:1.22fr 1fr;grid-template-rows:152px 152px;gap:14px;
}
.cover{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  padding:18px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:var(--shadow-sm);color:#1d1700;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cover:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.cover-a{grid-row:span 2;background:linear-gradient(155deg,#FFE07A,#F2A600);}
.cover-b{background:linear-gradient(155deg,#31343E,#15161A);color:#fff;}
.cover-c{background:linear-gradient(155deg,#FFA3B3,#F0436B);color:#fff;}
.cover-tag{
  position:absolute;top:14px;left:14px;
  font-size:11.5px;font-weight:700;letter-spacing:.5px;
  background:rgba(255,255,255,.9);color:#1d1700;
  padding:4px 12px;border-radius:var(--pill);
}
.cover-a .cover-tag{background:rgba(21,22,26,.82);color:#FFC93C;}
.cover-title{font-size:15px;font-weight:700;line-height:1.42;}
.cover-a .cover-title{font-size:19px;}
.play-btn{
  position:absolute;right:16px;bottom:16px;
  width:46px;height:46px;border-radius:50%;
  background:rgba(21,22,26,.86);color:var(--yellow);
  display:grid;place-items:center;font-size:14px;
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.cover:hover .play-btn{transform:scale(1.1);background:#15161A;}
.float-badge{
  position:absolute;left:-16px;bottom:-20px;
  background:#fff;border-radius:16px;padding:13px 20px;
  box-shadow:var(--shadow-md);
  display:flex;align-items:baseline;gap:9px;
}
.float-badge strong{font-size:22px;letter-spacing:-.5px;}
.float-badge span{font-size:12px;color:var(--muted);}

/* ---------- 三阶段地图 ---------- */
.stage-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.stage-card{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:28px 26px 26px;
  box-shadow:var(--shadow-xs);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
  overflow:hidden;
}
.stage-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--yellow),var(--yellow-deep));
}
.stage-card:nth-child(2)::before{background:linear-gradient(90deg,#8E7BFF,#5C4BDB);}
.stage-card:nth-child(3)::before{background:linear-gradient(90deg,#FF8FA5,#F0436B);}
.stage-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#F1E3B6;}
.stage-ep{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:1px;
  background:var(--yellow-soft);color:#8a5a00;border-radius:var(--pill);
  padding:5px 14px;margin-bottom:16px;
}
.stage-card:nth-child(2) .stage-ep{background:#EEEAFF;color:#5C4BDB;}
.stage-card:nth-child(3) .stage-ep{background:#FFE8ED;color:#C42B4C;}
.stage-card h3{font-size:19px;line-height:1.4;margin-bottom:12px;letter-spacing:-.2px;}
.stage-card p{font-size:14.5px;color:#5f636d;margin-bottom:18px;}
.stage-tags{display:flex;flex-wrap:wrap;gap:8px;}
.tag{
  font-size:12px;font-weight:600;color:#6a6e78;
  background:#F6F5F1;border:1px solid #EAE8E0;
  border-radius:var(--pill);padding:4px 12px;
}

/* ---------- 横滚分集 ---------- */
.rail-wrap{position:relative;}
.rail{
  display:flex;gap:18px;overflow-x:auto;
  padding:6px 4px 20px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{height:6px;}
.rail::-webkit-scrollbar-track{background:#F1EFE7;border-radius:99px;}
.rail::-webkit-scrollbar-thumb{background:#E0D6B4;border-radius:99px;}
.rail::-webkit-scrollbar-thumb:hover{background:var(--yellow-deep);}
.ep-card{
  flex:0 0 258px;min-width:258px;scroll-snap-align:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px;box-shadow:var(--shadow-xs);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.ep-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#F1E3B6;}
.ep-cover{
  position:relative;height:132px;border-radius:var(--radius);
  display:flex;align-items:flex-end;padding:16px;
  overflow:hidden;color:#fff;
}
.ep-cover span{position:relative;z-index:2;font-size:13px;font-weight:700;letter-spacing:.4px;}
.ep-cover::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%);
}
.ep-cover i{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(4px);
  display:grid;place-items:center;
  font-size:13px;color:#fff;z-index:2;
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.ep-card:hover .ep-cover i{transform:translate(-50%,-50%) scale(1.12);background:rgba(255,201,60,.85);color:#241a00;}
.ep-a{background:linear-gradient(150deg,#FFD95E,#F2A600);}
.ep-b{background:linear-gradient(150deg,#6F7BFF,#3A2FB0);}
.ep-c{background:linear-gradient(150deg,#39D6AE,#12886C);}
.ep-d{background:linear-gradient(150deg,#FF9AAC,#D62246);}
.ep-e{background:linear-gradient(150deg,#3A3D47,#15161A);}
.ep-f{background:linear-gradient(150deg,#FFC06B,#E0641A);}
.ep-body{padding:14px 4px 4px;}
.ep-body h3{font-size:15.5px;line-height:1.45;margin-bottom:6px;}
.ep-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);}
.ep-meta .tag{font-size:11.5px;padding:3px 10px;}
.rail-hint{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--muted);margin-top:4px;
}
.rail-hint i{color:var(--yellow-deep);}

/* ---------- 卖点卡片（Foundation 网格） ---------- */
.card-grid{margin-left:-11px;margin-right:-11px;}
.card-grid > .cell{padding:11px;}
.reason-card{
  height:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:26px 24px;
  box-shadow:var(--shadow-xs);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.reason-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#F1E3B6;}
.reason-icon{
  width:48px;height:48px;border-radius:15px;
  display:grid;place-items:center;font-size:19px;
  background:var(--yellow-soft);color:#B07200;margin-bottom:18px;
  transition:background .28s var(--ease),transform .28s var(--ease);
}
.reason-card:hover .reason-icon{background:linear-gradient(135deg,#FFD95E,#F2A600);color:#241a00;transform:rotate(-6deg);}
.reason-card h3{font-size:17px;line-height:1.4;margin-bottom:10px;}
.reason-card p{font-size:14.5px;color:#5f636d;margin:0;}

/* ---------- 追剧四步 ---------- */
.step-section{
  background:linear-gradient(180deg,#FFFCF5 0%,#FFF6DF 100%);
  border-top:1px solid #F3EBD4;
  border-bottom:1px solid #F3EBD4;
}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.step-card{
  position:relative;background:#fff;border:1px solid #EFE7D2;
  border-radius:var(--radius-lg);padding:26px 22px;
  box-shadow:var(--shadow-xs);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.step-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.step-num{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--ink);color:var(--yellow);
  font-weight:800;font-size:15px;margin-bottom:16px;
}
.step-card h3{font-size:16px;line-height:1.4;margin-bottom:9px;}
.step-card p{font-size:14px;color:#5f636d;margin:0;}

/* ---------- 观众反馈 ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.quote-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 26px;box-shadow:var(--shadow-xs);
  display:flex;flex-direction:column;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.quote-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.quote-card .fa-quote-left{color:var(--yellow);font-size:20px;margin-bottom:14px;}
.quote-card p{font-size:15px;color:#3f424b;line-height:1.78;margin-bottom:20px;}
.quote-user{display:flex;align-items:center;gap:11px;margin-top:auto;}
.avatar{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;font-weight:700;
  background:var(--yellow-soft);color:#8a5a00;
}
.quote-user strong{display:block;font-size:13.5px;line-height:1.3;}
.quote-user span{display:block;font-size:12px;color:var(--muted);}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:14px;max-width:880px;margin:0 auto;}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;box-shadow:var(--shadow-xs);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.faq-item:hover{border-color:#F1E3B6;box-shadow:var(--shadow-sm);}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:16px;font-weight:700;line-height:1.5;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"\002B";flex:0 0 auto;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--yellow-soft);color:#8a5a00;
  font-size:16px;font-weight:700;line-height:1;
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.faq-item[open] summary::after{content:"\2212";background:var(--yellow);color:#241a00;}
.faq-item p{margin:14px 0 0;font-size:14.8px;color:#5b5f69;line-height:1.8;}

/* ---------- CTA ---------- */
.cta-panel{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1B1D24 0%,#2A2410 100%);
  border-radius:var(--radius-xl);
  padding:64px 56px;
  color:#fff;
}
.cta-panel::before{
  content:"";position:absolute;top:-140px;right:-100px;width:420px;height:420px;
  background:radial-gradient(circle at 50% 50%,rgba(255,201,60,.32),rgba(255,201,60,0) 68%);
}
.cta-panel::after{
  content:"";position:absolute;bottom:-160px;left:-80px;width:360px;height:360px;
  background:radial-gradient(circle at 50% 50%,rgba(255,92,122,.24),rgba(255,92,122,0) 70%);
}
.cta-inner{position:relative;z-index:2;max-width:640px;}
.cta-inner h2{font-size:clamp(24px,3vw,34px);line-height:1.32;letter-spacing:-.4px;margin-bottom:16px;color:#fff;}
.cta-inner p{color:#B9BCC5;font-size:16px;margin-bottom:30px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;}
.cta-panel .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;}
.cta-panel .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,201,60,.6);color:#fff;}

/* ---------- 页脚 ---------- */
.site-footer{background:var(--ink);color:#c9cbd3;padding:64px 0 0;margin-top:20px;}
.footer-grid{display:grid;grid-template-columns:1.5fr .8fr 1fr;gap:48px;}
.site-footer .brand{margin-bottom:20px;}
.site-footer .brand-text strong{color:#fff;}
.site-footer .brand-text small{color:#8f929c;}
.footer-brand p{font-size:14.5px;color:#9a9ea9;line-height:1.8;max-width:400px;margin:0;}
.footer-col h3{font-size:14px;color:#fff;letter-spacing:1px;margin:0 0 16px;}
.footer-col a{display:block;font-size:14.5px;color:#b9bcc5;padding:5px 0;}
.footer-col a:hover{color:var(--yellow);}
.footer-col p{font-size:14px;color:#9a9ea9;margin-bottom:10px;line-height:1.7;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:52px;padding-top:22px;padding-bottom:28px;
}
.footer-bottom p{font-size:13px;color:#7f838e;margin:0;}

/* ---------- 移动端底部 Tab ---------- */
.tabbar{display:none;}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:46px;}
  .hero-visual{max-width:520px;}
  .hero-stats{max-width:none;}
  .stage-list{grid-template-columns:1fr;}
  .step-grid{grid-template-columns:repeat(2,1fr);}
  .quote-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:38px;}
  .footer-brand{grid-column:1 / -1;}
  .cta-panel{padding:52px 40px;}
}
@media (max-width:900px){
  .nav-main{display:none;}
  .search-box{display:none;}
  .nav-shell{min-height:66px;gap:14px;}
  .brand-mark{width:38px;height:38px;font-size:17px;border-radius:12px;}
  .brand-text strong{font-size:14.5px;}
  .brand-text small{font-size:10.5px;}
  .nav-cta{padding:8px 15px;font-size:12.5px;}
}
@media (max-width:768px){
  body{padding-bottom:76px;}
  .section{padding:56px 0;}
  .hero{padding:44px 0 58px;}
  .hero h1{font-size:clamp(27px,6.4vw,36px);}
  .hero-lead{font-size:15.5px;}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:16px;}
  .cover-grid{grid-template-columns:1fr 1fr;grid-template-rows:130px 130px;gap:12px;}
  .cover-a{grid-row:span 2;}
  .float-badge{left:auto;right:8px;bottom:-16px;padding:10px 16px;}
  .cta-panel{padding:42px 26px;border-radius:var(--radius-lg);}
  .faq-item{padding:18px 20px;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .site-footer{padding-top:48px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;margin-top:36px;}
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 24px rgba(21,22,26,.07);
  }
  .tabbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    font-size:10.5px;color:#8a8d95;padding:5px 2px;border-radius:12px;
    transition:color .22s var(--ease),background .22s var(--ease);
  }
  .tabbar a i{font-size:17px;line-height:1;}
  .tabbar a.is-active{color:var(--ink);font-weight:700;background:var(--yellow-soft);}
  .tabbar a.is-active i{color:var(--yellow-deep);}
}
@media (max-width:520px){
  .container{padding:0 16px;}
  .hero-actions .btn{width:100%;}
  .cta-actions .btn{width:100%;}
  .step-grid{grid-template-columns:1fr;}
  .hero-stats div strong{font-size:21px;}
  .cover-grid{grid-template-rows:118px 118px;}
  .cover-a .cover-title{font-size:16px;}
  .cover-title{font-size:13.5px;}
  .cover{padding:14px;}
  .cover-tag{top:10px;left:10px;font-size:10.5px;padding:3px 9px;}
  .ep-card{flex:0 0 232px;min-width:232px;}
  .section-head{margin-bottom:28px;}
}

/* roulang page: category3 */
:root{
  --ink:#191531;
  --ink-soft:#3f3860;
  --muted:#7a7392;
  --paper:#fbf8f3;
  --paper-2:#f4eee5;
  --card:#ffffff;
  --line:#ebe2d6;
  --line-strong:#ddd0be;
  --brand:#f7b32b;
  --brand-deep:#de8a07;
  --brand-soft:#fff3d6;
  --accent:#6c4bf4;
  --accent-soft:#efeaff;
  --rose:#ff6b8a;
  --rose-soft:#ffe8ee;
  --ok:#12a97a;
  --ok-soft:#e2f7ef;
  --radius-lg:24px;
  --radius:16px;
  --radius-sm:11px;
  --shadow-sm:0 2px 10px rgba(25,21,49,.06);
  --shadow:0 14px 38px rgba(25,21,49,.10);
  --shadow-lg:0 28px 66px rgba(25,21,49,.16);
  --container:1140px;
  --ease:cubic-bezier(.22,.68,.28,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(247,179,43,.20), transparent 62%),
    radial-gradient(900px 460px at -6% 12%, rgba(108,75,244,.12), transparent 60%),
    var(--paper);
  padding-bottom:0;
}
img{max-width:100%;display:block;height:auto;}
a{color:var(--accent);text-decoration:none;transition:color .2s var(--ease);}
a:hover{color:var(--brand-deep);}
h1,h2,h3,h4{line-height:1.3;margin:0 0 .6em;color:var(--ink);font-weight:800;letter-spacing:.2px;}
h1{font-size:clamp(1.72rem,3.4vw,2.86rem);letter-spacing:-.4px;}
h2{font-size:clamp(1.34rem,2.4vw,2rem);}
h3{font-size:1.1rem;}
p{margin:0 0 1em;color:var(--ink-soft);}
ul,ol{margin:0 0 1em;padding-left:1.15em;}
li{color:var(--ink-soft);}
button{font:inherit;}
:focus-visible{outline:3px solid rgba(108,75,244,.55);outline-offset:3px;border-radius:6px;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 22px;}
.section{padding:76px 0;}
.section--tight{padding:52px 0;}
.section-head{max-width:720px;margin-bottom:36px;}
.section-head .eyebrow{margin-bottom:12px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-deep);background:var(--brand-soft);
  padding:7px 14px;border-radius:999px;border:1px solid rgba(222,138,7,.22);
}
.lead{font-size:1.06rem;color:var(--ink-soft);max-width:64ch;}
.muted{color:var(--muted);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:.97rem;cursor:pointer;text-align:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
  box-shadow:var(--shadow-sm);
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-brand{background:linear-gradient(135deg,var(--brand) 0%,#ffcb52 100%);color:#2c1f00;box-shadow:0 10px 24px rgba(247,179,43,.36);}
.btn-brand:hover{color:#2c1f00;transform:translateY(-2px);box-shadow:0 16px 32px rgba(247,179,43,.45);}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(25,21,49,.22);}
.btn-ink:hover{color:#fff;background:#2a2450;transform:translateY(-2px);}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-strong);}
.btn-ghost:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow);}
.btn-sm{padding:9px 17px;font-size:.87rem;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  backdrop-filter:blur(14px);
  background:rgba(251,248,243,.88);
  border-bottom:1px solid var(--line);
}
.nav-shell{display:flex;align-items:center;gap:20px;min-height:74px;padding-top:10px;padding-bottom:10px;}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);flex:0 0 auto;}
.brand:hover{color:var(--ink);}
.brand-mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  font-weight:900;font-size:1.18rem;color:#3a2700;
  background:linear-gradient(140deg,var(--brand),#ffd76b);
  box-shadow:0 8px 20px rgba(247,179,43,.42),inset 0 -2px 0 rgba(0,0,0,.08);
}
.brand-text{display:flex;flex-direction:column;line-height:1.18;}
.brand-text strong{font-size:1.02rem;letter-spacing:.3px;}
.brand-text small{font-size:.71rem;color:var(--muted);letter-spacing:.06em;}
.nav-main{display:flex;align-items:center;gap:4px;margin-left:12px;flex-wrap:wrap;}
.nav-link{
  position:relative;padding:9px 14px;border-radius:999px;font-size:.93rem;font-weight:700;color:var(--ink-soft);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav-link:hover{background:rgba(108,75,244,.09);color:var(--accent);}
.nav-link.is-active{background:var(--ink);color:#fff;box-shadow:0 8px 18px rgba(25,21,49,.24);}
.nav-link.is-active:hover{color:#fff;}
.nav-tools{display:flex;align-items:center;gap:12px;margin-left:auto;}
.search-box{
  display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-strong);
  border-radius:999px;padding:8px 15px;box-shadow:var(--shadow-sm);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(108,75,244,.14);}
.search-box i{color:var(--muted);font-size:.85rem;}
.search-box input{
  border:0;background:transparent;outline:none;font-size:.86rem;width:148px;color:var(--ink);
}
.search-box input::placeholder{color:#a9a2bd;}

/* ---------- Hero ---------- */
.hero{padding:58px 0 34px;position:relative;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center;}
.hero h1{margin-bottom:18px;}
.hero h1 .hl{
  background:linear-gradient(180deg,transparent 62%,rgba(247,179,43,.62) 62%);
  padding:0 4px;border-radius:4px;
}
.hero-sub{font-size:1.04rem;max-width:56ch;margin-bottom:26px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:30px;}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:520px;}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px;box-shadow:var(--shadow-sm);
}
.stat b{display:block;font-size:1.42rem;line-height:1.2;color:var(--ink);font-weight:900;}
.stat span{font-size:.78rem;color:var(--muted);letter-spacing:.02em;}

.panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:20px;position:relative;
}
.panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.panel-top strong{font-size:.9rem;}
.panel-tag{
  font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--accent);
  background:var(--accent-soft);border-radius:999px;padding:5px 11px;
}
.cover-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.cover{
  position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;
  background:linear-gradient(160deg,#2a2450,#4b3f86);
  display:grid;place-items:end start;padding:10px;
  color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  box-shadow:var(--shadow-sm);transition:transform .24s var(--ease);
}
.cover:nth-child(2){background:linear-gradient(160deg,#f7b32b,#ff9f1a);color:#3a2700;}
.cover:nth-child(4){background:linear-gradient(160deg,#ff6b8a,#ff9472);}
.cover:nth-child(5){background:linear-gradient(160deg,#12a97a,#6bd6a8);}
.cover:nth-child(6){background:linear-gradient(160deg,#6c4bf4,#a48cff);}
.cover:hover{transform:translateY(-3px);}
.cover .play{
  position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.86);color:#2a2450;display:grid;place-items:center;font-size:.6rem;
}
.panel-foot{display:flex;align-items:center;gap:10px;margin-top:15px;padding-top:14px;border-top:1px dashed var(--line-strong);font-size:.8rem;color:var(--muted);}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;}

/* ---------- Channel tabs ---------- */
.channel-bar{
  display:flex;gap:8px;overflow-x:auto;padding:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;box-shadow:var(--shadow-sm);scrollbar-width:thin;
}
.chip{
  flex:0 0 auto;padding:9px 18px;border-radius:999px;font-size:.88rem;font-weight:700;
  color:var(--ink-soft);background:transparent;border:1px solid transparent;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
  white-space:nowrap;
}
.chip:hover{background:var(--paper-2);color:var(--ink);}
.chip.is-on{background:var(--accent);color:#fff;box-shadow:0 8px 18px rgba(108,75,244,.3);}
.tab-note{margin-top:14px;font-size:.88rem;color:var(--muted);}

/* ---------- Cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow-sm);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease);
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong);}
.card-icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-deep);font-size:1.05rem;margin-bottom:16px;
}
.card-icon.v2{background:var(--accent-soft);color:var(--accent);}
.card-icon.v3{background:var(--rose-soft);color:var(--rose);}
.card h3{margin-bottom:8px;}
.card p{font-size:.94rem;margin-bottom:14px;}
.card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;}
.badge{
  display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;
  padding:5px 11px;border-radius:999px;background:var(--paper-2);color:var(--ink-soft);
  border:1px solid var(--line);
}
.badge.ok{background:var(--ok-soft);color:#0b7d5a;border-color:#bfe9da;}
.badge.accent{background:var(--accent-soft);color:#5a3ede;border-color:#ded4ff;}
.badge.warn{background:var(--brand-soft);color:var(--brand-deep);border-color:#ffe0a1;}

/* ---------- Timeline ---------- */
.timeline{position:relative;margin-top:10px;padding-left:26px;}
.timeline::before{
  content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--brand),var(--accent) 60%,var(--rose));
  border-radius:2px;
}
.tl-item{position:relative;padding:0 0 26px 8px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:"";position:absolute;left:-25px;top:8px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--brand);box-shadow:0 0 0 4px rgba(247,179,43,.16);
}
.tl-item:nth-child(3)::before{border-color:var(--accent);box-shadow:0 0 0 4px rgba(108,75,244,.14);}
.tl-item:nth-child(5)::before{border-color:var(--rose);box-shadow:0 0 0 4px rgba(255,107,138,.16);}
.tl-item h3{font-size:1rem;margin-bottom:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tl-item p{font-size:.93rem;margin:0;}
.tl-ep{font-size:.73rem;font-weight:800;color:var(--muted);letter-spacing:.06em;}

/* ---------- Split feature list ---------- */
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:start;}
.feature-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;}
.feature-list li{
  display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.feature-list li:hover{transform:translateX(3px);box-shadow:var(--shadow);}
.feature-list .tick{
  flex:0 0 26px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:var(--ok-soft);color:#0b7d5a;font-size:.75rem;margin-top:3px;
}
.feature-list strong{display:block;font-size:.96rem;margin-bottom:3px;color:var(--ink);}
.feature-list span{font-size:.87rem;color:var(--muted);line-height:1.65;}

/* ---------- Chart card ---------- */
.chart-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);}
.bar-row{margin-bottom:18px;}
.bar-row:last-child{margin-bottom:0;}
.bar-label{display:flex;justify-content:space-between;font-size:.87rem;font-weight:700;color:var(--ink-soft);margin-bottom:7px;}
.bar-track{height:10px;border-radius:999px;background:var(--paper-2);overflow:hidden;}
.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),#ffd76b);transition:width .8s var(--ease);}
.bar-fill.p2{background:linear-gradient(90deg,var(--accent),#a48cff);}
.bar-fill.p3{background:linear-gradient(90deg,var(--rose),#ffb3c1);}
.bar-fill.p4{background:linear-gradient(90deg,var(--ok),#75dcb4);}
.chart-note{font-size:.82rem;color:var(--muted);margin:18px 0 0;padding-top:16px;border-top:1px dashed var(--line-strong);}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:860px;}
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 20px;box-shadow:var(--shadow-sm);transition:box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.faq details[open]{border-color:var(--line-strong);box-shadow:var(--shadow);}
.faq summary{
  list-style:none;cursor:pointer;padding:15px 0;font-weight:800;font-size:.98rem;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.72rem;color:var(--accent);
  transition:transform .24s var(--ease);flex:0 0 auto;
}
.faq details[open] summary::after{transform:rotate(180deg);}
.faq summary:hover{color:var(--accent);}
.faq .answer{padding:0 0 16px;font-size:.93rem;color:var(--ink-soft);margin:0;border-top:1px dashed var(--line);padding-top:14px;}

/* ---------- CTA ---------- */
.cta-band{
  background:linear-gradient(135deg,#211b40 0%,#3a2f6d 55%,#4b3b8a 100%);
  border-radius:var(--radius-lg);padding:52px 44px;color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.cta-band::after{
  content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,179,43,.55),transparent 68%);
}
.cta-band h2{color:#fff;max-width:22ch;position:relative;z-index:1;}
.cta-band p{color:rgba(255,255,255,.78);max-width:56ch;position:relative;z-index:1;}
.cta-actions{display:flex;flex-wrap:wrap;gap:13px;position:relative;z-index:1;margin-top:8px;}
.cta-band .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.34);box-shadow:none;}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff;}

/* ---------- Footer ---------- */
.site-footer{background:#15112b;color:rgba(255,255,255,.72);margin-top:20px;padding-top:56px;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:40px;padding-bottom:36px;}
.site-footer .brand{color:#fff;}
.site-footer .brand:hover{color:#fff;}
.site-footer .brand-text small{color:rgba(255,255,255,.5);}
.site-footer .brand-mark{box-shadow:0 8px 20px rgba(247,179,43,.3);}
.footer-brand p{font-size:.9rem;color:rgba(255,255,255,.62);margin-top:16px;max-width:38ch;}
.footer-col h3{font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:14px;font-weight:800;}
.footer-col a{display:block;color:rgba(255,255,255,.8);font-size:.92rem;padding:5px 0;transition:color .2s var(--ease),transform .2s var(--ease);}
.footer-col a:hover{color:var(--brand);transform:translateX(3px);}
.footer-col p{font-size:.88rem;color:rgba(255,255,255,.6);margin-bottom:8px;}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(255,255,255,.1);padding-top:20px;padding-bottom:26px;
}
.footer-bottom p{font-size:.8rem;color:rgba(255,255,255,.48);margin:0;}

/* ---------- Mobile tab bar ---------- */
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:7px 6px calc(7px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(25,21,49,.08);
}
.tabbar-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;}
.tab-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:12px;
  font-size:.68rem;font-weight:700;color:var(--muted);
}
.tab-item i{font-size:1.02rem;}
.tab-item:hover{color:var(--accent);}
.tab-item.is-active{color:var(--accent);background:var(--accent-soft);}

/* ---------- Responsive ---------- */
@media screen and (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .hero-stats{max-width:none;}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .split{grid-template-columns:1fr;gap:30px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .nav-main{display:none;}
}
@media screen and (max-width:900px){
  .search-box input{width:120px;}
}
@media screen and (max-width:768px){
  body{padding-bottom:74px;}
  .section{padding:54px 0;}
  .section--tight{padding:40px 0;}
  .hero{padding:38px 0 20px;}
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  .nav-tools .search-box{display:none;}
  .tabbar{display:block;}
  .cta-band{padding:38px 24px;}
  .panel{padding:16px;}
  .hero-stats{grid-template-columns:repeat(3,1fr);gap:10px;}
  .stat{padding:12px 10px;}
  .stat b{font-size:1.16rem;}
  .stat span{font-size:.7rem;}
}
@media screen and (max-width:520px){
  .container{padding:0 16px;}
  .brand-text small{display:none;}
  .brand-mark{width:38px;height:38px;border-radius:12px;}
  .hero-actions .btn{width:100%;}
  .hero-stats{grid-template-columns:1fr 1fr;}
  .cover-grid{grid-template-columns:repeat(2,1fr);}
  .card{padding:20px;}
  .chart-card{padding:20px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}