/* roulang page: index */
:root {
  --coral: #FF6B3D;
  --teal: #12C0A0;
  --honey: #F4B860;
  --ink: #11120F;
  --dark: #1A1C18;
  --paper: #F5F1EA;
  --cream: #F9F5EF;
  --line: #E3DDD2;
  --body: #21211D;
  --muted: #6B6A63;
  --radius-xl: 20px;
  --radius-md: 14px;
  --radius-btn: 999px;
  --radius-chip: 6px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
  --transition: 0.22s ease;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition), opacity var(--transition); }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; background: transparent; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.hidden { display: none !important; }
.c-container { max-width: 1380px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.grid-x > .cell { min-width: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 0.95rem; line-height: 1; padding: 14px 26px; border-radius: var(--radius-btn); border: 1px solid transparent; transition: all var(--transition); cursor: pointer; text-align: center; }
.btn i { font-size: 14px; }
.btn-primary { background: var(--coral); color: var(--ink); border-color: var(--coral); box-shadow: 0 8px 18px rgba(255, 107, 61, 0.28); }
.btn-primary:hover { transform: translateY(-2px); background: #FF5B2F; border-color: #FF5B2F; color: var(--ink); box-shadow: 0 12px 28px rgba(255, 107, 61, 0.35); }
.btn-secondary { background: transparent; color: var(--cream); border-color: rgba(249, 245, 239, 0.55); }
.btn-secondary:hover { border-color: var(--cream); color: var(--cream); background: rgba(249, 245, 239, 0.08); }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-light:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
.btn-sm { padding: 9px 16px; font-size: 0.86rem; }
.btn-block { width: 100%; }
.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.35); color: var(--cream); border-radius: var(--radius-btn); padding: 16px 30px; }
.btn-ghost:hover { border-color: var(--cream); background: rgba(255,255,255,0.06); }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--coral); font-weight: 700; }
.text-link:hover { color: #E44E2A; }
.text-link i { transition: transform var(--transition); }
.text-link:hover i { transform: translateX(4px); }

/* off-canvas */
#mobileNav { background: var(--ink); color: var(--cream); width: min(380px, 88vw); }
.offcanvas-menu-body { padding: 28px 24px 48px; height: 100%; overflow-y: auto; }
.offcanvas-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.mobile-logo { font-size: 1.06rem; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.mobile-logo .logo-orbit { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,107,61,0.16); align-items: center; justify-content: center; color: var(--coral); font-size: 15px; border: 1px solid rgba(255,107,61,0.5); }
.offcanvas-close { width: 38px; height: 38px; border-radius: 50%; color: var(--cream); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.offcanvas-close:hover { background: rgba(255,107,61,0.2); color: #fff; transform: rotate(90deg); }
.offcanvas-menu-list { border-top: 1px solid rgba(249,245,239,0.1); margin-top: 8px; padding-top: 6px; }
.offcanvas-menu-list li a { display: block; padding: 13px 4px; border-bottom: 1px solid rgba(249,245,239,0.08); font-weight: 600; }
.offcanvas-menu-list li a:hover, .offcanvas-menu-list li.is-active a { color: var(--coral); }
.offcanvas-btn-row { margin-top: 28px; display: grid; gap: 12px; }
.offcanvas-search { position: relative; margin-top: 20px; }
.offcanvas-search input { width: 100%; height: 46px; border-radius: var(--radius-btn); border: 1px solid rgba(249,245,239,0.2); background: rgba(249,245,239,0.06); padding-left: 18px; padding-right: 44px; color: var(--cream); }
.offcanvas-search button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--coral); font-size: 16px; }
.offcanvas-search input:focus { border-color: var(--coral); background: rgba(255,107,61,0.08); outline: none; }

/* header */
.site-header { position: relative; background: var(--ink); border-bottom: 1px solid rgba(249,245,239,0.09); z-index: 50; }
.site-header-inner, .site-header .grid-container { max-width: 1380px; margin: 0 auto; }
.site-header { box-shadow: none; }
.site-header.is-pinned { position: sticky; top: 0; will-change: transform; }
.header-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 12px 24px; }
.site-logo { display: flex; align-items: center; gap: 11px; color: var(--cream); font-weight: 800; font-size: 1.18rem; letter-spacing: 0.2px; white-space: nowrap; }
.site-logo:hover { color: var(--cream); }
.logo-orbit { display: inline-flex; width: 38px; height: 38px; border-radius: 14px 14px 14px 6px; background: linear-gradient(140deg, rgba(255,107,61,0.9), rgba(244,184,96,0.8)); color: var(--ink); align-items: center; justify-content: center; font-size: 17px; box-shadow: 0 4px 12px rgba(255,107,61,0.3); }
.logo-orbit i { transform: rotate(-7deg); }
.site-nav ul { display: flex; align-items: center; gap: 8px; }
.site-nav a { display: inline-flex; padding: 11px 16px; border-radius: 8px; color: rgba(249,245,239,0.78); font-weight: 600; position: relative; font-size: 0.96rem; }
.site-nav a::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 0; height: 2px; background: var(--coral); border-radius: 8px; transform: translateX(-50%); transition: width var(--transition); }
.site-nav a:hover { color: var(--cream); background: rgba(255,255,255,0.04); }
.site-nav li.is-active a { color: var(--cream); }
.site-nav li.is-active a::after { width: 20px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.search-pill { display: flex; background: rgba(249,245,239,0.1); border: 1px solid rgba(249,245,239,0.2); border-radius: 999px; align-items: center; padding: 6px 6px 6px 16px; gap: 8px; width: 220px; }
.search-pill input { background: transparent; border: 0; color: var(--cream); outline: none; width: 100%; font-size: 0.86rem; }
.search-pill input::placeholder { color: rgba(249,245,239,0.42); }
.search-pill button { color: var(--cream); width: 34px; height: 34px; border-radius: 50%; background: rgba(249,245,239,0.08); }
.search-pill button:hover { background: var(--coral); color: var(--ink); }
.btn-signup { background: var(--coral); color: var(--ink); padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.btn-signup:hover { background: #FF5B2F; transform: translateY(-2px); color: var(--ink); }
.btn-login { color: var(--cream); padding: 8px 14px; font-weight: 600; font-size: 0.9rem; border-radius: 999px; }
.btn-login:hover { background: rgba(249,245,239,0.09); color: #fff; }
.menu-toggle { display: none; color: var(--cream); font-size: 1.4rem; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; border: 1px solid rgba(249,245,239,0.2); }
.menu-toggle:hover { background: rgba(255,107,61,0.12); color: var(--coral); }

/* hero */
.hero-section { position: relative; background: var(--ink); color: var(--cream); overflow: hidden; isolation: isolate; }
.hero-section::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('/assets/images/backpic/back-1.webp') center / cover no-repeat; opacity: 0.2; transform: scale(1.03); }
.hero-section::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 78% 22%, rgba(18,192,160,0.14) 0, transparent 30%), linear-gradient(115deg, rgba(17,18,15,0.94) 0%, rgba(17,18,15,0.7) 45%, rgba(26,28,24,0.86) 100%); }
.hero-inner { min-height: calc(100vh - 76px); display: flex; align-items: center; padding-top: clamp(48px, 8vw, 100px); padding-bottom: clamp(44px, 7vw, 96px); }
.hero-copy { position: relative; z-index: 3; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; background: rgba(18,192,160,0.14); border: 1px solid rgba(18,192,160,0.45); color: #7FE4CE; border-radius: 999px; padding: 8px 16px; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.4px; }
.hero-kicker i { color: var(--teal); }
.hero-title { font-size: clamp(2.15rem, 5vw, 3.8rem); line-height: 1.22; font-weight: 800; letter-spacing: -0.4px; margin: 22px 0 18px; }
.hero-title .hl { color: var(--coral); }
.hero-lead { max-width: 620px; color: rgba(249,245,239,0.78); font-size: 1.06rem; line-height: 1.9; margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(249,245,239,0.12); color: rgba(249,245,239,0.56); font-size: 0.88rem; }
.hero-note b { display: block; font-size: 1.1rem; color: var(--cream); font-weight: 800; margin-bottom: 2px; }
.hero-stage { position: relative; z-index: 2; min-height: 520px; display: flex; align-items: center; justify-content: flex-end; }
.stage-visual { position: relative; width: min(520px, 100%); margin: 0 auto; }
.stage-bg { aspect-ratio: 4/5; border-radius: 36px 36px 20px 36px; object-fit: cover; width: 100%; border: 1px solid rgba(249,245,239,0.22); box-shadow: 0 30px 70px rgba(0,0,0,0.38); }
.stage-glow { position: absolute; width: 78%; height: 44%; left: -12%; top: -10%; background: radial-gradient(circle, rgba(255,107,61,0.28), transparent 68%); filter: blur(8px); z-index: -1; }
.stage-card { position: absolute; background: linear-gradient(135deg, rgba(17,18,15,0.92), rgba(26,28,24,0.88)); border: 1px solid rgba(249,245,239,0.12); border-radius: var(--radius-md); padding: 15px 18px; backdrop-filter: blur(6px); box-shadow: var(--shadow); color: var(--cream); overflow: hidden; }
.stage-card i { color: var(--coral); margin-right: 8px; }
.stage-card small { display: block; color: rgba(249,245,239,0.56); font-size: 0.76rem; }
.stage-card b { font-size: 1.15rem; font-weight: 800; }
.stage-card-one { right: -7px; top: 12%; }
.stage-card-two { left: -10px; bottom: 18%; }
.stage-card-three { left: 14%; top: -6%; }
.stage-chips { position: absolute; bottom: 0; left: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.chip-solid { background: rgba(18,192,160,0.16); border: 1px solid rgba(18,192,160,0.42); color: #9CEBDD; border-radius: 999px; padding: 6px 12px; font-size: 0.75rem; font-weight: 600; }

/* sections */
.page-section { padding-top: clamp(80px, 12vw, 128px); padding-bottom: clamp(80px, 12vw, 128px); }
.section-dark { background: var(--ink); color: var(--cream); }
.section-dark .section-subtitle { color: rgba(249,245,239,0.68); }
.section-paper { background: var(--paper); }
.section-light { background: #FFFFFF; }
.section-head { max-width: 860px; margin-bottom: 58px; }
.section-eye { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 700; color: var(--coral); letter-spacing: 0.18em; margin-bottom: 16px; text-transform: uppercase; }
.section-eye .line { width: 30px; height: 2px; background: var(--coral); }
.section-title { font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 800; letter-spacing: -0.7px; line-height: 1.25; color: var(--body); }
.section-dark .section-title { color: var(--cream); }
.section-subtitle { margin-top: 12px; font-size: 1rem; color: var(--muted); max-width: 760px; }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }

/* ticker strip */
.hero-proof { background: var(--dark); color: rgba(249,245,239,0.9); border-top: 1px solid rgba(249,245,239,0.1); }
.hero-proof-inner { padding: 18px 0; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; font-size: 0.9rem; }
.hero-proof i { color: var(--honey); margin-right: 8px; }
.hero-proof span { margin-right: 18px; }
.hero-proof b { color: var(--cream); margin-right: 4px; }

/* timeline */
.timeline-wrap { max-width: 1020px; margin: 0 auto; position: relative; }
.timeline-item { position: relative; padding-left: 66px; padding-bottom: clamp(46px, 6vw, 64px); }
.timeline-item:last-child { padding-bottom: 24px; }
.timeline-item::before { content: ""; position: absolute; left: 24px; top: 38px; bottom: 4px; width: 1px; border-left: 1px dashed rgba(249,245,239,0.24); }
.timeline-item:last-child::before { display: none; }
.tl-marker { position: absolute; left: 0; top: 0; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 18px 18px 18px 6px; background: var(--dark); border: 1px solid rgba(249,245,239,0.22); color: var(--teal); font-weight: 800; font-size: 1rem; box-shadow: 0 8px 18px rgba(0,0,0,0.3); }
.timeline-item.is-live .tl-marker { background: var(--coral); color: var(--ink); border-color: var(--coral); box-shadow: 0 0 0 7px rgba(255,107,61,0.14); }
.timeline-content { background: var(--dark); border: 1px solid rgba(249,245,239,0.1); border-radius: var(--radius-xl); padding: 27px 30px 24px; position: relative; transition: border-color var(--transition), transform var(--transition); }
.timeline-content:hover { border-color: rgba(255,107,61,0.48); transform: translateY(-2px); }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 0.86rem; color: var(--teal); font-weight: 700; }
.tl-meta i { margin-right: 5px; }
.timeline-content h3 { color: var(--cream); font-size: 1.25rem; font-weight: 800; margin: 4px 0 10px; }
.timeline-content p { color: rgba(249,245,239,0.72); font-size: 0.97rem; max-width: 800px; }
.tl-tags { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.tag { display: inline-flex; padding: 5px 11px; border-radius: var(--radius-chip); font-size: 0.78rem; font-weight: 700; background: rgba(255,255,255,0.07); color: rgba(249,245,239,0.84); border: 1px solid rgba(255,255,255,0.16); }
.tag-teal { background: rgba(18,192,160,0.13); color: #A5F0E4; border-color: rgba(18,192,160,0.38); }
.tag-honey { background: rgba(244,184,96,0.13); color: #F9CF9D; border-color: rgba(244,184,96,0.4); }
.tag-coral { background: rgba(255,107,61,0.14); color: #FFAF9A; border-color: rgba(255,107,61,0.36); }
.timeline-bottom { margin-top: 34px; display: flex; justify-content: center; }
.timeline-bottom a { color: rgba(249,245,239,0.64); font-size: 0.92rem; display: inline-flex; align-items: center; gap: 9px; border-bottom: 1px solid transparent; }
.timeline-bottom a:hover { color: var(--teal); border-bottom-color: rgba(18,192,160,0.5); }

/* highlights */
.highlights-card { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-soft); height: 100%; background: #fff; border: 1px solid var(--line); transition: transform var(--transition), box-shadow var(--transition); }
.highlights-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.highlight-caption { padding: 22px; }
.highlight-caption .tag { background: rgba(255,107,61,0.1); border-color: rgba(255,107,61,0.2); color: #CF4E2B; margin-bottom: 12px; }
.highlight-caption h4 { font-size: 1.16rem; font-weight: 800; line-height: 1.5; margin-bottom: 6px; }
.highlight-caption p { color: var(--muted); font-size: 0.92rem; }
.big-feature { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow); min-height: 500px; margin-bottom: 28px; }
.big-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; }
.big-feature:hover img { transform: scale(1.04); }
.big-feature-mask { position: absolute; inset: 0; background: linear-gradient(8deg, rgba(17,18,15,0.84) 0%, rgba(17,18,15,0.14) 60%); display: flex; align-items: flex-end; padding: 30px; color: var(--cream); }
.big-feature-text h4 { font-size: 1.35rem; font-weight: 800; margin-bottom: 6px; }
.big-feature-text p { color: rgba(249,245,239,0.78); font-size: 0.94rem; max-width: 560px; }
.highlight-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; }
.stat-block { flex: 1 1 140px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; }
.stat-num { font-size: 1.75rem; font-weight: 800; color: var(--coral); line-height: 1.1; }
.stat-label { color: var(--muted); font-size: 0.88rem; }

/* ticket */
.ticket-section { background: linear-gradient(180deg, var(--paper) 0%, #FFF9F2 46%, var(--paper) 100%); }
.ticket-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #FFFFFF; box-shadow: var(--shadow-soft); }
.compare-table { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: #FFFFFF; border-radius: var(--radius-xl); }
.compare-table th, .compare-table td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.94rem; vertical-align: middle; }
.compare-table th { background: var(--ink); color: var(--cream); font-weight: 700; }
.compare-table th.dim-col { color: rgba(249,245,239,0.78); }
.compare-table th.hot-col { background: var(--coral); color: var(--ink); }
.compare-table td + td, .compare-table th + th { border-left: 1px solid rgba(227,221,210,0.5); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody tr:hover td { background: rgba(18,192,160,0.05); }
.cell-plan { font-weight: 800; font-size: 1rem; }
.cell-price b { font-size: 1.4rem; font-weight: 800; color: var(--body); }
.cell-price span { color: var(--muted); font-size: 0.8rem; }
.pick-tag { color: var(--coral); font-size: 0.8rem; border: 1px solid rgba(255,107,61,0.35); padding: 3px 9px; border-radius: 999px; background: rgba(255,107,61,0.08); }
.ticket-helper-note { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px dashed var(--line); padding-top: 24px; color: var(--muted); font-size: 0.9rem; }

/* signup CTA */
.signup-section { position: relative; background: var(--ink); color: var(--cream); isolation: isolate; }
.signup-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url('/assets/images/backpic/back-3.png') center / cover no-repeat; opacity: 0.1; }
.signup-section::after { content: ""; position: absolute; width: 520px; height: 520px; left: -10%; bottom: -40%; z-index: -1; background: radial-gradient(circle, rgba(255,107,61,0.24), transparent 70%); }
.signup-inner { padding-top: clamp(80px,10vw,120px); padding-bottom: clamp(80px,10vw,120px); }
.signup-info h2 { font-size: clamp(1.9rem, 3vw, 2.65rem); font-weight: 800; line-height: 1.3; margin-bottom: 14px; }
.signup-info > p { color: rgba(249,245,239,0.7); max-width: 540px; margin-bottom: 30px; }
.steps-wrap { display: grid; gap: 16px; }
.step-mini { display: flex; align-items: flex-start; gap: 14px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: 16px 18px; }
.step-mini b { color: var(--coral); font-size: 1.5rem; font-weight: 900; line-height: 1; }
.step-mini h4 { color: var(--cream); font-size: 1rem; }
.step-mini p { color: rgba(249,245,239,0.58); font-size: 0.88rem; margin: 3px 0 0; }
.signup-service { margin-top: 18px; display: flex; gap: 14px; font-size: 0.84rem; color: rgba(249,245,239,0.58); align-items: center; flex-wrap: wrap; border-top: 1px solid rgba(249,245,239,0.1); padding-top: 18px; }
.signup-service i { color: var(--teal); }
.form-panel { background: var(--cream); border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 38px); color: var(--body); box-shadow: var(--shadow); }
.form-panel h3 { font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.form-panel .form-note { color: var(--muted); font-size: 0.88rem; margin-top: 4px; }
.field { margin-top: 18px; }
.field label { display: block; font-size: 0.9rem; font-weight: 700; margin-bottom: 7px; }
.field input, .field select { width: 100%; height: 46px; border-radius: 12px; border: 1px solid #DDD6C8; background: #fff; padding: 0 16px; transition: border-color var(--transition), box-shadow var(--transition); }
.field select { -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%236B6A63' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6 6.2L8 9.6l3.4-3.4' stroke='%236B6A63' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center / 16px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(255,107,61,0.15); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.option-mini { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--muted); margin-top: 12px; cursor: pointer; }
.option-mini input { accent-color: var(--coral); width: 16px; height: 16px; }
.form-panel .btn-block { margin-top: 22px; }
.form-success { margin-top: 16px; background: rgba(18,192,160,0.14); border: 1px solid rgba(18,192,160,0.45); color: #0C9B80; border-radius: var(--radius-md); padding: 12px 14px; font-size: 0.92rem; }
.form-success i { margin-right: 8px; }

/* faq */
.faq-section { background: #F7F3EC; }
.faq-center { max-width: 860px; margin: 0 auto; }
.accordion.c-faq { border-top: 1px solid var(--line); }
.accordion-item.c-faq-item { border-bottom: 1px solid var(--line); background: transparent; }
.accordion-item.c-faq-item.is-active { background: rgba(255,255,255,0.2); }
.c-faq-item .accordion-title { background: transparent; border: 0; padding: 24px 44px 24px 0; color: var(--body); font-size: 1.06rem; font-weight: 800; position: relative; border-radius: 0 !important; }
.c-faq-item .accordion-title:hover { background: rgba(255,107,61,0.05); color: var(--coral); }
.c-faq-item .accordion-title::before, .c-faq-item .accordion-title::after { color: var(--coral); }
.c-faq-item .accordion-content { background: transparent; border: 0; color: var(--muted); padding: 0 44px 20px 0; }

/* latest */
.latest-grid { padding-bottom: 80px; }
.latest-main-card { border-radius: var(--radius-xl); overflow: hidden; background: #fff; border: 1px solid var(--line); height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-soft); }
.latest-main-visual { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.latest-main-visual img { width: 100%; height: 100%; object-fit: cover; }
.latest-main-visual .cat-flag { position: absolute; left: 14px; top: 14px; background: rgba(17,18,15,0.78); color: #fff; padding: 5px 13px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; align-items: center; gap: 6px; display: flex; }
.latest-main-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.latest-main-card-body h3 a { color: var(--body); font-size: 1.3rem; font-weight: 800; line-height: 1.5; }
.latest-main-card-body h3 a:hover { color: var(--coral); }
.latest-main-card-body p { color: var(--muted); font-size: 0.95rem; }
.news-meta { display: flex; font-size: 0.82rem; color: var(--muted); gap: 18px; align-items: center; }
.news-meta a { color: var(--coral); font-weight: 700; }
.news-meta i { margin-right: 5px; }
.latest-card-row { display: flex; align-items: flex-start; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 17px 18px; transition: all var(--transition); }
.latest-card-row:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); border-color: rgba(255,107,61,0.36); }
.latest-card-index { font-size: 1.35rem; font-weight: 900; color: rgba(255,107,61,0.32); width: 42px; line-height: 1.2; }
.latest-card-row h4 a { font-weight: 800; color: var(--body); font-size: 1rem; line-height: 1.6; }
.latest-card-row h4 a:hover { color: var(--coral); }
.latest-card-row p { color: var(--muted); font-size: 0.88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
.latest-empty-card { text-align: center; background: rgba(255,255,255,0.45); border: 1px dashed #D2C9B8; border-radius: var(--radius-xl); padding: 70px 24px; }
.latest-empty-card i { color: var(--coral); font-size: 2.6rem; opacity: 0.8; }
.latest-empty-card h4 { font-weight: 800; margin: 12px 0 6px; }
.latest-empty-card p { color: var(--muted); font-size: 0.92rem; margin-bottom: 18px; }

/* footer */
.site-footer { background: #0A0B09; color: rgba(249,245,239,0.72); padding-top: 56px; border-top: 4px solid #171914; }
.footer-brand-logo { color: var(--cream); font-weight: 800; font-size: 1.18rem; display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.footer-brand-logo i { color: var(--coral); font-size: 1.4rem; }
.footer-brand-desc { font-size: 0.92rem; max-width: 300px; line-height: 1.85; }
.footer-bottom { border-top: 1px solid rgba(249,245,239,0.09); padding-top: 20px; margin-top: 34px; padding-bottom: 18px; }
.footer-links-cols { display: flex; gap: 22px; flex-wrap: wrap; justify-content: space-between; }
.footer-inner { display: grid; grid-template-columns: 1.3fr 0.8fr 1fr 1fr; gap: 40px; }
.site-footer h5 { color: var(--cream); font-size: 0.98rem; margin-bottom: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.site-footer h5 i { color: var(--coral); font-size: 0.88rem; }
.footer-links li a { color: rgba(249,245,239,0.68); font-size: 0.92rem; display: inline-flex; align-items: center; gap: 8px; margin: 8px 0; }
.footer-links li a i { font-size: 0.72rem; color: rgba(18,192,160,0.75); }
.footer-links li a:hover { color: var(--coral); transform: translateX(3px); }
.footer-tag-line { margin-top: 10px; }
.copyright { font-size: 0.83rem; text-align: center; color: rgba(249,245,239,0.48); padding-top: 18px; border-top: 1px solid rgba(249,245,239,0.06); margin-top: 40px; }
.copyright a { color: rgba(249,245,239,0.72); }
.up-top { position: fixed; right: 24px; bottom: 30px; width: 44px; height: 44px; border-radius: 50%; background: var(--coral); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); opacity: 0; transform: translateY(16px); pointer-events: none; transition: all 0.25s ease; }
.up-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.up-top:hover { background: #FF5B2F; }

::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: #E9E4DC; }
::-webkit-scrollbar-thumb { background: #BDB6A9; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--coral); }

@media (max-width: 1023px) {
  .site-nav, .search-pill, .btn-login { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 64em) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40em) {
  .header-wrap { padding-left: 16px; padding-right: 16px; min-height: 68px; }
  .site-logo { font-size: 1rem; }
  .logo-orbit { width: 32px; height: 32px; font-size: 14px; }
  .btn-signup { width: 42px; height: 42px; padding: 0; justify-content: center; font-size: 0; border-radius: 12px; }
  .btn-signup::before { content: "\f2b9"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-note { gap: 14px; }
  .field-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .stage-visual { width: 100%; }
  .stage-card { padding: 10px 13px; }
  .stage-card b { font-size: .95rem; }
  .timeline-item { padding-left: 54px; }
  .timeline-item::before { left: 19px; }
  .tl-marker { width: 40px; height: 40px; font-size: 0.85rem; border-radius: 14px 14px 14px 5px; }
  .timeline-content { padding: 20px 18px; }
  .compare-table { min-width: 780px; }
  .latest-card-row { padding: 14px; }
}

/* roulang page: category1 */
:root {
      --primary: #FF6B3D;
      --primary-dark: #E65328;
      --accent: #12C0A0;
      --gold: #F4B860;
      --dark: #11120F;
      --dark-2: #1A1C18;
      --paper: #F5F1EA;
      --panel-gray: #ECEAE4;
      --text-on-dark: #F9F5EF;
      --text-body: #21211D;
      --text-muted: #6B6A63;
      --line-soft: rgba(255, 107, 61, .28);
      --line-soft-green: rgba(18, 192, 160, .28);
      --radius-lg: 20px;
      --radius-md: 14px;
      --radius-btn: 999px;
      --shadow: 0 16px 40px rgba(0, 0, 0, .14);
      --transition: all .22s ease;
    }

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

    html,
    body {
      margin: 0;
      padding: 0;
      scroll-behavior: smooth;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      background: var(--paper);
      color: var(--text-body);
      line-height: 1.7;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
    }

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

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

    button,
    input,
    textarea {
      font-family: inherit;
      font-size: inherit;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    ol,
    dl,
    dd {
      margin: 0;
    }

    ul,
    ol {
      padding: 0;
      list-style: none;
    }

    .c-container {
      max-width: 1380px;
      margin: 0 auto;
      padding-left: 24px;
      padding-right: 24px;
    }

    .section-space {
      padding-top: clamp(80px, 12vw, 128px);
      padding-bottom: clamp(80px, 12vw, 128px);
    }

    .text-secondary {
      color: var(--text-muted);
    }

    .section-head h2 {
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.25;
    }

    .section-head p {
      font-size: 1rem;
      color: var(--text-muted);
      max-width: 760px;
      margin-top: 12px;
    }

    .section-head.centered {
      text-align: center;
    }

    .section-head.centered p {
      margin-left: auto;
      margin-right: auto;
    }

    .eyebrow {
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .14em;
      color: var(--primary);
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 12px;
    }

    .eyebrow i {
      font-size: .75rem;
    }

    /* ---------- 按钮 ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      border: 2px solid transparent;
      border-radius: var(--radius-btn);
      cursor: pointer;
      padding: 12px 24px;
      transition: var(--transition);
      min-height: 46px;
      font-size: .95rem;
      line-height: 1.2;
    }

    .btn-primary {
      background: var(--primary);
      color: #15120E;
      border-color: var(--primary);
      box-shadow: 0 8px 22px rgba(255, 107, 61, .2);
    }

    .btn-primary:hover,
    .btn-primary:focus {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      transform: translateY(-2px);
      color: var(--text-on-dark);
    }

    .btn-outline-light {
      background: transparent;
      color: var(--text-on-dark);
      border-color: rgba(249, 245, 239, .45);
    }

    .btn-outline-light:hover,
    .btn-outline-light:focus {
      border-color: var(--text-on-dark);
      background: rgba(249, 245, 239, .08);
      color: var(--text-on-dark);
    }

    .btn-outline-dark {
      background: transparent;
      color: var(--text-body);
      border-color: rgba(33, 33, 29, .4);
    }

    .btn-outline-dark:hover,
    .btn-outline-dark:focus {
      border-color: var(--text-body);
      background: rgba(33, 33, 29, .03);
    }

    .btn-block {
      width: 100%;
    }

    :focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 3px;
      border-radius: 6px;
    }

    /* ---------- Header ---------- */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 60;
      background: var(--dark);
      border-bottom: 1px solid rgba(249, 245, 239, .08);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 76px;
      gap: 16px;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 1.18rem;
      font-weight: 800;
      color: var(--text-on-dark);
      letter-spacing: -.01em;
      flex-shrink: 0;
    }

    .logo i {
      color: var(--primary);
      font-size: 1.33rem;
      margin-right: 2px;
    }

    .logo span {
      color: var(--primary);
      margin-right: 2px;
      font-weight: 800;
    }

    .site-nav ul {
      display: flex;
      align-items: center;
      gap: 4px;
      margin: 0;
    }

    .site-nav ul li {
      margin: 0;
    }

    .site-nav ul li a {
      display: inline-block;
      padding: 9px 16px;
      border-radius: 999px;
      color: rgba(249, 245, 239, .72);
      font-size: .92rem;
      font-weight: 600;
      transition: var(--transition);
      position: relative;
    }

    .site-nav ul li a:hover {
      color: var(--text-on-dark);
      background: rgba(255, 255, 255, .04);
    }

    .site-nav ul li.is-active a {
      color: var(--text-on-dark);
      background: rgba(255, 107, 61, .13);
      box-shadow: inset 0 0 0 1px rgba(255, 107, 61, .18);
    }

    .site-nav ul li.is-active a::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 3px;
      height: 2px;
      background: var(--primary);
      border-radius: 4px;
    }

    .header-tools {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .header-search {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 999px;
      padding: 0 14px;
      display: flex;
      align-items: center;
      min-width: 180px;
      height: 38px;
    }

    .header-search input {
      background: transparent;
      border: none;
      outline: none;
      color: var(--text-on-dark);
      font-size: .85rem;
      width: 100%;
    }

    .header-search i {
      color: rgba(249, 245, 239, .6);
      font-size: .85rem;
      margin-right: 8px;
    }

    .header-search input::placeholder {
      color: rgba(249, 245, 239, .42);
    }

    .header-auth {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn-login {
      background: transparent;
      border: 1px solid rgba(249, 245, 239, .3);
      color: var(--text-on-dark);
      border-radius: 999px;
      height: 38px;
      padding: 0 18px;
      font-weight: 600;
      font-size: .86rem;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .btn-login:hover,
    .btn-login:focus {
      border-color: rgba(249, 245, 239, .7);
      background: rgba(255, 255, 255, .06);
    }

    .btn-signup {
      background: var(--primary);
      color: var(--dark);
      border-radius: 999px;
      height: 38px;
      padding: 0 18px;
      font-weight: 700;
      font-size: .88rem;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      border: none;
      transition: var(--transition);
      white-space: nowrap;
    }

    .btn-signup:hover,
    .btn-signup:focus {
      background: var(--primary-dark);
      color: var(--text-on-dark);
      transform: translateY(-1px);
    }

    .hamburger {
      display: none;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, .22);
      width: 44px;
      height: 40px;
      border-radius: 12px;
      color: var(--text-on-dark);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      font-size: 1.05rem;
    }

    .mobile-nav-panel {
      display: none;
      background: var(--dark-2);
      border-top: 1px solid rgba(255, 255, 255, .06);
      padding: 20px 24px 24px;
    }

    .mobile-nav-panel.is-open {
      display: block;
    }

    .mobile-nav-panel ul {
      gap: 4px;
    }

    .mobile-nav-panel ul li a {
      display: block;
      padding: 12px 8px;
      color: rgba(249, 245, 239, .82);
      border-radius: 10px;
      font-weight: 600;
    }

    .mobile-nav-panel ul li.is-active a,
    .mobile-nav-panel ul li a:hover {
      background: rgba(255, 107, 61, .12);
      color: var(--text-on-dark);
    }

    .mobile-search {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .08);
      height: 42px;
      border-radius: 999px;
      margin-top: 16px;
      padding: 0 16px;
      color: rgba(249, 245, 239, .7);
    }

    .mobile-search input {
      background: transparent;
      border: none;
      outline: none;
      color: var(--text-on-dark);
      width: 100%;
      font-size: .9rem;
    }

    .mobile-nav-panel .btn-block {
      margin-top: 14px;
    }

    /* ---------- Hero ---------- */
    .topic-hero {
      background: linear-gradient(90deg, rgba(17, 18, 15, .94), rgba(17, 18, 15, .72)),
        url('/assets/images/backpic/back-1.webp') center / cover no-repeat;
      color: var(--text-on-dark);
      padding: clamp(80px, 14vw, 150px) 0;
      position: relative;
      overflow: hidden;
    }

    .topic-hero::after {
      content: "";
      position: absolute;
      width: 320px;
      height: 320px;
      right: -100px;
      bottom: -120px;
      background: radial-gradient(circle, rgba(255, 107, 61, .4), transparent 65%);
      pointer-events: none;
    }

    .topic-hero .c-container {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      align-items: center;
      gap: 120px;
      position: relative;
      z-index: 2;
    }

    .topic-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--accent);
      font-size: .9rem;
      font-weight: 600;
      border: 1px solid rgba(18, 192, 160, .5);
      background: rgba(18, 192, 160, .1);
      padding: 6px 14px;
      border-radius: 999px;
      margin-bottom: 24px;
    }

    .topic-hero h1 {
      font-size: clamp(2.4rem, 5vw, 4.3rem);
      line-height: 1.14;
      font-weight: 800;
      letter-spacing: -.01em;
      margin: 0;
    }

    .topic-hero h1 .huo {
      color: var(--primary);
    }

    .topic-hero .lead {
      margin-top: 22px;
      font-size: 1.06rem;
      color: rgba(249, 245, 239, .78);
      line-height: 1.8;
      max-width: 560px;
    }

    .hero-btn-wrap {
      margin-top: 32px;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .hero-meta-num {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .hero-meta-num .meta-item {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 18px;
      padding: 18px 16px;
    }

    .meta-item b {
      display: block;
      font-size: 1.55rem;
      font-weight: 800;
      color: var(--gold);
      margin-bottom: 4px;
    }

    .meta-item span {
      font-size: .86rem;
      color: rgba(249, 245, 239, .6);
    }

    /* ---------- 活动形式 ---------- */
    .feature-strip {
      background: var(--paper);
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 40px;
    }

    .feature-card {
      background: #FFFDF9;
      border: 1px solid #E5DDD2;
      border-radius: var(--radius-lg);
      padding: 26px 22px 24px;
      transition: var(--transition);
      animation: none;
    }

    .feature-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow);
      border-color: var(--line-soft);
    }

    .feature-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      font-size: 1.2rem;
      color: var(--primary);
      background: rgba(255, 107, 61, .1);
      border-radius: 16px;
      margin-bottom: 20px;
    }

    .feature-card h3 {
      font-size: 1.05rem;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .feature-card p {
      font-size: .9rem;
      color: var(--text-muted);
      line-height: 1.75;
    }

    /* ---------- 亮点墙 ---------- */
    .spotlight {
      background: var(--dark);
      color: var(--text-on-dark);
    }

    .spotlight .section-head h2 {
      color: var(--text-on-dark);
    }

    .spotlight .section-head p {
      color: rgba(249, 245, 239, .58);
    }

    .spotlight-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      margin-top: 48px;
    }

    .spot-card {
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .045);
      border: 1px solid rgba(255, 255, 255, .08);
      overflow: hidden;
      transition: var(--transition);
      display: flex;
      flex-direction: column;
    }

    .spot-card:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, .07);
    }

    .spot-card .spot-media {
      aspect-ratio: 16 / 10;
      overflow: hidden;
    }

    .spot-card .spot-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s ease;
    }

    .spot-card:hover .spot-media img {
      transform: scale(1.04);
    }

    .spot-card .spot-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .spot-body .tag {
      align-self: flex-start;
    }

    .spot-body h3 {
      color: var(--text-on-dark);
      font-size: 1.16rem;
      font-weight: 800;
    }

    .spot-body p {
      color: rgba(249, 245, 239, .65);
      font-size: .9rem;
      line-height: 1.7;
    }

    .spot-body a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--accent);
      font-weight: 600;
      font-size: .9rem;
      margin-top: auto;
    }

    .spot-wide {
      grid-column: span 6;
    }

    .spot-tall {
      grid-column: span 6;
    }

    .spot-small {
      grid-column: span 3;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .02em;
      padding: 4px 10px;
      border-radius: 6px;
      background: rgba(18, 192, 160, .15);
      color: var(--accent);
      line-height: 1.5;
    }

    .tag-gold {
      background: rgba(244, 184, 96, .14);
      color: var(--gold);
    }

    .tag-coral {
      background: rgba(255, 107, 61, .16);
      color: var(--primary);
    }

    /* ---------- 时间线/流程 ---------- */
    .how-to {
      background: var(--paper);
    }

    .how-wrap {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 72px;
      align-items: start;
      margin-top: 60px;
    }

    .how-intro h3 {
      font-size: 1.45rem;
      font-weight: 800;
      line-height: 1.4;
      margin-bottom: 16px;
    }

    .how-intro p {
      color: var(--text-muted);
      line-height: 1.8;
      font-size: .95rem;
    }

    .how-steps {
      position: relative;
    }

    .how-steps::before {
      content: "";
      position: absolute;
      left: 22px;
      top: 12px;
      bottom: 12px;
      width: 2px;
      border-left: 2px dashed rgba(33, 33, 29, .2);
    }

    .step-item {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      padding-bottom: 34px;
      position: relative;
    }

    .step-num {
      flex-shrink: 0;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid #E0D6CA;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 1.02rem;
      z-index: 2;
    }

    .step-item.current .step-num {
      border-color: var(--primary);
      background: var(--primary);
      color: var(--dark);
      box-shadow: 0 0 0 5px rgba(255, 107, 61, .12);
    }

    .step-info h4 {
      margin-bottom: 6px;
      font-size: 1.08rem;
      font-weight: 800;
    }

    .step-info p {
      color: var(--text-muted);
      font-size: .88rem;
      line-height: 1.75;
      max-width: 520px;
    }

    /* ---------- 邀请/社区 ---------- */
    .community-band {
      background: var(--dark-2);
      color: var(--text-on-dark);
      position: relative;
      overflow: hidden;
    }

    .community-band::before {
      content: "";
      position: absolute;
      left: -30%;
      top: -80%;
      width: 80%;
      height: 140%;
      background: radial-gradient(circle, rgba(18, 192, 160, .2), transparent 60%);
    }

    .community-inner {
      display: grid;
      grid-template-columns: 1.4fr .6fr;
      gap: 54px;
      align-items: center;
    }

    .community-text h2 {
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      font-weight: 800;
      margin-bottom: 16px;
    }

    .community-text p {
      color: rgba(249, 245, 239, .68);
      font-size: .95rem;
      max-width: 640px;
    }

    .community-btn {
      justify-self: end;
    }

    /* ---------- 图文split ---------- */
    .story-media {
      background: #EFEBE5;
    }

    .story-grid {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 64px;
      align-items: center;
    }

    .story-photo {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .story-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: 4 / 3;
    }

    .story-copy h2 {
      font-size: clamp(1.7rem, 3vw, 2.2rem);
      font-weight: 800;
      margin-bottom: 16px;
    }

    .story-copy p {
      color: var(--text-muted);
      line-height: 1.8;
      margin-bottom: 18px;
    }

    .story-copy ul li {
      position: relative;
      padding-left: 28px;
      margin-bottom: 10px;
      color: var(--text-body);
      font-size: .92rem;
    }

    .story-copy ul li::before {
      content: "\f00c";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      color: var(--accent);
      position: absolute;
      left: 0;
      top: 0;
      font-size: .8rem;
    }

    /* ---------- 公告提示 ---------- */
    .notice-line {
      border-left: 4px solid var(--accent);
      background: rgba(18, 192, 160, .07);
      border-radius: var(--radius-md);
      padding: 20px 24px;
      color: var(--text-body);
      font-size: .95rem;
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .notice-line i {
      color: var(--accent);
      font-size: 1.1rem;
      margin-top: 3px;
    }

    .notice-line strong {
      font-weight: 700;
    }

    /* ---------- FAQ ---------- */
    .faq-block {
      background: var(--paper);
    }

    .accordion-wrap {
      max-width: 820px;
      margin: 44px auto 0;
    }

    .accordion {
      list-style: none;
      margin: 0;
    }

    .accordion .accordion-item {
      border-bottom: 1px solid rgba(33, 33, 29, .14);
      background: transparent;
      border-radius: 0;
    }

    .accordion .accordion-title {
      padding: 22px 44px 22px 4px;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--text-body);
      border: none;
      position: relative;
      border-radius: 0;
      transition: var(--transition);
      line-height: 1.4;
    }

    .accordion .accordion-title:hover {
      background: transparent;
      color: var(--primary-dark);
    }

    .accordion .accordion-title::after {
      content: "\f078";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      color: var(--text-muted);
      font-size: .84rem;
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      transition: transform .3s ease;
    }

    .accordion .accordion-title[aria-expanded="true"]::after {
      transform: translateY(-50%) rotate(180deg);
      color: var(--primary);
    }

    .accordion .accordion-content {
      border: none;
      background: rgba(255, 255, 255, .5);
      color: var(--text-muted);
      padding: 2px 28px 24px 4px;
      line-height: 1.8;
      font-size: .92rem;
    }

    /* ---------- CTA ---------- */
    .cta-band {
      background: var(--dark);
      color: var(--text-on-dark);
      position: relative;
      overflow: hidden;
    }

    .cta-band::after {
      content: "";
      position: absolute;
      right: -80px;
      top: -160px;
      width: 420px;
      height: 420px;
      background: radial-gradient(circle, rgba(255, 107, 61, .4), transparent 60%);
    }

    .cta-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 50px;
      position: relative;
      z-index: 2;
    }

    .cta-copy h2 {
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      font-weight: 800;
      margin-bottom: 14px;
    }

    .cta-copy p {
      color: rgba(249, 245, 239, .62);
      font-size: .95rem;
      max-width: 580px;
      margin: 0;
    }

    .cta-btn-group {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    /* ---------- Footer ---------- */
    .site-footer {
      background: #0C0D0A;
      color: rgba(249, 245, 239, .75);
      font-size: .92rem;
    }

    .site-footer .footer-inner {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
      gap: 48px;
      padding-top: 64px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .footer-brand-logo {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 1.24rem;
      font-weight: 800;
      color: var(--text-on-dark);
    }

    .footer-brand-logo i {
      color: var(--primary);
    }

    .footer-brand-desc {
      margin-top: 14px;
      color: rgba(249, 245, 239, .52);
      font-size: .9rem;
      line-height: 1.75;
      max-width: 300px;
    }

    .footer-tag-line {
      margin-top: 16px;
    }

    .site-footer h5 {
      color: rgba(249, 245, 239, .94);
      font-size: .92rem;
      font-weight: 600;
      margin-bottom: 18px;
      letter-spacing: .01em;
    }

    .footer-links li {
      margin-bottom: 10px;
    }

    .footer-links a {
      color: rgba(249, 245, 239, .6);
      transition: var(--transition);
      font-size: .88rem;
    }

    .footer-links a:hover {
      color: var(--primary);
    }

    .footer-sub-note {
      margin-top: 14px;
      font-size: .8rem;
      color: rgba(249, 245, 239, .32);
    }

    .copyright {
      padding: 24px 0;
      color: rgba(249, 245, 239, .4);
      font-size: .83rem;
      line-height: 1.6;
      text-align: center;
      position: relative;
      z-index: 2;
    }

    .up-top {
      position: fixed;
      right: 28px;
      bottom: 30px;
      z-index: 40;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(17, 18, 15, .82);
      border: 1px solid rgba(255, 255, 255, .14);
      color: var(--text-on-dark);
      border-radius: 50%;
      transition: var(--transition);
      box-shadow: var(--shadow);
    }

    .up-top:hover {
      background: var(--primary);
      color: var(--dark);
      transform: translateY(-3px);
    }

    /* ---------- 响应式 ---------- */
    @media screen and (max-width: 1024px) {
      .header-search {
        display: none;
      }

      .site-nav,
      .header-auth .btn-login {
        display: none;
      }

      .hamburger,
      .header-auth .btn-signup {
        display: inline-flex;
      }

      .topic-hero .c-container {
        grid-template-columns: 1fr;
        gap: 34px;
      }

      .feature-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .spot-small {
        grid-column: span 6;
      }

      .spot-wide,
      .spot-tall {
        grid-column: span 6;
      }

      .how-wrap,
      .story-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

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

      .community-btn {
        justify-self: start;
      }

      .cta-inner {
        flex-direction: column;
        align-items: flex-start;
      }

      .cta-btn-group {
        justify-content: flex-start;
      }

      .site-footer .footer-inner {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media screen and (max-width: 40em) {
      .c-container {
        padding-left: 16px;
        padding-right: 16px;
      }

      .header-inner {
        height: 66px;
      }

      .site-nav {
        display: none;
      }

      .header-tools {
        gap: 6px;
      }

      .hamburger {
        display: inline-flex;
      }

      .logo {
        font-size: 1.05rem;
      }

      .btn-signup {
        height: 34px;
        padding: 0 13px;
        font-size: .82rem;
      }

      .btn-login {
        display: none;
      }

      .topic-hero {
        padding: 58px 0 68px;
      }

      .topic-hero h1 {
        font-size: clamp(2rem, 9vw, 2.6rem);
      }

      .topic-hero .lead {
        font-size: .94rem;
      }

      .hero-btn-wrap .btn {
        width: calc(50% - 7px);
      }

      .hero-meta-num {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

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

      .spotlight-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 10px;
        margin-top: 34px;
        margin-left: -16px;
        padding-left: 16px;
        width: calc(100% + 16px);
      }

      .spotwide,
      .spot-tall,
      .spot-small {
        grid-column: auto;
        flex: 0 0 82%;
        scroll-snap-align: start;
      }

      .spot-card {
        min-height: 330px;
      }

      .how-wrap,
      .story-grid {
        gap: 36px;
      }

      .community-inner {
        gap: 24px;
      }

      .community-text p {
        font-size: .9rem;
      }

      .cta-band {
        padding: 72px 0;
      }

      .cta-btn-group .btn {
        width: 100%;
      }

      .site-footer .footer-inner {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-top: 48px;
      }

      .footer-brand-desc {
        max-width: none;
      }

      .up-top {
        right: 16px;
        bottom: 16px;
      }
    }

    @media screen and (min-width: 40.063em) {
      .mobile-nav-panel {
        display: none !important;
      }
    }

/* roulang page: article */
:root {
  --font-main: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --ink: #11120F;
  --ink-soft: #1A1C18;
  --ink-deep: #0C0D0B;
  --cream: #F9F5EF;
  --paper: #F5F1EA;
  --card: #FFFDF8;
  --coral: #FF6B3D;
  --coral-hover: #ff8257;
  --emerald: #12C0A0;
  --honey: #F4B860;
  --text: #21211D;
  --muted: #6B6A63;
  --line: #E7E0D5;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --shadow: 0 16px 40px rgba(0,0,0,0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--paper);
  color: var(--text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

.c-container {
  max-width: 1380px;
  margin: 0 auto;
  padding-left: clamp(18px, 3.5vw, 36px);
  padding-right: clamp(18px, 3.5vw, 36px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  background: var(--coral);
  color: var(--ink);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.skip-link:focus { left: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  transition: all .25s ease;
  text-align: center;
  white-space: nowrap;
}
.btn-primary {
  background: var(--coral);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(255,107,61,.25);
}
.btn-primary:hover {
  background: var(--coral-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255,107,61,.3);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  border-color: rgba(249,245,239,.4);
  color: var(--cream);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--cream);
  background: rgba(249,245,239,.06);
  transform: translateY(-2px);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(17,18,15,.98);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 74px;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}
.brand-logo .logo-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,107,61,.16);
  color: var(--coral);
  font-size: 1.05rem;
}
.brand-logo .brand-text { font-size: 1.18rem; }

.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.site-nav li { list-style: none; }
.site-nav a {
  position: relative;
  display: block;
  padding: 10px 15px;
  color: rgba(249,245,239,.68);
  font-size: .95rem;
  font-weight: 500;
  border-radius: 8px;
  transition: color .2s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 4px;
  height: 2px;
  background: var(--coral);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
}
.site-nav a:hover { color: var(--cream); }
.site-nav a:hover::after,
.site-nav li.is-active a::after { transform: scaleX(1); }
.site-nav li.is-active a { color: var(--cream); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 210px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  transition: border-color .2s ease, background .2s ease;
}
.nav-search:focus-within {
  border-color: var(--coral);
  background: rgba(255,255,255,.08);
}
.nav-search i {
  position: absolute;
  left: 14px;
  color: rgba(249,245,239,.55);
  font-size: .85rem;
  pointer-events: none;
}
.nav-search input {
  width: 100%;
  height: 100%;
  padding: 0 14px 0 38px;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-size: .88rem;
  outline: none;
}
.nav-search input::placeholder { color: rgba(249,245,239,.4); }

.nav-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--radius-pill);
  color: rgba(249,245,239,.84);
  font-size: .9rem;
  font-weight: 600;
  transition: all .2s ease;
}
.nav-login:hover {
  border-color: var(--cream);
  color: var(--cream);
  background: rgba(255,255,255,.05);
}

.nav-join {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background: var(--coral);
  color: var(--ink);
  font-weight: 800;
  font-size: .93rem;
  box-shadow: 0 6px 18px rgba(255,107,61,.22);
  transition: all .22s ease;
}
.nav-join:hover {
  background: var(--coral-hover);
  transform: translateY(-2px);
}
.nav-join:active { transform: translateY(0); }

.mobile-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: var(--cream);
  font-size: 1.15rem;
  cursor: pointer;
  transition: all .2s ease;
}
.mobile-toggle:hover {
  border-color: var(--coral);
  color: var(--coral);
}

/* Off-canvas */
.off-canvas {
  background: var(--ink);
  color: var(--cream);
}
.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-weight: 900;
}
.mobile-brand i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,107,61,.16);
  color: var(--coral);
}
.mobile-close {
  border: 0;
  background: transparent;
  color: rgba(249,245,239,.6);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.mobile-close:hover { color: var(--coral); }

.mobile-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 18px 8px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.04);
}
.mobile-search-form i { color: rgba(249,245,239,.5); font-size: .85rem; }
.mobile-search-form input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--cream);
  outline: none;
  font-size: .92rem;
}
.mobile-search-form input::placeholder { color: rgba(249,245,239,.38); }

.mobile-nav {
  margin: 6px 18px 10px;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mobile-nav li { list-style: none; }
.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(249,245,239,.8);
  font-weight: 600;
}
.mobile-nav a i { font-size: .75rem; color: rgba(249,245,239,.35); }
.mobile-nav a:hover { color: var(--coral); }
.mobile-nav li.is-active a { color: var(--coral); }

.mobile-actions {
  display: grid;
  gap: 10px;
  margin: 20px 18px;
}
.mobile-actions .btn { width: 100%; }
.btn-outline-soft {
  border: 1px solid rgba(255,255,255,.2);
  color: var(--cream);
  background: transparent;
}
.btn-outline-soft:hover { border-color: var(--cream); background: rgba(255,255,255,.05); }

/* Article Masthead */
.article-masthead {
  position: relative;
  color: var(--cream);
  background:
    linear-gradient(117deg, rgba(17,18,15,.94) 0%, rgba(24,26,21,.78) 52%, rgba(38,32,27,.56) 100%),
    url("/assets/images/backpic/back-1.webp") center 28% / cover no-repeat;
  padding: clamp(76px, 13vw, 128px) 0 clamp(52px, 8vw, 88px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.masthead-inner { max-width: 1020px; margin: 0 auto; }

.article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: .9rem;
  color: rgba(249,245,239,.62);
}
.article-breadcrumb a { color: rgba(249,245,239,.72); transition: color .2s ease; }
.article-breadcrumb a:hover { color: var(--coral); }
.article-breadcrumb i { font-size: .7rem; }
.article-breadcrumb span[aria-current="page"] {
  color: rgba(249,245,239,.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
  display: inline-block;
  vertical-align: bottom;
}

.article-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,107,61,.16);
  border: 1px solid rgba(255,107,61,.35);
  color: #FFC4AE;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.article-kicker i { color: var(--coral); }

.article-title {
  max-width: 900px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.55rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: .01em;
  color: var(--cream);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(249,245,239,.72);
  font-size: .92rem;
}
.meta-item { display: inline-flex; align-items: center; gap: 8px; }
.meta-item i { color: var(--emerald); }

/* Article Featured Image */
.article-feature-wrap { position: relative; z-index: 2; max-width: 980px; margin: -52px auto 0; padding: 0 20px; }
.article-feature {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  border: 8px solid var(--paper);
  box-shadow: 0 30px 70px rgba(17,18,15,.26);
}
.article-feature img {
  width: 100%;
  aspect-ratio: 16 / 8.4;
  object-fit: cover;
}
.article-feature figcaption {
  padding: 12px 18px;
  background: #fff;
  color: var(--muted);
  font-size: .83rem;
  text-align: center;
}

/* Article Reader */
.article-reader {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 72px) 24px 30px;
}
.reader-card {
  background: var(--card);
  border: 1px solid rgba(33,33,29,.07);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: clamp(28px, 5vw, 56px);
}

.article-body { color: var(--text); font-size: 1.05rem; line-height: 1.9; }
.article-body p { margin: 1.5em 0; }
.article-body strong { font-weight: 700; color: var(--ink); }
.article-body em { font-style: italic; color: #4A453C; }

.article-body h2 {
  margin: 2em 0 .7em;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
  padding-left: 16px;
  border-left: 4px solid var(--coral);
}
.article-body h3 {
  margin: 1.9em 0 .6em;
  font-size: 1.24rem;
  font-weight: 800;
  color: var(--ink);
}
.article-body h4 {
  margin: 1.6em 0 .55em;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--ink);
}
.article-body a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity .2s;
}
.article-body a:hover { opacity: .75; }

.article-body blockquote {
  margin: 1.8em 0;
  padding: 18px 22px;
  border-left: 4px solid var(--emerald);
  background: #F1EFE8;
  border-radius: 0 14px 14px 0;
  color: #3A3A30;
}
.article-body blockquote p { margin: .2em 0; }

.article-body ul {
  list-style: none;
  margin: 1.4em 0;
  padding: 0;
}
.article-body ul li {
  position: relative;
  padding-left: 24px;
  margin: .6em 0;
}
.article-body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .82em;
  width: 8px;
  height: 8px;
  background: var(--coral);
  transform: rotate(45deg);
  border-radius: 1px;
}
.article-body ol { margin: 1.4em 0; padding-left: 24px; }
.article-body ol li { margin: .6em 0; padding-left: 6px; }

.article-body img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  margin: 1.5em 0;
}
.article-body figure {
  margin: 1.8em 0;
}
.article-body figure img { margin-bottom: .6em; }
.article-body figcaption {
  color: var(--muted);
  font-size: .84rem;
  text-align: center;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: .97rem;
}
.article-body th,
.article-body td {
  border: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
}
.article-body th {
  background: #ECE7DD;
  color: var(--ink);
  font-weight: 700;
}
.article-body tr:nth-child(even) td { background: rgba(245,241,234,.5); }

.article-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.2em 0;
}

