/* roulang page: index */
:root {
            --brand-950: #07201F;
            --brand-900: #0A2A29;
            --brand-800: #0B3A38;
            --brand-600: #0E6B5C;
            --brand-500: #0FA98F;
            --brand-400: #2FD0B4;
            --gold-600: #A87A35;
            --gold-500: #C8974A;
            --gold-400: #D9A95F;
            --gold-300: #F0D8A6;
            --cream: #F7F5F0;
            --soft: #EFEBE3;
            --ink: #1C302E;
            --muted: #5C6F6B;
            --line: #E0D9CA;
            --alert: #E0523D;
            --shadow-card: 0 14px 44px rgba(22, 45, 42, 0.08);
            --shadow-lift: 0 22px 60px rgba(22, 45, 42, 0.14);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei UI', 'HarmonyOS Sans SC', 'Noto Sans SC', 'Microsoft YaHei', 'system-ui', 'sans-serif';
            background-color: var(--brand-900);
            color: var(--ink);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        *，
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

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

        a {
            text-decoration: none;
        }
        button {
            cursor: pointer;
        }
        input,
        select,
        textarea {
            font-family: inherit;
        }

        .container-x {
            max-width: 1240px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 24px;
            padding-right: 24px;
        }

        .brand-gradient {
            background: linear-gradient(135deg, #0B3A38 0%， #11665F 55%, #17A892 100%);
        }

        .gold-gradient {
            background: linear-gradient(135deg, #A87A35 0%, #D4A448 48%, #F4DEAA 100%);
        }

        .gold-text {
            background: linear-gradient(135deg, #D9A95F 0%， #F4DEAA 50%, #C8974A 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-bg {
            background-image: url('/assets/images/backpic/back-1.webp');
            background-size: cover;
            background-position: center 30%;
            position: relative;
        }

        .hero-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, rgba(7, 32, 31, 0.94) 0%, rgba(10, 42, 41, 0.85) 42%, rgba(14, 107, 92, 0.55) 100%);
        }

        .back-bg {
            background-image: url('/assets/images/backpic/back-2.png');
            background-size: cover;
            background-position: center center;
            position: relative;
        }

        .back-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(125deg, rgba(10, 42, 41, 0.96) 0%, rgba(11, 58, 56, 0.88) 60%, rgba(22, 101, 92, 0.75) 100%);
        }

        .back-light-bg {
            background-image: url('/assets/images/backpic/back-3.webp');
            background-size: cover;
            background-position: center center;
            position: relative;
        }

        .back-light-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(10, 42, 41, 0.92) 0%, rgba(11, 58, 56, 0.78) 100%);
        }

        .noise-texture {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
        }

        .img-cover { object-fit: cover; }
        .img-contain { object-fit: contain; }
        .img-fallback {
            background-color: var(--cream);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%23A3B1AE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center/36px no-repeat;
        }
        .img-fallback.img-cover,
        .img-fallback {
            position: relative;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #A3B1AE;
            font-size: 13px;
        }

        .text-shadow-hero {
            text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
        }

        .card-radius-custom {
            border-radius: 24px 24px 16px 16px;
        }

        .btn-focus:focus-visible {
            outline: 2px solid var(--gold-400);
            outline-offset: 3px;
        }

        .nav-scrolled {
            background: rgba(10, 42, 41, 0.88);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(255, 230, 190, 0.18);
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
        }

        .mobile-nav-drawer {
            background: var(--brand-900);
            background: linear-gradient(166deg, #0A2A29 0%, #07201F 100%);
            border-top: 1px solid rgba(255, 230, 190, 0.15);
        }

        .gold-pulse {
            animation: goldPulse 2.4s ease-out infinite;
        }
        @keyframes goldPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(212, 164, 72, 0.5);
            }
            70% {
                box-shadow: 0 0 0 18px rgba(212, 164, 72, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(212, 164, 72, 0);
            }
        }

        .scroll-indicator {
            animation: floatUpDown 2s ease-in-out infinite;
        }
        @keyframes floatUpDown {
            0%， 100% { transform: translateY(0); }
            50% { transform: translateY(6px); }
        }

        .badge-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #2FD0B4;
            box-shadow: 0 0 0 3px rgba(47, 208, 180, 0.25);
            display: inline-block;
        }

        .gold-line-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(200, 151, 74, 0.7), transparent);
        }

        .hero-countdown-item {
            background: rgba(7, 32, 31, 0.75);
            border: 1px solid rgba(255, 230, 190, 0.32);
            backdrop-filter: blur(8px);
            border-radius: 18px;
            min-width: 84px;
            padding: 12px 8px;
            text-align: center;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
        }

        .cta-primary {
            background: linear-gradient(135deg, #0FA98F 0%, #0E6B5C 60%, #0B3A38 100%);
            background-size: 200% 100%;
            transition: background-position 0.6s ease, box-shadow 0.3s ease, transform 0.15s ease;
        }
        .cta-primary:hover {
            background-position: 90% 0;
            box-shadow: 0 14px 36px rgba(15, 169, 143, 0.38);
            transform: translateY(-2px);
        }
        .cta-primary:active {
            transform: translateY(1px) scale(0.98);
        }

        .cta-gold {
            background: linear-gradient(135deg, #A87A35 0%, #D4A448 45%, #F0D8A6 100%);
            background-size: 200% 100%;
            color: #1C302E;
            transition: background-position 0.5s ease, box-shadow 0.3s ease, transform 0.15s ease;
        }
        .cta-gold:hover {
            background-position: 80% 0;
            box-shadow: 0 10px 36px rgba(200, 151, 74, 0.45);
            transform: translateY(-2px);
        }
        .cta-gold:active {
            transform: translateY(1px) scale(0.98);
        }

        .nav-link {
            position: relative;
            transition: color 0.2s ease;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 70%;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, #2FD0B4, #D9A95F);
            transition: transform 0.3s ease;
        }
        .nav-link:hover::after,
        .nav-link.active::after {
            transform: translateX(-50%) scaleX(1);
        }
        .nav-link.active {
            color: #2FD0B4;
        }

        .section-title-line {
            display: block;
            width: 96px;
            height: 3px;
            margin-top: 18px;
            border-radius: 3px;
            background: linear-gradient(90deg, #0FA98F 0%, #D4A448 80%, transparent 100%);
        }

        .tier-card {
            border: 1px solid var(--line);
            border-radius: 22px;
            background: #FFFFFF;
            padding: 2rem;
            transition: box-shadow 0.4s ease, transform 0.35s ease, border-color 0.3s ease;
        }
        .tier-card:hover {
            box-shadow: var(--shadow-lift);
            transform: translateY(-5px);
        }

        .compare-card {
            border-radius: 20px;
            border: 1px solid var(--line);
            background-color: #FFF;
            padding: 2.25rem 1.75rem 1.75rem;
            position: relative;
            transition: box-shadow 0.3s ease, transform 0.3s ease, border 0.3s ease;
        }
        .compare-card:hover {
            box-shadow: var(--shadow-lift);
            transform: translateY(-4px);
        }
        .compare-card.recommended {
            border-top: 4px solid var(--gold-500);
            box-shadow: 0 14px 55px rgba(22, 45, 42, 0.12);
            background: linear-gradient(180deg, #FFFDFA 0%, #FFFFFF 60%);
        }

        .icon-check-green {
            background: #2FD0B4;
            color: #0B3A38;
            border-radius: 999px;
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }

        .icon-cross-gray {
            border: 1.5px solid #C8D0CC;
            color: #A3B1AE;
            border-radius: 999px;
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }

        .news-card .thumbnail {
            overflow: hidden;
            border-radius: 16px 16px 8px 8px;
            background-color: var(--cream);
        }
        .news-card .thumbnail img {
            transition: transform 0.5s ease;
            width: 100%;
        }
        .news-card:hover .thumbnail img {
            transform: scale(1.06);
        }

        .dots-pattern {
            background-image: radial-gradient(rgba(47, 208, 180, 0.3) 1.2px, transparent 1.2px);
            background-size: 18px 18px;
        }

        .accordion-item {
            border-bottom: 1px solid var(--line);
        }
        .accordion-header {
            cursor: pointer;
            transition: color 0.2s ease;
        }
        .accordion-header:hover {
            color: #0E6B5C;
        }
        .accordion-icon {
            transition: transform 0.35s ease;
            font-size: 1.2rem;
            line-height: 1;
        }
        .accordion-item.open .accordion-icon {
            transform: rotate(45deg);
        }
        .accordion-content {
            display: none;
            transition: max-height 0.4s ease;
        }
        .accordion-item.open .accordion-content {
            display: block;
        }

        .footer-link {
            color: rgba(255, 255, 255, 0.72);
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: color 0.2s ease, transform 0.2s ease;
        }
        .footer-link:hover {
            color: #F0D8A6;
            transform: translateX(4px);
        }

        @media (prefers-reduced-motion: reduce) {
            *，
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        @media (max-width: 768px) {
            .hero-countdown-item {
                min-width: 72px;
            }
            .mobile-nav {
                display: flex;
            }
            .desktop-nav {
                display: none;
            }
        }
        @media (min-width: 769px) {
            .mobile-nav {
                display: none;
            }
            .desktop-nav {
                display: flex;
            }
        }
        @media (max-width: 520px) {
            .container-x {
                padding-left: 16px;
                padding-right: 16px;
            }
        }

/* roulang page: article */
:root {
  --ink-950:#061A19;
  --ink-900:#07201F;
  --deep-800:#0A2A29;
  --deep-700:#0B3A38;
  --teal-500:#11665F;
  --teal-600:#0E9488;
  --jade:#0FA98F;
  --mint:#2FD0B4;
  --gold-400:#D9A95F;
  --gold-500:#C8974A;
  --gold-300:#F0D8A6;
  --gold-grad:linear-gradient(135deg,#A87A35 0%,#D4A448 45%,#F4DEAA 100%);
  --brand-grad:linear-gradient(135deg,#0B3A38 0%,#11665F 55%,#17A892 100%);
  --paper:#F7F5F0;
  --paper-2:#EFEBE3;
  --line:#E0D9CA;
  --line-gold:rgba(240,216,166,0.22);
  --text-1:#1C302E;
  --text-2:#5C6F6B;
  --text-3:#A3B1AE;
  --shadow-sm:0 8px 24px rgba(22,45,42,0.06);
  --shadow-md:0 14px 44px rgba(22,45,42,0.08);
  --shadow-lg:0 22px 60px rgba(22,45,42,0.14);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-pill:999px;
  --container:1200px;
}
html { scroll-behavior:smooth; }
* { box-sizing:border-box; }
body {
  margin:0;
  background:var(--paper);
  color:var(--text-1);
  font-family:"PingFang SC","Microsoft YaHei UI","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; }
input,textarea,select { font-family:inherit; }
.container-x { width:min(var(--container),calc(100% - 40px)); margin-left:auto; margin-right:auto; }
.gold-line-divider { height:1px; width:100%; background:linear-gradient(90deg,transparent 0%,rgba(240,216,166,0.6) 30%,rgba(240,216,166,0.6) 70%,transparent 100%); }
.gold-text {
  background:linear-gradient(135deg,#F0D8A6,#D4A448 55%,#F9EAC0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.gold-badge {
  background:linear-gradient(135deg,#A87A35 0%,#D4A448 45%,#F4DEAA 100%);
  color:#17201F;
  box-shadow:0 8px 24px rgba(214,164,72,0.22);
}
.badge-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 0 rgba(47,208,180,0.55);
  animation:pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow:0 0 0 0 rgba(47,208,180,0.45); }
  70% { box-shadow:0 0 0 9px rgba(47,208,180,0); }
  100% { box-shadow:0 0 0 0 rgba(47,208,180,0); }
}
.desktop-nav { display:flex; }
.mobile-menu-trigger { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:14px; border:1px solid rgba(240,216,166,0.28); color:#fff; background:rgba(255,255,255,0.06); }
.nav-link {
  position:relative;
  letter-spacing:0.02em;
  padding:8px 0;
  transition:color .25s ease;
  white-space:nowrap;
  color:rgba(255,255,255,0.84);
}
.nav-link::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-3px;
  transform:translateX(-50%) scaleX(0);
  height:2px;
  width:80%;
  border-radius:2px;
  background:var(--gold-grad);
  transform-origin:center;
  transition:transform .3s ease;
}
.nav-link:hover { color:#fff; }
.nav-link:hover::after { transform:translateX(-50%) scaleX(1); }
.nav-link.active { color:var(--gold-300); }
.nav-link.active::after { transform:translateX(-50%) scaleX(1); }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  height:50px;
  padding:0 28px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:15px;
  line-height:1;
  transition:all .3s ease;
  border:none;
  text-decoration:none;
  white-space:nowrap;
}
.btn:focus-visible { outline:2px solid var(--gold-500); outline-offset:3px; }
.btn:active { transform:translateY(2px) scale(0.98); }
.btn-gold {
  background:linear-gradient(135deg,#B8893F 0%,#D4A448 45%,#F0D8A6 100%);
  color:#17201F;
  box-shadow:0 10px 24px rgba(195,147,62,0.30);
}
.btn-gold:hover { background:linear-gradient(135deg,#C79B4F 0%,#E4BA6B 50%,#F9E3AD 120%); box-shadow:0 14px 36px rgba(195,147,62,0.42); transform:translateY(-2px); }
.btn-teal {
  background:linear-gradient(135deg,#0B3A38 0%,#0FA98F 100%);
  color:#fff;
  box-shadow:0 10px 24px rgba(10,80,73,0.28);
}
.btn-teal:hover { background:linear-gradient(135deg,#0D4C49 0%,#17BFA1 100%); box-shadow:0 14px 36px rgba(10,80,73,0.35); transform:translateY(-2px); }
.btn-ghost-light {
  background:rgba(255,255,255,0.06);
  color:#fff;
  border:1px solid rgba(255,232,192,0.34);
  backdrop-filter:blur(6px);
}
.btn-ghost-light:hover { border-color:var(--gold-400); color:var(--gold-300); background:rgba(255,255,255,0.10); transform:translateY(-2px); }
.btn-ghost-dark {
  background:#fff;
  color:var(--text-1);
  border:1px solid #D8D0BF;
}
.btn-ghost-dark:hover { border-color:var(--gold-500); color:#7A571F; box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.btn-sm { height:42px; padding:0 20px; font-size:14px; }
.btn-lg { height:56px; padding:0 42px; font-size:16px; }
.meta-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 15px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(240,216,166,0.18);
  color:rgba(255,255,255,0.88);
  font-size:13px;
  backdrop-filter:blur(8px);
}
.mobile-drawer {
  position:fixed;
  inset:0 0 0 auto;
  z-index:100;
  width:min(420px,88vw);
  background:linear-gradient(150deg,#061A19 0%,#0B3A38 100%);
  border-left:1px solid var(--line-gold);
  box-shadow:-18px 0 60px rgba(0,0,0,0.30);
  transform:translateX(105%);
  transition:transform .45s cubic-bezier(.22,.7,.32,1);
  display:flex;
  flex-direction:column;
  padding:24px 28px 36px;
  overflow-y:auto;
}
.mobile-drawer.open { transform:translateX(0); }
.mobile-drawer .drawer-close {
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(240,216,166,0.25);
  background:rgba(255,255,255,0.06);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.article-page-hero {
  position:relative;
  min-height:460px;
  padding:150px 0 80px;
  background:#061A19;
  color:#fff;
  overflow:hidden;
}
.article-backdrop {
  position:absolute;
  inset:0;
  background-image:url('/assets/images/backpic/back-1.webp');
  background-size:cover;
  background-position:center 30%;
}
.article-backdrop::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(105deg,rgba(4,20,19,0.97) 22%,rgba(10,56,52,0.86) 53%,rgba(15,150,130,0.52) 100%),
    linear-gradient(to top,rgba(5,20,19,0.95) 0%,transparent 45%,rgba(7,32,31,0.15) 100%);
}
.article-hero-inner { position:relative; z-index:2; max-width:900px; }
.article-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg,rgba(200,151,74,0.35),rgba(212,164,72,0.18));
  border:1px solid rgba(240,216,166,0.45);
  color:var(--gold-300);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
}
.article-h1 {
  font-size:clamp(1.9rem,4.6vw,3.8rem);
  line-height:1.18;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#fff;
  margin:24px 0 24px;
  text-wrap:balance;
}
.breadcrumb-wrap {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  color:rgba(255,255,255,0.66);
  font-size:13px;
  margin-bottom:26px;
}
.breadcrumb-wrap a { color:#D9E5E0; transition:color .2s; }
.breadcrumb-wrap a:hover { color:var(--gold-300); }
.breadcrumb-wrap .crumb-current {
  display:inline-block;
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,255,255,0.82);
}
.article-main-bg { background:var(--paper); position:relative; padding:80px 0 90px; }
.article-body-card {
  position:relative;
  background:#fff;
  border:1px solid #EBE5D8;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  padding:clamp(24px,5vw,64px);
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.post-content {
  color:var(--text-1);
  font-size:1.0625rem;
  line-height:1.8;
}
.post-content > * + * { margin-top:1.2em; }
.post-content p { margin-bottom:1.6em; line-height:1.9; }
.post-content h2 {
  position:relative;
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:700;
  line-height:1.4;
  margin:2em 0 0.9em;
  color:#153230;
  padding-top:0.4em;
}
.post-content h2::before {
  content:"";
  display:block;
  width:52px;
  height:5px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--gold-400),var(--mint));
  margin-bottom:14px;
}
.post-content h3 {
  font-size:1.22rem;
  font-weight:700;
  color:#173D38;
  margin:1.8em 0 0.6em;
}
.post-content ul,
.post-content ol {
  padding-left:1.4rem;
  margin:1.4em 0;
  display:grid;
  gap:0.7em;
}
.post-content li::marker { color:var(--gold-500); }
.post-content ul li { list-style-type:disc; }
.post-content ol li { list-style-type:decimal; }
.post-content blockquote {
  margin:1.8em 0;
  padding:18px 22px 22px;
  background:#F5F0E7;
  border-left:4px solid var(--gold-500);
  border-radius:0 16px 16px 0;
  color:#3B514D;
}
.post-content img {
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  margin:28px 0;
}
.post-content table {
  width:100%;
  border-collapse:collapse;
  margin:28px 0;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
}
.post-content th,
.post-content td {
  text-align:left;
  padding:13px 16px;
  border-bottom:1px solid #E9E2D6;
  font-size:0.95rem;
}
.post-content th { background:#123C38; color:#F5DFB2; font-weight:600; }
.post-content tr:last-child td { border-bottom:none; }
.post-content tr:hover td { background:#F9F6EF; }
.post-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
  margin-top:56px;
  padding-top:28px;
  border-top:1px solid #E9E2D6;
}
.share-icons {
  display:inline-flex;
  gap:10px;
}
.share-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid #D9D0BE;
  color:#6A5B3E;
  background:#fff;
  transition:all .2s ease;
  font-size:14px;
}
.share-icon:hover { border-color:var(--gold-500); color:#8B6426; transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.article-not-found {
  padding:110px 0 150px;
  min-height:60vh;
  display:flex;
  align-items:center;
  background:linear-gradient(180deg,#0B3A38 0%,#0E9488 100%);
  color:#fff;
  text-align:center;
}
.not-found-h1 { font-size:clamp(2rem,5vw,3.6rem); font-weight:800; color:var(--gold-300); margin:18px 0; }
.related-section { background:var(--paper-2); padding:72px 0 84px; }
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:44px;
}
.section-heading h2 {
  font-size:clamp(1.7rem,3vw,2.5rem);
  font-weight:800;
  color:#153230;
  margin:0;
  line-height:1.3;
}
.section-heading .subtitle { color:#5F736E; font-size:14px; }
.recommend-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.empty-state-cell {
  background:#fff;
  border:1px dashed #D7CDBB;
  border-radius:20px;
  padding:34px 26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:240px;
  color:var(--text-2);
  box-shadow:0 6px 18px rgba(34,52,47,0.02);
}
.empty-state-cell i { font-size:2rem; color:#C5B99F; margin-bottom:16px; }
.empty-state-cell strong { color:#4E5E5A; font-size:18px; font-weight:600; margin-bottom:8px; }
.empty-state-cell span { font-size:14px; color:#8A9A95; line-height:1.5; }
.article-cta-band {
  position:relative;
  background:#0B3A38;
  color:#fff;
  padding:44px 0;
  border-top:1px solid rgba(240,216,166,0.2);
  border-bottom:1px solid rgba(240,216,166,0.2);
  overflow:hidden;
}
.article-cta-band::before {
  content:"";
  position:absolute;
  right:-150px;
  top:-170px;
  width:400px;
  height:400px;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(47,208,180,0.18),transparent);
}
.article-cta-inner {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.article-cta-title { font-size:clamp(1.25rem,2vw,1.7rem); font-weight:700; }
.article-cta-title i { color:var(--gold-400); margin-right:10px; }
.site-footer {
  color:rgba(255,255,255,0.78);
  background:linear-gradient(180deg,#061A19 0%,#07201F 100%);
  border-top:1px solid rgba(240,216,166,0.18);
  position:relative;
}
.footer-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:rgba(255,255,255,0.66);
  transition:all .25s ease;
}
.footer-link i { color:#C8E4DA; font-size:10px; }
.footer-link:hover { color:var(--gold-300); transform:translateX(4px); }
.footer-column-title {
  color:#fff;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.08em;
  margin-bottom:18px;
}
.footer-bottom {
  border-top:1px solid rgba(240,216,166,0.12);
  padding:22px 0;
  font-size:13px;
  color:rgba(255,255,255,0.42);
}
@media (max-width:1023px) {
  .desktop-nav { display:none !important; }
  .mobile-menu-trigger { display:inline-flex !important; }
  .recommend-grid { grid-template-columns:1fr; }
  .article-page-hero { min-height:430px; padding:128px 0 60px; }
  .article-body-card { padding:28px 24px; }
  .breadcrumb-wrap { font-size:12px; }
}
@media (max-width:767px) {
  .container-x { width:min(100% - 28px,1200px); }
  .article-main-bg { padding:48px 0 60px; }
  .article-page-hero { padding:122px 0 48px; min-height:0; }
  .article-kicker { font-size:12px; padding:6px 12px; }
  .article-h1 { margin-top:18px; }
  .meta-pill { font-size:12px; padding:5px 11px; gap:5px; }
  .post-content { font-size:1.0rem; }
  .post-footer { flex-direction:column; align-items:flex-start; }
  .section-heading { flex-direction:column; align-items:flex-start; }
  .footer-bottom { text-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* roulang page: category1 */
:root {
            --ink: #0A2A29;
            --ink-soft: #061A19;
            --deep-green: #07201F;
            --brand-green: #0B3A38;
            --brand-teal: #11665F;
            --accent-teal: #0FA98F;
            --bright-teal: #2FD0B4;
            --gold: #C8974A;
            --gold-2: #D9A95F;
            --gold-3: #F0D8A6;
            --light-bg: #F7F5F0;
            --panel: #FFFFFF;
            --panel-warm: #FFFDF8;
            --surface: #EFEBE3;
            --text: #1C302E;
            --muted: #5C6F6B;
            --soft-muted: #A3B1AE;
            --border-line: #E0D9CA;
            --shadow-sm: 0 14px 44px rgba(22, 45, 42, 0.08);
            --shadow-lg: 0 22px 60px rgba(22, 45, 42, 0.14);
            --radius-card: 20px;
            --radius-card-lg: 24px;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: "PingFang SC", "Microsoft YaHei UI", "HarmonyOS Sans SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
            color: var(--text);
            background: var(--light-bg);
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            overflow-x: hidden;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: "PingFang SC", "Microsoft YaHei UI", "HarmonyOS Sans SC", "Noto Sans SC", Arial, sans-serif;
            font-weight: 700;
            line-height: 1.25;
            margin: 0;
        }

        p {
            margin: 0;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: color .25s ease, opacity .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
        }

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

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        button {
            border: none;
            background: none;
            font-family: inherit;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
        }

        button:active {
            transform: scale(.98);
        }

        :focus-visible {
            outline: 2px solid var(--gold-2);
            outline-offset: 4px;
            border-radius: 8px;
        }

        .container-x {
            width: 100%;
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }

        @media (min-width: 1280px) {
            .container-x {
                padding-left: 2rem;
                padding-right: 2rem;
            }
        }

        .gold-text {
            background: linear-gradient(135deg, #B48943 0%, #E7C379 52%, #F8E7B1 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .gold-line-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(240, 216, 166, 0.55) 22%, rgba(216, 169, 95, 0.9) 50%, rgba(240, 216, 166, 0.55) 78%, transparent 100%);
        }

        .badge-dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: #2FD0B4;
            box-shadow: 0 0 0 3px rgba(47, 208, 180, 0.22);
            display: inline-block;
        }

        .badge-dot-warning {
            background: #F0D8A6;
            box-shadow: 0 0 0 4px rgba(240, 216, 166, 0.16);
        }

        .site-header {
            transition: background .45s ease, box-shadow .45s ease, border-color .45s ease;
            border-bottom: 1px solid transparent;
        }

        .site-header.scrolled {
            background: rgba(6, 26, 25, 0.84);
            backdrop-filter: blur(16px);
            border-bottom-color: rgba(240, 216, 166, 0.18);
            box-shadow: 0 8px 28px rgba(4, 20, 19, 0.2);
        }

        .desktop-nav {
            display: flex;
            align-items: center;
        }

        @media (max-width: 1023px) {
            .desktop-nav {
                display: none !important;
            }
        }

        .nav-link {
            position: relative;
            color: rgba(255, 255, 255, 0.78);
            letter-spacing: .01em;
            transition: color .25s ease;
            white-space: nowrap;
        }

        .nav-link::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 0;
            height: 2px;
            border-radius: 10px;
            background: linear-gradient(90deg, var(--gold-3), var(--gold));
            transition: width .3s ease;
        }

        .nav-link:hover {
            color: #ffffff;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .nav-link.active {
            color: #ffffff;
            font-weight: 600;
        }

        .nav-link.active::after {
            width: 100%;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-weight: 700;
            border-radius: 999px;
            padding: 0 1.6rem;
            height: 50px;
            font-size: 0.95rem;
            line-height: 1;
            transition: transform .2s ease, box-shadow .25s ease, background .3s ease, color .25s ease;
            border: 0;
            cursor: pointer;
            white-space: nowrap;
        }

        .btn-primary {
            background: linear-gradient(135deg, #0B3A38 0%, #11665F 52%, #0FA98F 100%);
            color: #ffffff;
            box-shadow: 0 10px 26px rgba(9, 82, 76, 0.24);
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #0C4441 0%, #0FA98F 70%, #2FD0B4 130%);
            box-shadow: 0 16px 34px rgba(9, 82, 76, 0.32);
            transform: translateY(-2px);
        }

        .btn-gold {
            background: linear-gradient(135deg, #A87A35 0%, #D4A448 44%, #F4DEAA 108%);
            color: #1C302E;
            box-shadow: 0 10px 30px rgba(152, 107, 34, 0.22);
        }

        .btn-gold:hover {
            box-shadow: 0 18px 40px rgba(175, 126, 41, 0.32);
            transform: translateY(-2px);
        }

        .btn-outline-light {
            background: transparent;
            border: 1.5px solid rgba(255, 233, 190, 0.5);
            color: #ffffff;
        }

        .btn-outline-light:hover {
            border-color: #F0D8A6;
            background: rgba(240, 216, 166, 0.06);
            transform: translateY(-2px);
        }

        .btn-outline-dark {
            background: #fff;
            border: 1.5px solid #D8D0BF;
            color: var(--brand-green);
        }

        .btn-outline-dark:hover {
            border-color: var(--gold-2);
            color: #8A6B26;
        }

        .btn-sm {
            height: 42px;
            padding: 0 1.15rem;
            font-size: 0.875rem;
        }

        .icon-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            border-radius: 14px;
            background: rgba(15, 169, 143, 0.1);
            color: var(--accent-teal);
            flex: 0 0 auto;
            transition: background .3s ease, color .3s ease, transform .3s ease;
        }

        .card-lift {
            background: var(--panel);
            border: 1px solid rgba(224, 217, 202, 0.8);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-sm);
            transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
        }

        .card-lift:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
            border-color: rgba(200, 151, 74, 0.36);
        }

        .cover-mask {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(6, 26, 25, 0.04), rgba(6, 26, 25, 0.62));
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: .06em;
            color: var(--gold);
        }

        .section-title-deco {
            width: 82px;
            height: 4px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--gold-2), var(--bright-teal));
            margin-top: 20px;
        }

        .hero-stat {
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(240, 216, 166, 0.18);
            border-radius: 20px;
            padding: 18px 20px;
            backdrop-filter: blur(8px);
        }

        .hero-stat .num {
            font-size: 2rem;
            font-weight: 900;
            line-height: 1.1;
            font-family: "Avenir Next", "PingFang SC", sans-serif;
        }

        .feature-card {
            background: #ffffff;
            border-radius: var(--radius-card-lg);
            border: 1px solid #E7E0D3;
            padding: 30px 26px;
            min-height: 220px;
            transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: "";
            position: absolute;
            top: -42px;
            right: -42px;
            width: 110px;
            height: 110px;
            border-radius: 50%;
            background: rgba(15, 169, 143, 0.07);
            transition: transform .4s ease;
        }

        .feature-card:hover {
            transform: translateY(-7px);
            box-shadow: var(--shadow-lg);
            border-color: rgba(200, 151, 74, 0.38);
        }

        .feature-card:hover::before {
            transform: scale(1.2);
        }

        .faq-item {
            background: #ffffff;
            border: 1px solid var(--border-line);
            border-radius: 18px;
            margin-bottom: 12px;
            overflow: hidden;
            transition: border-color .25s ease, box-shadow .25s ease;
        }

        .faq-item:hover {
            border-color: rgba(200, 151, 74, 0.35);
        }

        .faq-item[open] {
            box-shadow: 0 8px 30px rgba(22, 45, 42, 0.06);
        }

        .faq-item summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 20px 24px;
            cursor: pointer;
            list-style: none;
        }

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

        .faq-item summary .faq-question-text {
            font-weight: 600;
            color: var(--text);
            font-size: 1rem;
        }

        .faq-item .faq-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(15, 169, 143, 0.1);
            color: var(--accent-teal);
            transition: background .3s ease, color .3s ease, transform .3s ease;
            flex: 0 0 auto;
        }

        .faq-item[open] .faq-icon {
            background: linear-gradient(135deg, #0B3A38, #11665F);
            color: #F0D8A6;
            transform: rotate(45deg);
        }

        .faq-answer {
            padding: 0 24px 22px;
            color: var(--muted);
            font-size: 0.95rem;
            line-height: 1.85;
        }

        .faq-answer p:last-child {
            margin-bottom: 0;
        }

        .reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity .7s ease, transform .7s ease;
        }

        .reveal.is-show {
            opacity: 1;
            transform: translateY(0);
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
            }
            .reveal {
                opacity: 1;
                transform: none;
            }
        }

        .footer-link {
            color: rgba(255, 255, 255, 0.66);
            font-size: 0.9rem;
            transition: color .25s ease, padding-left .25s ease;
        }

        .footer-link:hover {
            color: #ffffff;
            padding-left: 2px;
        }

        .img-fallback {
            background: #EFEBE3;
            position: relative;
        }

        .img-fallback::after {
            content: "暂无图片";
            position: absolute;
            inset: auto auto 50% 50%;
            transform: translate(50%, 50%);
            color: var(--soft-muted);
            font-size: 0.875rem;
        }

        .dark-cta-banner {
            background: linear-gradient(112deg, rgba(6, 26, 25, .96), rgba(10, 42, 41, .92)), url('/assets/images/backpic/back-3.webp') center / cover no-repeat;
            border: 1px solid rgba(240, 216, 166, 0.2);
        }

        .process-step {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(240, 216, 166, 0.2);
            border-radius: 24px;
            padding: 30px 26px;
            min-height: 180px;
            transition: border-color .3s ease, background .3s ease, transform .3s ease;
        }

        .process-step:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(240, 216, 166, 0.42);
            transform: translateY(-4px);
        }

/* roulang page: category2 */
:root {
            --pine: #0A2A29;
            --deep: #0B3A38;
            --teal: #0E9488;
            --jade: #0FA98F;
            --mint: #2FD0B4;
            --gold: #C8974A;
            --gold-2: #D9A95F;
            --gold-3: #F0D8A6;
            --cream: #F7F5F0;
            --cream-2: #EFEBE3;
            --ink: #1C302E;
            --muted: #5C6F6B;
            --weak: #A3B1AE;
            --line: #E0D9CA;
            --warn: #E0523D;
            --shadow: 0 14px 44px rgba(22,45,42,.08);
            --shadow-lg: 0 22px 60px rgba(22,45,42,.14);
            --radius-card: 22px;
            --radius-soft: 16px;
            --radius-pill: 999px;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: "PingFang SC", "Microsoft YaHei UI", "HarmonyOS Sans SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
            background: var(--cream);
            color: var(--ink);
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        * {
            box-sizing: border-box;
        }
        a,
        img,
        button,
        input,
        textarea {
            transition: all .25s ease;
        }
        img {
            max-width: 100%;
            display: block;
        }
        a {
            text-decoration: none;
            color: inherit;
        }
        button {
            background: none;
            border: none;
            cursor: pointer;
        }
        ul,
        ol {
            list-style: none;
        }
        :focus-visible {
            outline: 2px solid var(--gold-2);
            outline-offset: 2px;
        }
        .site-container {
            max-width: 1280px;
            margin: 0 auto;
            padding-left: 24px;
            padding-right: 24px;
        }
        .section-space {
            padding-top: 96px;
            padding-bottom: 96px;
        }
        .gold-line-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(240,216,166,.55), transparent);
        }

        /* 文本与标题 */
        .gold-text {
            background: linear-gradient(135deg, #A87A35, #D4A448 45%, #F4DEAA);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }
        .section-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: .12em;
            color: var(--jade);
            background: rgba(15,169,143,.1);
            padding: 7px 16px;
            border-radius: var(--radius-pill);
        }
        .section-title {
            font-size: clamp(1.9rem, 3vw, 2.9rem);
            line-height: 1.25;
            font-weight: 800;
            color: var(--pine);
            margin: 20px 0 38px;
        }
        .section-title.light {
            color: #fff;
        }

        /* 按钮 */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            height: 52px;
            padding: 0 28px;
            border-radius: var(--radius-pill);
            font-weight: 700;
            font-size: 15px;
            line-height: 1;
            white-space: nowrap;
            transition: transform .25s, box-shadow .25s, background .25s, border-color .25s, color .25s;
        }
        .btn:active {
            transform: scale(.97);
        }
        .btn-primary {
            background: linear-gradient(135deg, #0B3A38, #0E9488 60%, #2FD0B4);
            color: #fff;
            box-shadow: 0 12px 28px rgba(9,78,73,.22);
        }
        .btn-primary:hover {
            box-shadow: 0 16px 38px rgba(9,78,73,.35);
            transform: translateY(-2px);
        }
        .btn-gold {
            background: linear-gradient(135deg, #A87A35, #D4A448 45%, #F4DEAA);
            color: #102A27;
            box-shadow: 0 12px 28px rgba(196,149,70,.3);
        }
        .btn-gold:hover {
            box-shadow: 0 18px 40px rgba(196,149,70,.45);
            transform: translateY(-2px);
        }
        .btn-outline-light {
            background: transparent;
            border: 1.5px solid rgba(255,230,190,.5);
            color: #fff;
        }
        .btn-outline-light:hover {
            border-color: var(--gold-3);
            color: var(--gold-3);
            transform: translateY(-2px);
        }
        .btn-outline-dark {
            background: transparent;
            border: 1.5px solid #D6CCB8;
            color: var(--pine);
        }
        .btn-outline-dark:hover {
            border-color: var(--gold-2);
            color: #A87A35;
            transform: translateY(-2px);
        }

        /* 导航 */
        #siteHeader {
            background: linear-gradient(180deg, rgba(7,32,31,.98) 0%, rgba(6,26,25,.96) 100%);
            border-bottom: 1px solid rgba(240,216,166,.12);
        }
        .site-nav a {
            position: relative;
            color: rgba(255,255,255,.82);
            padding: 8px 2px;
            font-weight: 500;
            font-size: 15px;
        }
        .site-nav a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2px;
            width: 0;
            background: linear-gradient(90deg, var(--gold-3), var(--gold-2));
            border-radius: 99px;
        }
        .site-nav a:hover {
            color: #fff;
        }
        .site-nav a:hover::after {
            width: 100%;
        }
        .site-nav a.active {
            color: var(--gold-3);
        }
        .site-nav a.active::after {
            width: 100%;
        }
        .badge-dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 99px;
            background: var(--mint);
            box-shadow: 0 0 0 0 rgba(47,208,180,.6);
            animation: pulse-dot 1.8s infinite;
        }
        @keyframes pulse-dot {
            0% { box-shadow: 0 0 0 0 rgba(47,208,180,.5); }
            70% { box-shadow: 0 0 0 8px rgba(47,208,180,0); }
            100% { box-shadow: 0 0 0 0 rgba(47,208,180,0); }
        }

        /* Hero / 分类头 */
        .category-hero {
            position: relative;
            padding: 142px 0 76px;
            overflow: hidden;
            background: var(--pine);
        }
        .hero-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
        }
        .hero-mask {
            position: absolute;
            inset: 0;
            background: linear-gradient(112deg, rgba(6,25,24,.96) 10%, rgba(10,58,57,.82) 45%, rgba(17,102,95,.5) 100%);
        }
        .hero-shine {
            position: absolute;
            top: -18%;
            right: -8%;
            width: 480px;
            height: 480px;
            background: radial-gradient(circle, rgba(240,216,166,.18) 0%, rgba(240,216,166,.04) 55%, transparent 70%);
            pointer-events: none;
            border-radius: 50%;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #A87A35, #D4A448, #F4DEAA);
            color: #10241F;
            font-size: 13px;
            font-weight: 700;
            padding: 7px 15px;
            border-radius: 999px;
            box-shadow: 0 8px 24px rgba(196,149,70,.28);
        }
        .hero-title {
            color: #fff;
            font-size: clamp(2.2rem, 5vw, 4rem);
            line-height: 1.14;
            font-weight: 900;
            letter-spacing: -.01em;
            margin: 22px 0 16px;
        }
        .hero-sub {
            color: rgba(255,255,255,.82);
            font-size: 18px;
            line-height: 1.8;
            max-width: 640px;
        }
        .breadcrumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 13px;
            color: rgba(255,255,255,.55);
        }
        .breadcrumb a:hover {
            color: var(--gold-3);
        }
        .data-tile {
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,230,190,.18);
            backdrop-filter: blur(10px);
            border-radius: 22px;
            padding: 20px 16px;
            text-align: center;
            color: #fff;
        }
        .data-tile .num {
            font-size: 34px;
            font-weight: 900;
            line-height: 1.1;
            background: linear-gradient(135deg, #F4DEAA, #D9A95F);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .data-tile .unit {
            font-size: 15px;
            font-weight: 700;
            color: #F0D8A6;
        }
        .data-tile .label {
            display: block;
            margin-top: 8px;
            font-size: 13px;
            color: rgba(255,255,255,.62);
        }

        /* 卡片 */
        .feature-card {
            background: #fff;
            border: 1px solid #E9E1D3;
            border-radius: var(--radius-card);
            padding: 32px 26px;
            box-shadow: var(--shadow);
            height: 100%;
            transition: transform .3s, box-shadow .3s, border-color .3s;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-color: rgba(216,169,95,.5);
        }
        .feature-icon {
            width: 54px;
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            font-size: 22px;
            color: #fff;
            background: linear-gradient(135deg, #0B3A38, #17A892);
            box-shadow: 0 8px 18px rgba(11,58,56,.16);
            margin-bottom: 20px;
        }
        .feature-card h3 {
            font-size: 19px;
            font-weight: 800;
            color: var(--pine);
            margin-bottom: 12px;
        }
        .feature-card p {
            color: var(--muted);
            font-size: 15px;
            line-height: 1.8;
        }

        /* 等级对比 */
        .level-card {
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,230,190,.16);
            border-radius: 28px;
            padding: 30px 26px;
            color: #fff;
            position: relative;
            transition: transform .3s, border-color .3s, background .3s;
        }
        .level-card:hover {
            transform: translateY(-6px);
            border-color: rgba(240,216,166,.42);
        }
        .level-card.hot-card {
            background: linear-gradient(135deg, rgba(9,40,39,.98), rgba(14,72,67,.92));
            border: 1px solid var(--gold-2);
            box-shadow: 0 20px 60px rgba(0,0,0,.28);
        }
        .hot-ribbon {
            position: absolute;
            top: -14px;
            left: 24px;
            background: linear-gradient(135deg, #A87A35, #D4A448, #F4DEAA);
            color: #102A27;
            font-size: 12px;
            font-weight: 800;
            padding: 6px 16px;
            border-radius: 999px;
            letter-spacing: .06em;
        }
        .level-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 15px;
            color: rgba(255,255,255,.86);
            padding: 8px 0;
        }
        .level-list li i {
            color: var(--mint);
            margin-top: 5px;
        }

        /* 流程 */
        .process-card {
            background: #fff;
            border: 1px solid #EAE1D2;
            border-radius: 20px;
            padding: 34px 22px;
            position: relative;
            box-shadow: var(--shadow);
            height: 100%;
        }
        .process-num {
            font-size: 40px;
            font-weight: 900;
            line-height: 1;
            color: transparent;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: #B9C9C4;
        }
        .process-card h4 {
            margin-top: 14px;
            font-size: 18px;
            font-weight: 800;
            color: var(--pine);
        }
        .process-card p {
            margin-top: 8px;
            font-size: 15px;
            color: var(--muted);
        }

        /* FAQ */
        .faq-item {
            background: #fff;
            border: 1px solid #E7DECF;
            border-radius: 18px;
            padding: 8px 26px;
            margin-bottom: 18px;
            box-shadow: 0 6px 18px rgba(24,43,40,.04);
        }
        .faq-item summary {
            display: flex;
            align-items: center;
            gap: 14px;
            list-style: none;
            padding: 18px 0;
            cursor: pointer;
            user-select: none;
        }
        .faq-item summary::-webkit-details-marker {
            display: none;
        }
        .faq-item summary .q-mark {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(15,169,143,.1);
            color: var(--teal);
            font-weight: 800;
            font-size: 14px;
            flex: none;
        }
        .faq-item summary .question {
            font-size: 16px;
            font-weight: 700;
            color: var(--pine);
            flex: 1;
        }
        .faq-item summary .plus {
            color: var(--gold);
            font-size: 15px;
            margin-left: auto;
            transition: transform .3s;
        }
        .faq-item[open] summary .plus {
            transform: rotate(45deg);
        }
        .faq-item .answer {
            padding: 2px 0 22px 44px;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.9;
        }

        /* CTA */
        .cta-panel {
            position: relative;
            overflow: hidden;
            border-radius: 34px;
            background-image: url('/assets/images/backpic/back-1.webp');
            background-size: cover;
            background-position: center;
            padding: 64px 40px;
            text-align: center;
        }
        .cta-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(6,26,25,.94), rgba(11,58,56,.84) 55%, rgba(14,148,136,.55));
        }
        .cta-panel .inner {
            position: relative;
            z-index: 2;
        }

        /* Footer */
        .footer-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: rgba(255,255,255,.62);
            font-size: 14px;
            transition: color .25s, padding-left .25s;
        }
        .footer-link:hover {
            color: var(--gold-3);
            padding-left: 4px;
        }

        /* Scroll indicator */
        .scroll-down {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: rgba(255,255,255,.55);
            font-size: 13px;
            letter-spacing: .1em;
            animation: float-y 2.4s ease-in-out infinite;
        }
        @keyframes float-y {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(7px); }
        }

        /* 移动端抽屉 */
        .mobile-drawer {
            position: fixed;
            inset: 0;
            z-index: 100;
            background: linear-gradient(135deg, #071F1E 0%, #0A3532 100%);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .35s ease, visibility .35s ease;
        }
        .mobile-drawer.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        @media (max-width: 1024px) {
            .desktop-nav,
            .desktop-cta-group {
                display: none !important;
            }
        }
        @media (min-width: 1025px) {
            .mobile-menu-btn {
                display: none !important;
            }
        }
        @media (max-width: 640px) {
            .section-space {
                padding-top: 68px;
                padding-bottom: 68px;
            }
            .hero-sub {
                font-size: 16px;
            }
            .category-hero {
                padding: 126px 0 54px;
            }
            .cta-panel {
                padding: 48px 22px;
                border-radius: 24px;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation: none !important;
                transition: none !important;
                scroll-behavior: auto !important;
            }
        }

/* roulang page: category3 */
:root {
            --deep: #061A19;
            --primary: #0A2A29;
            --jade-dark: #0B3A38;
            --jade: #11665F;
            --jade-light: #17A892;
            --emerald: #0FA98F;
            --teal: #2FD0B4;
            --gold-light: #F0D8A6;
            --gold: #D9A95F;
            --gold-deep: #C8974A;
            --sand: #F7F5F0;
            --sand-deep: #EFEBE3;
            --text-main: #1C302E;
            --text-sub: #5C6F6B;
            --text-mute: #9AA8A5;
            --border: #DFD7C7;
            --shadow-sm: 0 10px 30px rgba(22, 45, 42, 0.07);
            --shadow-md: 0 16px 46px rgba(22, 45, 42, 0.10);
            --shadow-lg: 0 24px 66px rgba(22, 45, 42, 0.15);
            --font-main: "PingFang SC", "Microsoft YaHei UI", "HarmonyOS Sans SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
        }
        * {
            box-sizing: border-box;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            margin: 0;
            font-family: var(--font-main);
            color: var(--text-main);
            background: var(--sand);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
        img {
            max-width: 100%;
            display: block;
        }
        a {
            color: inherit;
            text-decoration: none;
        }
        a:focus-visible,
        button:focus-visible {
            outline: 2px solid var(--gold-light);
            outline-offset: 4px;
            border-radius: 10px;
        }
        button {
            border: 0;
            background: none;
            cursor: pointer;
            font-family: inherit;
        }
        .container-x {
            width: 100%;
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }
        @media (min-width: 640px) {
            .container-x {
                padding-left: 2rem;
                padding-right: 2rem;
            }
        }

        .gold-text {
            background: linear-gradient(135deg, #A87A35 0%, #D4A448 42%, #F4DEAA 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: var(--gold);
        }
        .gold-line-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(240, 216, 166, 0.5) 30%, rgba(240, 216, 166, 0.5) 70%, transparent 100%);
        }
        .badge-dot {
            width: 7px;
            height: 7px;
            background: var(--teal);
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 0 4px rgba(47, 208, 180, 0.18);
            animation: breathe 2s infinite ease-in-out;
        }
        @keyframes breathe {
            0%,
            100% {
                box-shadow: 0 0 0 3px rgba(47, 208, 180, 0.10);
            }
            50% {
                box-shadow: 0 0 0 7px rgba(47, 208, 180, 0.24);
            }
        }

        .desktop-nav {
            display: flex;
            align-items: center;
        }
        .nav-link {
            position: relative;
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
            font-weight: 500;
            transition: color .3s ease;
        }
        .nav-link::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -6px;
            width: 28px;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
            transform: translateX(-50%) scaleX(0);
            transform-origin: center;
            transition: transform .35s ease;
        }
        .nav-link:hover {
            color: #fff;
        }
        .nav-link:hover::after,
        .nav-link.active::after {
            transform: translateX(-50%) scaleX(1);
        }
        .nav-link.active {
            color: #fff;
        }
        @media (max-width: 1023.98px) {
            .desktop-nav {
                display: none !important;
            }
        }

        .btn-gold {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 46px;
            padding: 0 22px;
            border-radius: 999px;
            background: linear-gradient(135deg, #A87A35, #D4A448 48%, #F4DEAA);
            color: #142523;
            font-weight: 700;
            font-size: 15px;
            box-shadow: 0 8px 24px rgba(184, 135, 62, 0.30);
            transition: all .3s ease;
        }
        .btn-gold:hover {
            box-shadow: 0 12px 32px rgba(184, 135, 62, 0.45);
            transform: translateY(-2px);
            background: linear-gradient(135deg, #b8873d, #e0b258 46%, #f8e6c0);
        }
        .btn-gold:active {
            transform: translateY(0) scale(0.98);
        }
        .btn-jade {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-width: 160px;
            height: 50px;
            padding: 0 24px;
            border-radius: 999px;
            background: linear-gradient(135deg, #0B3A38, #11665F 50%, #17A892);
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            border: 1px solid rgba(240, 216, 166, 0.25);
            box-shadow: 0 12px 30px rgba(11, 58, 56, 0.24);
            transition: all .3s ease;
        }
        .btn-jade:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 38px rgba(11, 58, 56, 0.32);
            background: linear-gradient(135deg, #0f4d4a, #14786f 50%, #1bc0a0);
        }
        .btn-jade:active {
            transform: translateY(0) scale(0.98);
        }
        .btn-ghost-light {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 48px;
            padding: 0 20px;
            border-radius: 999px;
            border: 1.5px solid rgba(255, 255, 255, 0.60);
            color: rgba(255, 255, 255, 0.92);
            font-size: 15px;
            font-weight: 600;
            transition: all .3s ease;
        }
        .btn-ghost-light:hover {
            border-color: #fff;
            background: rgba(255, 255, 255, 0.08);
            transform: translateY(-2px);
        }
        .btn-ghost-light:active {
            transform: translateY(0) scale(0.98);
        }
        .btn-ghost-dark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 46px;
            padding: 0 20px;
            border-radius: 999px;
            border: 1.5px solid #C9BFAA;
            background: #fff;
            color: var(--text-main);
            font-size: 14px;
            font-weight: 600;
            transition: all .3s ease;
        }
        .btn-ghost-dark:hover {
            border-color: var(--gold-deep);
            box-shadow: 0 10px 22px rgba(120, 90, 40, 0.10);
            transform: translateY(-2px);
        }
        .btn-ghost-dark:active {
            transform: translateY(0);
        }

        #siteHeader {
            transition: background-color .45s ease, box-shadow .45s ease, padding .45s ease;
        }
        #siteHeader.scrolled {
            background: rgba(6, 26, 25, 0.96) !important;
            box-shadow: 0 16px 42px rgba(4, 18, 17, 0.30);
            border-bottom: 1px solid rgba(240, 216, 166, 0.14);
            backdrop-filter: blur(14px);
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        .mobile-menu {
            position: fixed;
            inset: 0;
            z-index: 90;
            background: linear-gradient(160deg, #061A19 0%, #0B3A38 60%, #11665F 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding: 102px 26px 50px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-18px);
            transition: opacity .35s ease, transform .35s ease, visibility .35s;
        }
        .mobile-menu.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .mobile-menu .menu-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 17px 4px;
            font-size: 20px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.92);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            transition: color .25s;
        }
        .mobile-menu .menu-link:hover,
        .mobile-menu .menu-link.active-link {
            color: var(--gold-light);
        }

        .section-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 999px;
            background: rgba(250, 212, 156, 0.12);
            border: 1px solid rgba(216, 169, 95, 0.35);
            color: #B9904A;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.05em;
        }
        .section-eyebrow.on-dark {
            background: rgba(240, 216, 166, 0.10);
            border-color: rgba(240, 216, 166, 0.30);
            color: var(--gold-light);
        }
        .section-title {
            font-size: clamp(1.7rem, 3vw, 2.75rem);
            font-weight: 800;
            line-height: 1.28;
            letter-spacing: -0.01em;
            margin-top: 18px;
            margin-bottom: 0;
        }
        .section-title::after {
            content: "";
            display: block;
            width: 54px;
            height: 4px;
            border-radius: 4px;
            margin-top: 18px;
            background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), rgba(240, 216, 166, 0));
        }
        .section-title.light-title {
            color: #F3F0EA;
        }

        .card-hover {
            transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
        }
        .card-hover:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
        }

        .media-frame {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
        }
        .media-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease;
        }
        .card-hover:hover .media-frame img {
            transform: scale(1.05);
        }

        .feature-card {
            background: #fff;
            border: 1px solid rgba(200, 190, 168, 0.45);
            border-radius: 22px;
            padding: 30px 24px 26px;
            position: relative;
            overflow: hidden;
            transition: all .3s ease;
        }
        .feature-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 4px;
            background: linear-gradient(90deg, transparent, rgba(200, 151, 74, 0.55), transparent);
            opacity: 0;
            transition: opacity .35s;
        }
        .feature-card:hover {
            box-shadow: var(--shadow-md);
            border-color: rgba(200, 151, 74, 0.35);
        }
        .feature-card:hover::before {
            opacity: 1;
        }
        .feature-icon {
            width: 56px;
            height: 56px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(11, 58, 56, 0.08), rgba(23, 168, 146, 0.12));
            color: var(--jade);
            font-size: 22px;
        }
        .feature-card:hover .feature-icon {
            background: linear-gradient(135deg, #0B3A38, #17A892);
            color: #fff;
            box-shadow: 0 10px 22px rgba(15, 98, 87, 0.18);
        }

        .event-card {
            position: relative;
            border-radius: 24px;
            background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
            border: 1px solid rgba(255, 255, 255, 0.12);
            padding: 30px;
            transition: transform .35s ease, border-color .35s, background .35s;
        }
        .event-card:hover {
            transform: translateY(-6px);
            border-color: rgba(240, 216, 166, 0.28);
            background: linear-gradient(155deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
        }
        .event-card.best {
            border: 1px solid rgba(240, 216, 166, 0.55);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
        }
        .hot-ribbon {
            position: absolute;
            top: -1px;
            right: 28px;
            background: linear-gradient(90deg, #A87A35, #D4A448 50%, #EBCB8C);
            color: #16211F;
            font-size: 12px;
            font-weight: 700;
            padding: 6px 14px;
            letter-spacing: .12em;
            border-radius: 0 0 14px 14px;
        }
        .event-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin: 22px 0 26px;
        }
        .event-list li {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            color: rgba(255, 255, 255, 0.80);
            font-size: 14.5px;
            line-height: 1.55;
        }
        .event-list li i {
            margin-top: 5px;
            color: var(--gold-light);
            font-size: 12px;
        }

        .step-block {
            text-align: center;
            position: relative;
            padding: 10px 4px;
        }
        .step-num {
            width: 62px;
            height: 62px;
            margin: 0 auto 20px;
            border-radius: 20px;
            background: linear-gradient(140deg, #0B3A38, #11665F 60%, #19A88F);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 900;
            color: #F0D8A6;
            border: 1px solid rgba(240, 216, 166, 0.25);
            box-shadow: 0 14px 30px rgba(10, 56, 52, 0.18);
            position: relative;
        }
        .step-block::after {
            content: "\f105";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: 32px;
            right: -18px;
            color: var(--gold-deep);
            opacity: .75;
            font-size: 18px;
        }
        .step-block:last-child::after {
            display: none;
        }
        @media (max-width: 1023px) {
            .step-block::after {
                display: none;
            }
        }
        .step-block h3 {
            font-size: 18px;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 10px;
        }
        .step-block p {
            color: var(--text-sub);
            font-size: 14px;
            line-height: 1.8;
            max-width: 220px;
            margin: 0 auto;
        }

        .timer-cell {
            background: linear-gradient(180deg, #0D3B38, #08251F);
            border: 1px solid rgba(240, 216, 166, 0.30);
            color: var(--gold-light);
            width: 80px;
            height: 92px;
            border-radius: 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            font-weight: 900;
            box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
            position: relative;
        }
        .timer-cell span {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.55);
            letter-spacing: .18em;
            margin-top: 4px;
            font-weight: 500;
        }
        @media (max-width: 520px) {
            .timer-cell {
                width: 64px;
                height: 74px;
                font-size: 26px;
                border-radius: 14px;
            }
            .timer-cell span {
                font-size: 10px;
            }
        }

        .faq-item {
            background: #fff;
            border: 1px solid rgba(200, 190, 168, 0.5);
            border-radius: 18px;
            overflow: hidden;
            transition: box-shadow .3s ease, border-color .3s ease;
            margin-bottom: 14px;
        }
        .faq-item.open {
            border-color: rgba(200, 151, 74, 0.5);
            box-shadow: 0 16px 38px rgba(42, 62, 56, 0.08);
        }
        .faq-quest {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 18px;
            padding: 20px 22px;
            text-align: left;
            background: transparent;
            color: var(--text-main);
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5;
            transition: color .3s;
        }
        .faq-quest:hover {
            color: var(--jade);
        }
        .faq-icon {
            width: 28px;
            height: 28px;
            min-width: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #F2EEE4;
            color: #95794A;
            font-size: 13px;
            font-weight: 700;
            transition: background .3s, color .3s, transform .3s;
        }
        .faq-item.open .faq-icon {
            background: linear-gradient(135deg, #C8974A, #EBCB8C);
            color: #1B2523;
            transform: rotate(45deg);
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height .45s ease, opacity .4s ease, padding .3s ease;
            padding: 0 22px;
        }
        .faq-item.open .faq-answer {
            max-height: 460px;
            opacity: 1;
            padding: 0 22px 22px;
        }
        .faq-answer-inner {
            border-top: 1px dashed var(--border);
            padding-top: 16px;
            color: var(--text-sub);
            font-size: 15px;
            line-height: 1.9;
        }

        .stat-pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: rgba(255, 255, 255, 0.7);
            font-size: 13px;
        }
        .stat-pill i {
            color: var(--teal);
        }

        .img-shell {
            border-radius: 28px;
            overflow: hidden;
            box-shadow: 0 28px 58px rgba(20, 38, 35, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.5);
            background: #E7E2D6;
        }

        .cta-glow {
            animation: glowPulse 3.2s ease-in-out infinite;
        }
        @keyframes glowPulse {
            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(216, 169, 95, 0.35), 0 16px 40px rgba(0, 0, 0, 0.25);
            }
            50% {
                box-shadow: 0 0 0 16px rgba(216, 169, 95, 0), 0 16px 40px rgba(0, 0, 0, 0.25);
            }
        }

        .footer-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: rgba(255, 255, 255, 0.62);
            font-size: 14px;
            transition: color .3s ease, transform .3s ease;
        }
        .footer-link:hover {
            color: var(--gold-light);
            transform: translateX(4px);
        }
        .footer-column h4 {
            color: #F2F0E8;
            font-size: 14px;
            letter-spacing: .12em;
            margin-top: 0;
            margin-bottom: 18px;
            font-weight: 700;
        }
        .footer-column ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .footer-column li {
            margin-bottom: 12px;
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                transition-duration: .01ms !important;
                scroll-behavior: auto !important;
            }
        }