/* Article toolbar */
.article-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.article-backline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .93rem;
}
.article-backline i { color: var(--emerald); }
.article-backline a {
  color: var(--text);
  font-weight: 700;
  border-bottom: 1px solid rgba(255,107,61,.4);
  transition: color .2s;
}
.article-backline a:hover { color: var(--coral); }

.button-return {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: 600;
  font-size: .9rem;
  transition: all .2s ease;
}
.button-return:hover {
  border-color: var(--coral);
  background: rgba(255,107,61,.08);
  color: var(--coral);
}

/* Continue */
.related-strip {
  max-width: 860px;
  margin: 0 auto;
  padding: 58px 24px 30px;
}
.related-strip h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 24px;
}
.related-list { list-style: none; margin: 0; padding: 0; }
.related-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  transition: all .2s ease;
}
.related-row a { display: flex; flex: 1; align-items: center; gap: 18px; }
.related-row:hover { padding-left: 10px; }
.related-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,107,61,.1);
  color: var(--coral);
  font-size: 1rem;
}
.related-content { min-width: 0; }
.related-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--emerald);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.related-title {
  display: block;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.02rem;
  margin-bottom: 5px;
  line-height: 1.5;
}
.related-desc {
  display: block;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}
.related-arrow {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color .2s;
}
.related-row:hover .related-arrow { color: var(--coral); }

/* Bottom CTA */
.article-cta-area { padding: clamp(40px, 7vw, 74px) 24px 10px; }
.article-cta-box {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: clamp(30px, 5vw, 52px);
  border-radius: 28px;
  color: var(--cream);
  background:
    radial-gradient(circle at 12% 140%, rgba(255,107,61,.4), transparent 45%),
    radial-gradient(circle at 90% -30%, rgba(18,192,160,.25), transparent 40%),
    var(--ink);
  overflow: hidden;
}
.article-cta-box h2 {
  margin: 0 0 10px;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  font-weight: 900;
  line-height: 1.35;
}
.article-cta-box p {
  margin: 0;
  color: rgba(249,245,239,.68);
  max-width: 560px;
}
.article-cta-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Not found */
.notfound-wrap {
  padding: clamp(80px, 15vw, 150px) 24px;
}
.notfound-card {
  max-width: 680px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid rgba(33,33,29,.07);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: clamp(40px, 6vw, 70px) clamp(24px, 5vw, 60px);
  text-align: center;
}
.notfound-card i {
  color: var(--coral);
  font-size: 2.4rem;
  margin-bottom: 14px;
}
.notfound-card h1 {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--ink);
}
.notfound-card p {
  color: var(--muted);
  font-size: 1rem;
  margin: 0 auto 30px;
  max-width: 420px;
}
.notfound-card .btn { min-width: 180px; }

/* Footer */
.site-footer {
  background: var(--ink-deep);
  color: rgba(249,245,239,.84);
  margin-top: clamp(70px, 10vw, 120px);
  padding-top: 70px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-weight: 900;
  font-size: 1.18rem;
  margin-bottom: 14px;
}
.footer-brand-logo i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,107,61,.16);
  color: var(--coral);
}
.footer-brand-desc {
  color: rgba(249,245,239,.58);
  font-size: .94rem;
  line-height: 1.75;
  max-width: 390px;
  margin: 0 0 18px;
}
.footer-tag-line { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(249,245,239,.72);
  font-size: .78rem;
  font-weight: 600;
}
.site-footer h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 18px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--cream);
}
.site-footer h5 i { color: var(--emerald); font-size: .9rem; }
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li { list-style: none; margin-bottom: 10px; }
.footer-links a {
  color: rgba(249,245,239,.6);
  font-size: .94rem;
  transition: color .2s ease, padding-left .2s ease;
}
.footer-links a:hover {
  color: var(--coral);
  padding-left: 4px;
}
.copyright {
  padding: 26px 0 32px;
  text-align: center;
  color: rgba(249,245,239,.4);
  font-size: .86rem;
}

.up-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--coral);
  color: var(--ink);
  border-radius: 50%;
  font-size: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: .95;
  transition: all .25s ease;
  z-index: 70;
}
.up-top:hover {
  background: var(--cream);
  transform: translateY(-4px);
}

/* Responsive */
@media (max-width: 1180px) {
  .nav-search { width: 160px; }
  .site-nav ul { gap: 0; }
  .site-nav a { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 1023.98px) {
  .site-nav,
  .nav-search { display: none; }
  .mobile-toggle { display: inline-flex; }
  .header-row { justify-content: flex-start; flex-wrap: nowrap; }
  .header-row .nav-actions { margin-left: auto; }
}

@media (max-width: 767.98px) {
  .header-row { height: 66px; }
  .brand-text { font-size: 1.02rem; }
  .brand-logo .logo-mark { width: 32px; height: 32px; font-size: .92rem; border-radius: 10px; }
  .nav-login { display: none; }
  .nav-join { height: 38px; padding: 0 16px; font-size: .88rem; }
  .article-title { font-size: clamp(1.7rem, 8vw, 2.6rem); }
  .article-breadcrumb span[aria-current="page"] { max-width: 180px; }
  .article-feature { border-width: 5px; border-radius: 20px; }
  .reader-card { padding: 22px 18px; border-radius: 18px; }
  .article-body { font-size: 1rem; }
  .article-toolbar { flex-direction: column; align-items: flex-start; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
}

@media (max-width: 560px) {
  .header-row .nav-join { display: none; }
  .mobile-toggle { display: inline-flex; }
  .header-row { justify-content: space-between; }
  .nav-actions { margin-left: auto; }
  .article-cta-box { padding: 32px 22px; flex-direction: column; align-items: flex-start; }
  .article-cta-actions { width: 100%; }
  .article-cta-actions .btn { flex: 1; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .related-row a { flex-direction: column; align-items: flex-start; }
  .related-icon { display: none; }
  .related-arrow { font-size: .85rem; }
}

/* roulang page: category2 */
:root {
  --coral: #FF6B3D;
  --cyan: #12C0A0;
  --honey: #F4B860;
  --ink: #11120F;
  --ink-deep: #0D0E0B;
  --ink-soft: #1A1C18;
  --paper: #F5F1EA;
  --paper-deep: #EDE6DB;
  --body-text: #21211D;
  --muted: #6B6A63;
  --text-light: #F9F5EF;
  --line: rgba(33, 33, 29, .12);
  --line-dark: rgba(249, 245, 239, .14);
  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 6px;
  --shadow: 0 16px 40px rgba(0, 0, 0, .14);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, .08);
  --pad-section: clamp(80px, 12vw, 128px);
  --container: 1380px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  line-height: 1.7;
  font-weight: 400;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol, figure, h1, h2, h3, h4, p, blockquote { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
.c-container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}
.c-section { padding-top: var(--pad-section); padding-bottom: var(--pad-section); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--coral);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: .9rem;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--coral); display: inline-block; }
.eyebrow.on-dark { color: var(--honey); }
.eyebrow.on-dark::before { background: var(--honey); }
.section-head { margin-bottom: clamp(32px, 6vw, 56px); }
.section-head .h2-lead { font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.25; margin-top: 8px; letter-spacing: -.02em; }
.h2-lead em { font-style: normal; color: var(--coral); }
.h2-lead.on-dark em { color: var(--honey); }
.h3-title { font-weight: 800; font-size: 1.25rem; margin-bottom: 8px; }
.h4-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 6px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nav-row {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-light);
  font-weight: 800;
  font-size: 1.22rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-logo i { color: var(--coral); font-size: 1.28rem; }
.site-nav { display: flex; flex: 1; align-items: center; justify-content: center; }
.site-nav > ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav > ul > li > a {
  color: rgba(249, 245, 239, .78);
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  display: inline-block;
  transition: color .2s, background .2s;
}
.site-nav > ul > li > a:hover { color: var(--text-light); background: rgba(255, 255, 255, .06); }
.site-nav > ul > li.is-active > a {
  color: var(--text-light);
  box-shadow: inset 0 -2px 0 var(--coral);
  background: rgba(255, 107, 61, .1);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.nav-search {
  display: flex;
  align-items: center;
  background: rgba(249, 245, 239, .08);
  border: 1px solid rgba(249, 245, 239, .16);
  border-radius: 999px;
  padding: 8px 8px 8px 14px;
  min-width: 180px;
}
.nav-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-light);
  width: 100%;
  font-size: .9rem;
}
.nav-search input::placeholder { color: rgba(249, 245, 239, .45); }
.nav-search button {
  background: var(--coral);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
}
.nav-search button:hover { background: #ff875f; transform: scale(1.04); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: all .2s;
  font-size: .95rem;
  line-height: 1.4;
}
.btn-coral { background: var(--coral); color: var(--ink); }
.btn-coral:hover { background: #ff875f; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 107, 61, .22); }
.btn-ghost { border-color: rgba(249, 245, 239, .35); color: var(--text-light); background: transparent; }
.btn-ghost:hover { border-color: var(--text-light); color: #fff; }
.btn-line { border-color: rgba(249, 245, 239, .3); color: var(--text-light); background: transparent; }
.btn-line:hover { border-color: var(--text-light); background: rgba(249, 245, 239, .08); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ghost-dark { border-color: rgba(33, 33, 29, .3); color: var(--body-text); background: transparent; }
.btn-ghost-dark:hover { border-color: var(--body-text); background: rgba(33, 33, 29, .04); }
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--text-light);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 1.2rem;
  align-items: center;
  justify-content: center;
}
.nav-inner-actions { display: none; }
.nav-toggle-close { display: none; }

/* Hero */
.event-hero {
  background:
    linear-gradient(96deg, rgba(13, 14, 11, .96) 0%, rgba(26, 28, 24, .82) 55%, rgba(26, 28, 24, .36) 100%),
    url('/assets/images/backpic/back-1.webp') center/cover no-repeat var(--ink);
  color: var(--text-light);
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: clamp(44px, 8vw, 88px) 0;
  position: relative;
  overflow: hidden;
}
.event-hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -140px;
  top: -30px;
  border-radius: 50%;
  background: rgba(255, 107, 61, .22);
  filter: blur(90px);
  pointer-events: none;
}
.event-hero::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 184, 96, .3), transparent);
}
.event-hero .c-container { position: relative; z-index: 2; }
.hero-copy { max-width: 760px; }
.hero-copy h1 {
  font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 1.12;
  letter-spacing: -.04em;
  margin: 16px 0 20px;
}
.hero-copy h1 span { color: var(--honey); display: block; }
.hero-description {
  font-size: 1.05rem;
  color: rgba(249, 245, 239, .76);
  max-width: 620px;
  margin: 0 0 28px;
}
.hero-meta-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }
.hero-meta-tags li {
  color: rgba(249, 245, 239, .86);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .86rem;
  background: rgba(249, 245, 239, .06);
}
.hero-meta-tags li i { color: var(--cyan); margin-right: 6px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.hero-panel {
  margin-top: 24px;
  border-left: 3px solid var(--cyan);
  padding: 4px 0 4px 16px;
  color: rgba(249, 245, 239, .72);
  font-size: .95rem;
}
.event-visual{
  position: relative;
  z-index: 2;
  padding: 20px;
}
.event-visual .visual-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line-dark);
  border-radius: 28px;
  padding: 12px;
  transform: rotate(1deg);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.event-visual .visual-card-inner { border-radius: 20px; overflow: hidden; }
.event-visual .visual-label {
  background: var(--ink-soft);
  border-top: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: var(--text-light);
  font-size: .9rem;
}
.visual-corner { position: absolute; width: 70px; height: 70px; border-top: 3px solid var(--coral); border-left: 3px solid var(--coral); top: 2px; left: 0; border-radius: 18px 0 0 0; opacity: .8; }

/* Breadcrumb */
.page-breadcrumb-wrap {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
}
.page-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .92rem;
  padding: 14px 0;
  color: var(--muted);
}
.page-breadcrumb a { color: var(--muted); }
.page-breadcrumb a:hover { color: var(--coral); }
.page-breadcrumb i { font-size: .78rem; }
.page-breadcrumb strong { color: var(--body-text); font-weight: 600; }

/* Intro split */
.intro-split {
  background: var(--paper);
}
.intro-image-grid { display: grid; gap: 20px; }
.intro-image-grid .img-frame {
  background: var(--paper-deep);
  border-radius: var(--radius);
  overflow: hidden;
}
.intro-heading { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.3; margin: 10px 0 18px; }
.intro-body { color: #45443d; font-size: 1.02rem; }
.check-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.check-list li { position: relative; padding-left: 32px; font-weight: 600; color: #35352f; }
.check-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cyan);
  background: rgba(18, 192, 160, .12);
  width: 22px;
  height: 22px;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.intro-stats { display: flex; gap: 28px; margin-top: 34px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; }
.stat-item .num { font-size: 1.7rem; font-weight: 800; color: var(--ink); letter-spacing: -.04em; }
.stat-item .num i { color: var(--coral); font-size: .6em; vertical-align: top; }
.stat-item .label { display: block; font-size: .9rem; color: var(--muted); }
.mini-tag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; background: rgba(18, 192, 160, .1); border: 1px solid rgba(18, 192, 160, .18); padding: 7px 14px; border-radius: 999px; font-size: .88rem; color: #0d8a73; font-weight: 700; }

/* Spotlight */
.spotlight-sec { background: var(--paper); }
.spotlight-grid { display: grid; gap: 24px; padding-top: 8px; }
.spotlight-card {
  background: #fff9f2;
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid var(--line);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  min-height: 160px;
}
.spotlight-card:hover { transform: translateY(-4px); border-color: rgba(255, 107, 61, .3); box-shadow: var(--shadow-soft); }
.spotlight-icon {
  background: var(--ink);
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--coral);
}
.spotlight-icon.green { color: var(--cyan); }
.spotlight-icon.yellow { color: var(--honey); }
.spotlight-tag { display: inline-block; margin-bottom: 8px; font-size: .82rem; color: var(--coral); font-weight: 700; }
.spotlight-card p { color: var(--muted); font-size: .95rem; }
.h-light-card { margin-top: 24px; }

/* media blocks */
.media-feature-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: stretch; margin-top: 24px; }
.media-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: #fffdf8;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}
.media-cover { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.media-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.media-cover:hover img { transform: scale(1.03); }
.media-cover .media-label {
  position: absolute;
  left: 16px; bottom: 14px;
  background: rgba(17, 18, 15, .78);
  color: var(--text-light);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .84rem;
}
.media-copy { padding: 22px 22px 26px; flex: 1; }
.media-copy h3 { font-size: 1.25rem; font-weight: 800; }
.media-copy p { color: var(--muted); font-size: .94rem; margin-top: 6px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--coral); margin-top: 12px; }
.link-arrow i { transition: transform .2s; }
.link-arrow:hover i { transform: translateX(4px); }

/* Agenda timeline */
.agenda-sec {
  background: linear-gradient(150deg, #10110e 0%, #171814 55%, #1b140d 100%);
  color: var(--text-light);
}
.agenda-timeline { max-width: 860px; margin: 0 auto; position: relative; }
.agenda-timeline::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: repeating-linear-gradient(180deg, rgba(249,245,239,.24) 0 6px, transparent 6px 12px);
}
.agenda-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 0 0 36px;
}
.agenda-item:last-child { padding-bottom: 0; }
.agenda-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink-soft);
  border: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(249,245,239,.48);
  font-size: .8rem;
  font-weight: 800;
  z-index: 1;
  position: relative;
}
.agenda-item.hot .agenda-dot { background: var(--coral); color: var(--ink); border-color: var(--coral); }
.agenda-item.done .agenda-dot { background: rgba(18,192,160,.22); border-color: rgba(18,192,160,.5); color: var(--cyan); }
.agenda-body { background: rgba(255,255,255,.045); border: 1px solid var(--line-dark); padding: 18px 20px; border-radius: var(--radius-sm); }
.agenda-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.agenda-slot { font-size: .82rem; background: rgba(244,184,96,.16); color: var(--honey); padding: 4px 10px; border-radius: 6px; font-weight: 700; letter-spacing: .05em; }
.agenda-chip { font-size: .8rem; color: rgba(249,245,239,.65); border: 1px solid var(--line-dark); padding: 4px 10px; border-radius: 6px; }
.agenda-body h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 4px; }
.agenda-body p { color: rgba(249,245,239,.68); font-size: .93rem; line-height: 1.75; }
.dark-text-link { margin-top: 32px; text-align: center; }
.dark-text-link a { color: var(--text-light); display: inline-flex; align-items: center; gap: 9px; border-bottom: 2px solid var(--cyan); padding-bottom: 4px; font-weight: 700; }
.dark-text-link a i { color: var(--cyan); }

/* Venue + practical */
.venue-sec { background: var(--paper-deep); }
.venue-cards { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center; }
.venue-image-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.venue-content-card { padding: 10px 4px; }
.venue-content-card h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 800; margin-bottom: 16px; }
.venue-info-list { list-style: none; padding: 0; margin: 24px 0 0; }
.venue-info-list li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.venue-info-list li i { color: var(--cyan); font-size: 1.2rem; width: 28px; text-align: center; }
.venue-info-list li h4 { font-size: 1.03rem; }
.venue-info-list li p { color: var(--muted); font-size: .93rem; }

/* Signup / registration */
.signup-sec {
  background: var(--ink);
  color: var(--text-light);
  position: relative;
  overflow: hidden;
}
.signup-sec::before {
  content: "";
  position: absolute;
  right: -200px;
  top: 20%;
  width: 480px;
  height: 480px;
  background: rgba(255,107,61,.16);
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.signup-sec .c-container { position: relative; z-index: 2; }
.signup-title { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; margin-bottom: 12px; }
.signup-form-wrap { background: var(--ink-soft); border: 1px solid var(--line-dark); border-radius: 24px; padding: clamp(20px, 4vw, 36px); }
.signup-form-wrap label { color: var(--text-light); font-weight: 600; margin-bottom: 16px; }
.signup-form-wrap input, .signup-form-wrap select {
  margin-top: 8px;
  background: rgba(249,245,239,.08);
  border: 1px solid rgba(249,245,239,.14);
  border-radius: 14px;
  color: var(--text-light);
  height: 46px;
  padding: 0 14px;
  outline: none;
  width: 100%;
}
.signup-form-wrap input::placeholder { color: rgba(249,245,239,.4); }
.signup-form-wrap select { background: var(--ink-soft); }
.signup-form-wrap option { color: var(--body-text); }
.signup-form-wrap input:focus, .signup-form-wrap select:focus { border-color: var(--coral); }
.signup-left { padding-right: 20px; }
.contact-mini { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; margin-top: 12px; color: rgba(249,245,239,.6); }
.contact-mini i { color: var(--cyan); }
.reset-note { font-size: .88rem; color: rgba(249,245,239,.5); line-height: 1.8; margin-top: 18px; }

/* FAQ */
.faq-sec { background: var(--paper); }
.faq-inner { max-width: 820px; margin: 0 auto; }
.accordion { background: transparent; }
.accordion-item {
  background: #ffffffd6;
  border: 1px solid rgba(33,33,29,.08);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: background .25s;
}
.accordion-item:hover { background: #fff; }
.accordion-title {
  color: var(--body-text) !important;
  font-weight: 700;
  padding: 18px 54px 18px 22px !important;
  border-bottom: 1px solid transparent;
  position: relative;
  display: block;
  font-size: 1rem;
  transition: background .2s;
}
.accordion-title::before { display: none; }
.accordion-title::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 20px;
  top: 20px;
  color: var(--coral);
  transition: transform .3s;
}
.accordion-item.is-active .accordion-title::after { transform: rotate(180deg); }
.accordion-title:hover, .accordion-item.is-active .accordion-title { background: rgba(255,107,61,.06); }
.accordion-content { border-bottom: 1px solid var(--line); }
.accordion-content p { padding: 0 22px 18px; color: var(--muted); font-size: .95rem; }
.accordion-content .content-inner { padding: 0 22px 18px; color: var(--muted); font-size: .95rem; }

/* final CTA */
.final-cta { background: linear-gradient(105deg, var(--paper) 0%, #eadcc9 100%); }
.cta-banner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; background: #22231e; border-radius: 28px; padding: clamp(28px, 6vw, 54px); color: var(--text-light); box-shadow: var(--shadow); }
.cta-banner h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; }
.cta-banner p { color: rgba(249,245,239,.7); margin-top: 8px; max-width: 600px; }
.cta-banner a { margin-top: 8px; }

/* footer */
.site-footer {
  background: var(--ink-deep);
  color: rgba(249, 245, 239, .72);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 64px 0 34px;
}
.footer-inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; margin-bottom: 36px; }
.footer-inner > div:nth-child(1) { grid-column: span 4; }
.footer-inner > div:nth-child(2) { grid-column: span 2; }
.footer-inner > div:nth-child(3) { grid-column: span 3; }
.footer-inner > div:nth-child(4) { grid-column: span 3; }
.footer-brand-logo { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: 800; color: var(--text-light); }
.footer-brand-logo i { color: var(--coral); }
.footer-brand-desc { font-size: .92rem; color: rgba(249,245,239,.55); margin: 14px 0 18px; line-height: 1.9; }
.footer-tag-line { display: flex; }
.footer-links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.footer-links a { display: inline-flex; align-items: center; gap: 8px; color: rgba(249,245,239,.6); font-size: .92rem; transition: color .2s, transform .2s; }
.footer-links a:hover { color: var(--text-light); transform: translateX(4px); }
.footer-links a i { color: var(--coral); font-size: .78rem; }
.site-footer h5 { color: var(--text-light); font-size: 1rem; font-weight: 800; margin: 6px 0 0; display: flex; align-items: center; gap: 8px; }
.copyright { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; font-size: .83rem; color: rgba(249,245,239,.45); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.up-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  background: var(--coral);
  color: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.24);
  opacity: .95;
  z-index: 60;
  transition: transform .2s, background .2s;
}
.up-top:hover { transform: translateY(-4px); background: #ff875f; }

/* Media queries */
@media (max-width: 80em) {
  .nav-search { min-width: 150px; }
  .nav-row { gap: 14px; }
}
@media (max-width: 64em) {
  .nav-row { gap: 12px; }
  .nav-toggle { display: inline-flex; }
  .nav-actions { display: none; }
  .site-nav {
    display: none;
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    background: var(--ink-soft);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 22px 50px rgba(0,0,0,.45);
    z-index: 100;
  }
  .site-nav.mobile-open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .site-nav > ul > li > a { display: block; padding: 12px 16px; border-radius: 12px; }
  .site-nav > ul > li.is-active > a { box-shadow: none; background: rgba(255,107,61,.24); }
  .nav-inner-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-dark); }
  .nav-inner-actions .nav-search { min-width: 0; order: 1; width: 100%; }
  .nav-inner-actions .btn { width: 100%; }
  .footer-inner { grid-template-columns: repeat(2,1fr); }
  .footer-inner > div:nth-child(1) { grid-column: span 2; }
  .footer-inner > div:nth-child(2), .footer-inner > div:nth-child(3), .footer-inner > div:nth-child(4) { grid-column: span 1; }
  .event-hero { min-height: auto; }
  .event-visual { display: none; }
  .media-feature-row { grid-template-columns: 1fr; }
  .venue-cards { grid-template-columns: 1fr; }
}
@media (max-width: 48em) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-inner > div { grid-column: span 1 !important; }
  .check-list { grid-template-columns: 1fr; }
  .spotlight-card { grid-template-columns: 1fr; padding: 18px; }
  .spotlight-icon { width: 54px; height: 54px; font-size: 1.3rem; border-radius: 14px; }
  .agenda-timeline::before { left: 14px; }
  .agenda-item { grid-template-columns: 32px 1fr; gap: 10px; padding-left: 4px; }
  .agenda-dot { width: 30px; height: 30px; font-size: .72rem; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; }
  .signup-left { padding-right: 0; }
}