:root {
     --bg: #0b0f14;
     --bg-2: #0f141c;
     --card: #121720;
     --muted: #9aa4b2;
     --text: #e5e7eb;
     --heading: #f9fafb;
     --accent: #ffd56a;
     /* 金色 */
     --accent-2: #00fff0;
     /* 青色霓虹 */
     --danger: #ef4444;
     --success: #22c55e;
     --ring: rgba(255, 213, 106, 0.35);
     --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
     --radius: 18px;
     --radius-lg: 24px;
     --container: 1180px;
 }

 * {
     box-sizing: border-box;
 }

 html,
 body {
     height: 100%;
 }

 body {
     margin: 0;
     font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
         "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
         "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
     color: var(--text);
     background: radial-gradient(1200px 600px at 70% -10%, rgba(0, 0, 0, 0.06), transparent 60%), radial-gradient(800px 400px at -10% -10%, rgba(19, 19, 19, 0.08), transparent 60%), linear-gradient(180deg, #000000, #000000);
     overflow-x: hidden;
 }

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

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

 .container {
     width: 100%;
     max-width: var(--container);
     margin-inline: auto;
     padding: 0 20px;
 }

 /* Header */
 .header {
     position: sticky;
     top: 0;
     z-index: 1000;
     backdrop-filter: blur(10px);
     background: rgba(12, 17, 25, 0.55);
     border-bottom: 1px solid rgba(255, 213, 106, 0.08);
 }

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

 .brand {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .logo {
     width: 60px;
     height: 60px;
     border-radius: 12px;

     box-shadow: 0 0 30px rgba(255, 213, 106, 0.25);
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 213, 106, 0.4);
 }

 .logo::after {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(120px 60px at 60% 20%,
             rgba(255, 255, 255, 0.25),
             transparent 40%);
     mix-blend-mode: screen;
 }

 .wordmark {
     font-family: Orbitron, Inter, sans-serif;
     font-weight: 700;
     letter-spacing: 0.5px;
     display: flex;
     flex-direction: column;
     line-height: 1;
 }

 .wordmark span:first-child {
     font-size: 18px;
     color: var(--heading);
 }

 .wordmark span:last-child {
     font-size: 12px;
     color: var(--muted);
 }

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

 .nav a {
     font-weight: 600;
     font-size: 14px;
     color: #cdd5df;
     opacity: 0.9;
 }

 .nav a:hover {
     color: var(--heading);
 }

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

 .btn {
     --p: 10px 16px;
     padding: var(--p);
     font-weight: 700;
     font-size: 14px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: rgba(255, 255, 255, 0.02);
     color: var(--heading);
     cursor: pointer;
     transition: 0.2s ease;
     backdrop-filter: blur(6px);
 }

 .btn:hover {
     transform: translateY(-1px);
     border-color: rgba(255, 255, 255, 0.25);
 }

 .btn-primary {
     background: linear-gradient(135deg, var(--accent), #f59e0b);
     color: #1a1200;
     border: 1px solid rgba(255, 213, 106, 0.6);
     box-shadow: 0 8px 20px rgba(255, 213, 106, 0.25);
 }

 .btn-ghost {
     background: rgba(0, 0, 0, 0.25);
 }

 .hamburger {
     display: none;
     width: 42px;
     height: 42px;
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     background: rgba(255, 255, 255, 0.02);
 }

 .hamburger svg {
     width: 24px;
     height: 24px;
     margin: auto;
     display: block;
 }

 @media (max-width: 980px) {
     .nav {
         display: none;
     }

     .hamburger {
         display: block;
     }
 }

 .drawer {
     position: fixed;
     inset: 0 0 0 auto;
     width: min(86%, 360px);
     background: rgba(10, 14, 21, 0.96);
     backdrop-filter: blur(8px);
     transform: translateX(110%);
     transition: 0.25s ease;
     z-index: 1200;
     border-left: 1px solid rgba(255, 213, 106, 0.1);
     display: flex;
     flex-direction: column;
     padding: 24px;
 }

 .drawer.open {
     transform: translateX(0);
 }

 .drawer a {
     padding: 14px 8px;
     border-radius: 10px;
     color: #dbe2ea;
     font-weight: 600;
 }

 .drawer a:hover {
     background: rgba(255, 255, 255, 0.06);
 }

 .drawer .close {
     position: absolute;
     top: 14px;
     right: 14px;
     width: 42px;
     height: 42px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.02);
 }

 /* Hero */
 .hero {
     position: relative;
     overflow: hidden;
     border-bottom: 1px solid rgba(255, 213, 106, 0.08);
 }

 .grid-lines {
     position: absolute;
     inset: 0;
     pointer-events: none;
     background: radial-gradient(600px 300px at 20% 20%,
             rgba(0, 255, 240, 0.06),
             transparent 60%),
         radial-gradient(800px 400px at 80% 10%,
             rgba(255, 213, 106, 0.07),
             transparent 60%),
         repeating-linear-gradient(90deg,
             rgba(255, 255, 255, 0.04) 0 1px,
             transparent 1px 120px),
         repeating-linear-gradient(0deg,
             rgba(255, 255, 255, 0.03) 0 1px,
             transparent 1px 120px);
     mask: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3));
 }

 .hero-inner {
     display: grid;
     grid-template-columns: 1.15fr 0.85fr;
     gap: 36px;
     padding: 72px 0 48px;
 }

 .headline {
     font-family: Orbitron, Inter, sans-serif;
     font-weight: 800;
     letter-spacing: 0.5px;
     line-height: 1.1;
     font-size: clamp(28px, 4.2vw, 56px);
     color: var(--heading);
     text-shadow: 0 4px 24px rgba(255, 213, 106, 0.12);
 }

 .subtitle {
     color: #cfd6df;
     font-size: 18px;
     line-height: 1.65;
     margin: 14px 0 22px;
 }

 .badges {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin: 10px 0 18px;
 }

 .badge {
     padding: 8px 12px;
     border-radius: 999px;
     font-size: 12px;
     font-weight: 700;
     color: #0d0f12;
     background: linear-gradient(135deg, var(--accent), #f59e0b);
     border: 1px solid rgba(255, 213, 106, 0.6);
 }

 .badge.ghost {
     color: #bfeff0;
     background: rgba(0, 255, 240, 0.08);
     border: 1px solid rgba(0, 255, 240, 0.35);
 }

 .stat-row {
     display: flex;
     gap: 18px;
     flex-wrap: wrap;
     margin-top: 26px;
 }

 .stat {
     padding: 14px 16px;
     border-radius: 14px;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.08);
     min-width: 160px;
     box-shadow: var(--shadow);
 }

 .stat strong {
     display: block;
     font-size: 22px;
     color: var(--heading);
 }

 .stat span {
     font-size: 12px;
     color: var(--muted);
 }

 .hero-art {
     position: relative;
     min-height: 360px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: var(--radius-lg);
     background: radial-gradient(500px 260px at 50% 20%,
             rgba(0, 255, 240, 0.08),
             transparent 60%),
         linear-gradient(180deg,
             rgba(255, 255, 255, 0.03),
             rgba(255, 255, 255, 0.01));
     box-shadow: 0 10px 50px rgba(0, 0, 0, 0.4),
         inset 0 0 0 1px rgba(255, 213, 106, 0.06);
     overflow: hidden;
 }

 .hero-chip {
     position: absolute;
     inset: auto 10% 8% 10%;
     border-radius: 18px;
     padding: 16px;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.08);
 }

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

 .chip {
     background: rgba(0, 0, 0, 0.35);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 12px;
     padding: 10px;
     text-align: center;
     font-size: 12px;
     color: #cfd6df;
 }

 .orb {
     position: absolute;
     width: 140px;
     height: 140px;
     border-radius: 999px;
     filter: blur(30px);
     background: radial-gradient(circle at 30% 30%,
             var(--accent),
             transparent 60%);
     opacity: 0.25;
     top: -30px;
     right: -20px;
     pointer-events: none;
 }

 .orb.cyan {
     background: radial-gradient(circle at 70% 60%,
             var(--accent-2),
             transparent 60%);
     width: 200px;
     height: 200px;
     bottom: -30px;
     left: -30px;
 }

 @media (max-width: 980px) {
     .hero-inner {
         grid-template-columns: 1fr;
         padding: 48px 0;
     }

     .hero-art {
         min-height: 280px;
     }
 }

 /* Section */
 section {
     padding: 20px 0;
     position: relative;
 }

 .section-title {
     font-family: Orbitron, Inter, sans-serif;
     font-size: 28px;
     color: var(--heading);
     margin: 0 0 14px;
     letter-spacing: 0.5px;
     text-align: center;
     /* 居中对齐标题 */
 }

 .section-sub {
     color: #cfd6df;
     margin: 0 0 26px;
     line-height: 1.7;
     text-align: center;
 }

 /* Countdown */
 .countdown {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 12px;
     margin-top: 18px;
 }

 .cd-box {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 12px;
     padding: 12px;
     text-align: center;
 }

 .cd-box strong {
     font-size: 28px;
     color: var(--heading);
 }

 .cd-box span {
     font-size: 12px;
     color: var(--muted);
 }

 .cd-hint {
     margin-top: 10px;
     font-size: 12px;
     color: #b8bec7;
 }

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

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

 @media (max-width: 900px) {
     .grid-3 {
         grid-template-columns: 1fr;
     }

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

 .card {
     background: linear-gradient(180deg,
             rgba(255, 255, 255, 0.03),
             rgba(255, 255, 255, 0.015));
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: var(--radius);
     padding: 18px;
     box-shadow: var(--shadow);
 }

 .card h4 {
     margin: 0 0 8px;
     font-size: 18px;
     color: var(--heading);
 }

 .card p {
     margin: 0;
     color: #cfd6df;
     line-height: 1.7;
 }

 /* Tokenomics */
 .tokenomics {
     display: grid;
     grid-template-columns: 0.9fr 1.1fr;
     gap: 28px;
     align-items: center;
 }

 @media (max-width: 980px) {
     .tokenomics {
         grid-template-columns: 1fr;
     }
 }

 .pie {
     aspect-ratio: 1/1;
     width: min(360px, 80vw);
     border-radius: 50%;
     background: conic-gradient(#ffd56a 0 40%,
             /* Presale 40% */
             #7af7ff 40% 65%,
             /* Ecosystem 25% */
             #8b97ff 65% 80%,
             /* Team 15% */
             #b4f397 80% 90%,
             /* Marketing 10% */
             #ff9ecd 90% 100%
             /* Strategic 10% */
         );
     margin-inline: auto;
     position: relative;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45),
         inset 0 0 80px rgba(0, 0, 0, 0.3);
 }

 .pie::after {
     content: "WLFAI";
     position: absolute;
     inset: 12%;
     border-radius: 50%;
     background: radial-gradient(320px 200px at 50% 20%,
             rgba(255, 255, 255, 0.06),
             rgba(255, 255, 255, 0.02));
     display: grid;
     place-items: center;
     color: #e9edf3;
     font-weight: 800;
     letter-spacing: 0.5px;
     font-family: Orbitron, Inter, sans-serif;
     font-size: 22px;
     border: 1px dashed rgba(255, 255, 255, 0.12);
 }

 .legend {
     display: grid;
     gap: 10px;
 }

 .legend .row {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .dot {
     width: 12px;
     height: 12px;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.25);
 }

 .d1 {
     background: #ffd56a;
 }

 .d2 {
     background: #7af7ff;
 }

 .d3 {
     background: #8b97ff;
 }

 .d4 {
     background: #b4f397;
 }

 .d5 {
     background: #ff9ecd;
 }

 .legend span {
     font-size: 14px;
     color: #cfd6df;
 }

 /* Airdrop & Presale */
 .step {
     display: flex;
     gap: 12px;
     align-items: flex-start;
 }

 .num {
     min-width: 28px;
     height: 28px;
     border-radius: 999px;
     display: grid;
     place-items: center;
     font-weight: 800;
     font-size: 12px;
     color: #0f0f10;
     background: linear-gradient(135deg, var(--accent), #f59e0b);
     border: 1px solid rgba(255, 213, 106, 0.65);
     box-shadow: 0 6px 18px rgba(255, 213, 106, 0.25);
     margin-top: 3px;
 }

 .pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
     font-size: 12px;
     font-weight: 700;
     background: rgba(0, 255, 240, 0.08);
     color: #bff7f2;
     border: 1px solid rgba(0, 255, 240, 0.35);
     border-radius: 999px;
 }

 .progress {
     position: relative;
     height: 14px;
     border-radius: 999px;
     overflow: hidden;
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.12);
     box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.35);
 }

 .progress>i {
     position: absolute;
     inset: 0 auto 0 0;
     width: var(--value, 28%);
     display: block;
     background: linear-gradient(90deg, var(--accent), #f59e0b);
     box-shadow: 0 6px 18px rgba(255, 213, 106, 0.35);
 }

 .progress-label {
     display: flex;
     justify-content: space-between;
     font-size: 12px;
     color: #b9c2cc;
     margin-top: 8px;
 }

 /* Roadmap */
 .timeline {
     position: relative;
     padding-left: 22px;
 }

 .timeline::before {
     content: "";
     position: absolute;
     left: 9px;
     top: 0;
     bottom: 0;
     width: 2px;
     background: linear-gradient(180deg,
             rgba(255, 213, 106, 0.7),
             rgba(0, 255, 240, 0.6));
     filter: drop-shadow(0 0 6px rgba(255, 213, 106, 0.4));
 }

 .milestone {
     position: relative;
     margin: 16px 0;
     padding-left: 16px;
 }

 .milestone::before {
     content: "";
     position: absolute;
     left: -2px;
     top: 6px;
     width: 12px;
     height: 12px;
     border-radius: 999px;
     background: radial-gradient(circle at 30% 30%, var(--accent), #f59e0b);
     border: 1px solid rgba(255, 213, 106, 0.7);
     box-shadow: 0 0 16px rgba(255, 213, 106, 0.55);
 }

 .milestone h4 {
     margin: 0 0 6px;
     color: var(--heading);
 }

 .milestone p {
     margin: 0;
     color: #cfd6df;
 }

 /* Community */
 /* 
  * 社区板块样式
  * 背景更改为图片：/static/image/bg-map.png
  * 其他样式保持不变
  */
 .community {
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: var(--radius-lg);
     padding: 24px;
     background: url('/static/image/bg-map.png') center center/cover no-repeat;
     box-shadow: var(--shadow);
     text-align: center;
 }

 .community h3 {
     margin: 0 0 10px;
     font-size: 24px;
     color: var(--heading);
     font-family: Orbitron, Inter, sans-serif;
 }

 .community p {
     margin: 0 0 16px;
     color: #cfd6df;
 }

 .btn-row {
     display: flex;
     gap: 10px;
     justify-content: center;
     flex-wrap: wrap;
 }

 /* Footer */
 footer {
     border-top: 1px solid rgba(255, 213, 106, 0.08);
     margin-top: 56px;
     padding: 28px 0 48px;
     color: #aeb6c1;
     font-size: 13px;
 }

 .f-row {
     display: grid;
     grid-template-columns: 1.2fr 0.8fr;
     gap: 16px;
     align-items: center;
 }

 @media (max-width: 820px) {
     .f-row {
         grid-template-columns: 1fr;
         gap: 10px;
         text-align: center;
     }
 }

 .mini {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     justify-content: flex-end;
 }

 .mini a {
     padding: 6px 10px;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.12);
 }

 .disclaimer {
     opacity: 0.85;
     line-height: 1.65;
 }

 /* Focus rings */
 a:focus-visible,
 button:focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 2px;
     box-shadow: 0 0 0 6px var(--ring);
 }

 /* Smooth scroll */
 html {
     scroll-behavior: smooth;
 }

 /* ====================== */
 /* 📱 移动端优化 Mobile   */
 /* ====================== */
 @media (max-width: 768px) {
     body {
         font-size: 15px;
     }

     .container {
         padding: 0 14px;
     }

     /* Hero 区域 */
     .headline {
         font-size: 24px;
         line-height: 1.3;
     }

     .subtitle {
         font-size: 15px;
         line-height: 1.6;
     }

     .stat-row {
         flex-direction: column;
         gap: 12px;
     }

     .stat {
         min-width: auto;
         width: 100%;
     }

     /* 按钮 */
     .btn {
         width: 100%;
         justify-content: center;
         font-size: 15px;
         padding: 12px 14px;
     }

     /* 倒计时 */
     .countdown {
         grid-template-columns: repeat(2, 1fr);
         gap: 10px;
     }

     .cd-box strong {
         font-size: 22px;
     }

     /* 多列布局 -> 单列 */
     .grid-3,
     .grid-2 {
         grid-template-columns: 1fr !important;
     }

     /* Tokenomics 图表 */
     .tokenomics {
         grid-template-columns: 1fr !important;
     }

     .pie {
         width: 260px;
     }

     /* 路线图 */
     .timeline::before {
         left: 5px;
     }

     .milestone {
         padding-left: 14px;
     }

     /* 社区区块 */
     .community h3 {
         font-size: 20px;
     }

     .community p {
         font-size: 14px;
     }

     /* 页脚 */
     .f-row {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .mini {
         justify-content: center;
     }
 }

 .section {
     width: 100%;
     padding: 40px 20px;
 }

 /* 标题 */
 .page-heading {
     font-size: 2rem;
     text-align: center;
     font-weight: 600;
     margin-bottom: 10px;
 }

 .gradient-text {
     background: linear-gradient(90deg, #00FFFF, #FF00FF);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .page-subheading {
     text-align: center;
     font-size: 1.1rem;
     color: #ccc;
     margin-bottom: 40px;
 }

 /* 卡片容器 */
 .grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
 }

 @media (min-width: 640px) {
     .grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width: 1024px) {
     .grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 /* 卡片 */
 .card1 {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
     min-height: 300px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     padding: 20px;
     box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
 }

 .card1 img {
     width: 200px;
     height: auto;
     object-fit: contain;
 }

 .card-content {
     margin-bottom: 24px;
     text-align: center;
 }

 .card-content h4 {
     font-size: 1.5rem;
     font-weight: 600;
     margin-bottom: 10px;
 }

 @media (min-width: 1280px) {
     .card-content h4 {
         font-size: 1.8rem;
     }
 }

 .card-content p {
     font-size: 0.9rem;
     max-width: 320px;
     margin: 0 auto;
     line-height: 1.4;
     color: #ddd;
 }

 @media (min-width: 1280px) {
     .card-content p {
         font-size: 1rem;
     }
 }

 /* Tokenomics 交互式环形图 */
 .tokenomics-visual {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 22px;
 }

 .donut {
     width: 260px;
     height: 260px;
     transform: rotate(-90deg);
     /* 从顶部开始绘制 */
     cursor: pointer;
 }

 .donut-ring {
     stroke-width: 3;
 }

 .donut-segment {
     transition: stroke-width 0.3s ease, opacity 0.3s ease;
     opacity: 0.85;
 }

 .donut-segment:hover {
     stroke-width: 5;
     opacity: 1;
     filter: drop-shadow(0 0 6px rgba(255, 213, 106, .6));
 }

 .tokenomics-info {
     max-width: 460px;
     text-align: center;
     background: rgba(255, 255, 255, .03);
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: 16px;
     padding: 16px 22px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
 }

 .tokenomics-info h3 {
     margin: 0 0 10px;
     font-family: Orbitron, Inter, sans-serif;
     font-size: 18px;
     color: var(--heading);
 }

 .tokenomics-info p {
     margin: 0;
     font-size: 14px;
     line-height: 1.6;
     color: #cfd6df;
 }

 /* 移动端适配 */
 @media (max-width: 768px) {
     .donut {
         width: 200px;
         height: 200px;
     }

     .tokenomics-info {
         padding: 12px 16px;
     }

     .tokenomics-info h3 {
         font-size: 16px;
     }

     .tokenomics-info p {
         font-size: 13px;
     }
 }

 /* ====== 动态 Tokenomics 样式 ====== */
 .tk-wrap {
     display: grid;
     grid-template-columns: 320px minmax(280px, 1fr);
     gap: 22px;
     align-items: center;
 }

 @media (max-width: 900px) {
     .tk-wrap {
         grid-template-columns: 1fr;
         gap: 18px
     }
 }

 .tk-chart {
     position: relative;
     width: min(320px, 88vw);
     aspect-ratio: 1/1;
     border-radius: 24px;
     background:
         radial-gradient(420px 240px at 20% 20%, rgba(0, 255, 240, .08), transparent 60%),
         radial-gradient(420px 240px at 80% 20%, rgba(255, 213, 106, .08), transparent 60%),
         linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015));
     border: 1px solid rgba(255, 255, 255, .08);
     box-shadow: var(--shadow);
 }

 #tkDonut {
     display: block;
     margin: auto;
     transform: rotate(-90deg);
 }

 /* 扇区基础样式 */
 .tk-seg {
     fill: none;
     stroke-width: 3;
     filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
     transition: transform .35s cubic-bezier(.2, .8, .2, 1), stroke-width .25s ease, filter .25s ease, opacity .25s ease;
     transform-origin: center;
     cursor: pointer;
     opacity: .95;
 }

 /* 高亮态（悬停/选中） */
 .tk-seg.is-active,
 .tk-seg:hover {
     stroke-width: 4.6;
     transform: scale(1.04);
     filter: drop-shadow(0 0 10px rgba(255, 213, 106, .45));
     opacity: 1;
 }

 /* 中心信息 */
 .tk-center {
     position: absolute;
     inset: 0;
     display: grid;
     place-items: center;
     text-align: center;
     pointer-events: none;
     padding: 10px;
 }

 .tk-center-title {
     font-family: Orbitron, Inter, sans-serif;
     font-weight: 800;
     letter-spacing: .4px;
     color: var(--heading);
     font-size: 18px;
     opacity: .95;
 }

 .tk-center-value {
     font-weight: 800;
     color: var(--heading);
     line-height: 1;
     margin: 4px 0 2px;
     font-size: 30px;
     text-shadow: 0 4px 24px rgba(255, 213, 106, .12);
 }

 .tk-center-value span:last-child {
     font-size: 16px;
     opacity: .85
 }

 .tk-center-sub {
     color: #cfd6df;
     font-size: 12px;
     opacity: .9
 }

 /* 面板 */
 .tk-panel .tk-title {
     margin: 0 0 8px;
     font-size: 18px;
     font-family: Orbitron, Inter, sans-serif;
     color: var(--heading)
 }

 .tk-panel .tk-desc {
     margin: 0 0 12px;
     color: #cfd6df;
     line-height: 1.7
 }

 .tk-meta {
     display: flex;
     gap: 10px;
     flex-wrap: wrap
 }

 .tk-chip {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
     font-size: 12px;
     font-weight: 700;
     background: rgba(255, 255, 255, .03);
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 999px;
     color: #dbe2ea;
 }

 /* 图例 */
 .tk-legend {
     display: grid;
     grid-template-columns: repeat(5, minmax(120px, 1fr));
     gap: 10px;
     margin-top: 16px
 }

 @media (max-width: 980px) {
     .tk-legend {
         grid-template-columns: repeat(2, 1fr)
     }
 }

 @media (max-width: 520px) {
     .tk-legend {
         grid-template-columns: 1fr
     }
 }

 .tk-legend-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px;
     border-radius: 14px;
     background: rgba(255, 255, 255, .03);
     border: 1px solid rgba(255, 255, 255, .1);
     cursor: pointer;
     transition: transform .2s ease, border-color .2s ease, background .2s ease;
 }

 .tk-legend-item:hover {
     transform: translateY(-2px)
 }

 .tk-legend-item.is-active {
     border-color: rgba(255, 213, 106, .5);
     background: rgba(255, 213, 106, .08)
 }

 .tk-dot {
     width: 12px;
     height: 12px;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, .25)
 }

 /* 入场动画（可被 reduced-motion 关掉） */
 @keyframes segGrow {
     from {
         stroke-dasharray: 0 100;
     }

     to {
         /* 目标值由 JS 设置 */
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .tk-seg {
         transition: none
     }

     .tk-legend-item {
         transition: none
     }
 }

 /* ===== 模拟交易 Toast ===== */
 #trade-toasts {
     position: fixed;
     right: 18px;
     bottom: 18px;
     z-index: 9999;
     pointer-events: none;
     /* 避免挡住页面点击 */
 }

 .toast-trade {
     --gold: #ffd56a;
     --green: #31d158;
     --red: #ef4444;
     --blue: #6aa7ff;
     --text: #e5e7eb;
     background: #181b20;
     color: var(--text);
     border: 2px solid var(--gold);
     border-radius: 14px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 3px rgba(255, 213, 106, .15) inset;
     padding: 12px 14px;
     min-width: 280px;
     max-width: 360px;
     pointer-events: auto;
     position: relative;
     overflow: hidden;
 }

 /* 左侧在线绿点 */
 .toast-trade::before {
     content: "";
     position: absolute;
     left: 10px;
     top: 14px;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: var(--green);
     box-shadow: 0 0 10px rgba(49, 209, 88, .8);
 }

 /* 内容内边距让出绿点 */
 .toast-inner {
     padding-left: 16px;
 }

 .toast-top {
     font-weight: 700;
     font-size: 14px;
 }

 .toast-top a {
     color: var(--blue);
     text-decoration: none;
     border-bottom: 1px dashed rgba(106, 167, 255, .5);
 }

 .toast-top .amount {
     color: var(--red);
     font-weight: 800;
 }

 .toast-bottom {
     margin-top: 6px;
     font-size: 14px;
 }

 .toast-bottom .got {
     color: var(--gold);
     font-weight: 800;
 }

 .toast-bottom .bonus {
     color: var(--gold);
     font-weight: 800;
     text-decoration: none;
 }

 /* 进入/退出动画 */
 .toast-enter {
     animation: toastSlideIn .35s cubic-bezier(.2, .8, .2, 1);
 }

 .toast-leave {
     animation: toastFadeOut .35s ease forwards;
 }

 @keyframes toastSlideIn {
     from {
         transform: translateY(16px) translateX(16px);
         opacity: 0;
     }

     to {
         transform: translateY(0) translateX(0);
         opacity: 1;
     }
 }

 @keyframes toastFadeOut {
     to {
         transform: translateY(10px) translateX(0);
         opacity: 0;
     }
 }

 /* ====== Team Section ====== */
 #team {
     padding: 80px 0;
 }

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

 @media (max-width: 1024px) {
     .team-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 640px) {
     .team-grid {
         grid-template-columns: 1fr;
     }
 }

 .team-card {
     background: rgba(255, 255, 255, .03);
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: 18px;
     padding: 22px;
     text-align: center;
     transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
 }

 .team-card:hover {
     transform: translateY(-6px);
     border-color: rgba(255, 213, 106, .4);
     box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 0 12px rgba(255, 213, 106, .15);
 }

 .team-photo {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     object-fit: cover;
     margin-bottom: 14px;
     border: 2px solid rgba(255, 255, 255, .12);
 }

 .team-name {
     font-size: 18px;
     font-weight: 700;
     color: var(--heading);
     margin: 0;
 }

 .team-role {
     font-size: 14px;
     font-weight: 600;
     color: #ffd56a;
     margin: 4px 0 10px;
 }

 .team-bio {
     font-size: 14px;
     color: #cfd6df;
     line-height: 1.6;
     margin-bottom: 12px;
 }

 .team-links {
     display: flex;
     justify-content: center;
     gap: 14px;
 }

 .icon-link {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     font-size: 14px;
     font-weight: bold;
     border-radius: 50%;
     background: rgba(255, 255, 255, .06);
     color: #fff;
     text-decoration: none;
     transition: background .25s ease, transform .25s ease;
 }

 .icon-link:hover {
     background: #ffd56a;
     color: #000;
     transform: scale(1.1);
 }

 .guide-overlay[hidden] {
     display: none !important;
 }

 /* 触发按钮（示例风格，可与站点按钮统一） */
 .btn-open-guide {
     padding: 10px 16px;
     border-radius: 12px;
     background: #ffd56a;
     color: #1a1200;
     font-weight: 800;
     border: 1px solid rgba(255, 213, 106, 0.6);
     cursor: pointer;
 }

 /* 遮罩 */
 .guide-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     display: grid;
     place-items: center;
     z-index: 10000;
     animation: overlayIn 0.2s ease;
 }

 @keyframes overlayIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 /* 弹窗容器 */
 .guide-modal {
     width: min(820px, 92vw);
     max-height: min(88vh, 960px);
     background: #000000;
     color: #e5e7eb;
     border-radius: 18px;
     border: 1px solid rgba(255, 213, 106, 0.25);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55),
         0 0 0 3px rgba(255, 213, 106, 0.1) inset;
     display: grid;
     grid-template-rows: auto 1fr auto;
     overflow: hidden;
     animation: modalIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
 }

 @keyframes modalIn {
     from {
         transform: translateY(10px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 /* 头部 */
 .guide-header {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 18px 48px 12px;
     position: relative;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     background: linear-gradient(180deg,
             rgba(255, 213, 106, 0.06),
             rgba(255, 255, 255, 0));
 }

 .guide-header h2 {
     margin: 0;
     font-size: 24px;
     font-weight: 900;
     letter-spacing: 0.5px;
     color: #ffd56a;
 }

 .guide-close {
     position: absolute;
     right: 14px;
     top: 10px;
     width: 38px;
     height: 38px;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     background: rgba(255, 255, 255, 0.04);
     color: #ffd56a;
     font-size: 22px;
     cursor: pointer;
 }

 /* 内容区（独立滚动） */
 .guide-body {
     padding: 16px 20px;
     overflow: auto;
 }

 .guide-block {
     margin: 10px 0 18px;
 }

 .guide-h3 {
     margin: 0 0 8px;
     font-size: 18px;
     color: #ffd56a;
 }

 .guide-step-title {
     font-weight: 800;
     color: #ffd56a;
     margin: 10px 0 6px;
 }

 .guide-p {
     margin: 0;
     color: #d2dae4;
     line-height: 1.7;
 }

 .guide-divider {
     border: 0;
     height: 1px;
     background: linear-gradient(90deg,
             rgba(255, 255, 255, 0.08),
             rgba(255, 255, 255, 0.02));
     margin: 16px 0;
 }

 /* 卡片 */
 .guide-card {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 14px;
     padding: 16px;
 }

 .card-title {
     color: #ffd56a;
     font-weight: 900;
     margin-bottom: 8px;
 }

 .guide-ul {
     margin: 0;
     padding: 0 0 0 18px;
     color: #cfd6df;
     line-height: 1.8;
 }

 /* 汇率框 */
 .guide-rate {
     border: 2px solid #ffd56a;
     border-radius: 14px;
     padding: 14px 16px;
     background: rgba(255, 213, 106, 0.05);
 }

 .rate-title {
     color: #ffd56a;
     font-weight: 900;
     margin-bottom: 8px;
 }

 .rate-list {
     margin: 0;
     padding-left: 18px;
     color: #e9edf5;
     line-height: 1.8;
 }

 /* 底部固定栏 */
 .guide-footer {
     border-top: 1px solid rgba(255, 255, 255, 0.08);
     padding: 12px 16px;
     background: linear-gradient(0deg,
             rgba(255, 255, 255, 0.03),
             rgba(255, 255, 255, 0));
     display: flex;
     justify-content: flex-start;
 }

 .guide-btn {
     padding: 10px 18px;
     border-radius: 12px;
     background: #0a0d11;
     color: #ffd56a;
     border: 2px solid #ffd56a;
     font-weight: 900;
     cursor: pointer;
 }

 /* 小屏适配：全屏抽屉风格 */
 @media (max-width: 640px) {
     .guide-modal {
         width: 100vw;
         height: 100vh;
         max-height: 100vh;
         border-radius: 0;
         border-left: none;
         border-right: none;
     }

     .guide-header {
         padding: 16px 48px 12px;
     }

     .guide-header h2 {
         font-size: 20px;
     }

     .guide-body {
         padding: 12px 14px;
     }
 }

 /* 验证按钮加载态：小转圈动画 */
 .btn.is-loading {
     position: relative;
     pointer-events: none;
     opacity: .9;
 }

 /* 让按钮内的文字与转圈横向排布更自然 */
 .btn.is-loading {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     /* 文字与转圈的间距 */
 }

 /* 右侧小转圈 */
 .btn.is-loading::after {
     content: "";
     width: 14px;
     height: 14px;
     border-radius: 50%;
     border: 2px solid rgba(255, 255, 255, .35);
     border-top-color: #ffd56a;
     /* 主题金色高亮 */
     animation: spinner-rot .8s linear infinite;
 }

 /* 旋转关键帧 */
 @keyframes spinner-rot {
     to {
         transform: rotate(360deg);
     }
 }

 /* 禁用态按钮（全站统一加固） */
 button[disabled] {
     opacity: .55;
     cursor: not-allowed !important;
     filter: grayscale(15%);
 }

 /* 提示行（字号与行距） */
 .hint-line,
 .addr-line {
     font-size: 12px;
     line-height: 1.6;
 }

 /* 移动端：按钮全宽更好点 */
 @media (max-width: 768px) {
     #airdrop .btn {
         width: 100%;
     }
 }

 /* ---------- 主题变量（可与全站保持一致） ---------- */
 #features {
     --bg-card: rgba(255, 255, 255, .03);
     --bd-card: rgba(255, 255, 255, .10);
     --bd-active: rgba(255, 213, 106, .45);
     --txt-main: #e5e7eb;
     --txt-sub: #cfd6df;
     --heading: #f2f4f8;
     --gold: #ffd56a;
     --glow: 0 12px 32px rgba(0, 0, 0, .55), 0 0 14px rgba(255, 213, 106, .10);
 }

 #features {
     padding: 72px 0;
 }

 #features .feat-head {
     text-align: center;
     margin-bottom: 20px;
 }

 #features .section-title {
     margin: 0 0 8px;
 }

 #features .section-sub {
     margin: 0;
     color: var(--txt-sub);
 }

 /* ---------- 网格 ---------- */
 .features-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(280px, 1fr));
     gap: 20px;
     margin-top: 16px;
 }

 @media (max-width: 900px) {
     .features-grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 640px) {
     .features-grid {
         grid-template-columns: 1fr;
     }
 }

 /* ---------- 卡片 ---------- */
 .feature-card {
     background: var(--bg-card);
     border: 1px solid var(--bd-card);
     border-radius: 18px;
     padding: 18px;
     color: var(--txt-main);
     box-shadow: var(--glow);
     transition: transform .35s cubic-bezier(.2, .8, .2, 1),
         border-color .35s ease, background .35s ease, box-shadow .35s ease;
     outline: none;
     position: relative;
     overflow: hidden;
     /* 入场动画 */
     opacity: 0;
     transform: translateY(8px);
     animation: featIn .6s ease forwards;
 }

 /* 进场“阶梯”延迟 */
 .feature-card:nth-child(1) {
     animation-delay: .05s;
 }

 .feature-card:nth-child(2) {
     animation-delay: .15s;
 }

 .feature-card:nth-child(3) {
     animation-delay: .25s;
 }

 .feature-card:nth-child(4) {
     animation-delay: .35s;
 }

 @keyframes featIn {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .feature-card:hover,
 .feature-card:focus-visible {
     transform: translateY(-6px);
     border-color: var(--bd-active);
     background: url('/static/image/join-revolution-background-desktop.webp') center center/cover no-repeat;
     box-shadow: 0 20px 44px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 213, 106, .16);
 }

 .feat-title {
     margin: 10px 0 6px;
     color: var(--heading);
     font-weight: 800;
     font-size: 18px;
 }

 .feat-desc {
     margin: 0 0 10px;
     color: var(--txt-sub);
     line-height: 1.7;
 }

 .feat-points {
     margin: 0;
     padding-left: 18px;
     color: var(--txt-main);
     line-height: 1.8;
 }

 /* ---------- 图标与标记 ---------- */
 .icon-wrap {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 8px;
 }

 .icon {
     width: 40px;
     height: 40px;
 }

 .i-stroke {
     fill: none;
     stroke: #9ecbff;
     stroke-width: 2.4;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .i-fill {
     fill: #7af7ff;
 }

 .tag {
     display: inline-flex;
     align-items: center;
     padding: 6px 10px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, .18);
     background: rgba(255, 255, 255, .05);
     color: var(--gold);
     font-weight: 800;
     font-size: 12px;
     letter-spacing: .2px;
 }

 /* ---------- 降级支持 ---------- */
 @media (prefers-reduced-motion: reduce) {
     .feature-card {
         animation: none;
         opacity: 1;
         transform: none;
     }

     .feature-card,
     .feature-card:hover,
     .feature-card:focus-visible {
         transition: none;
     }
 }

 /* ===== Airdrop Guide – Elegant / Responsive ===== */
 .airdrop-guide {
     --bg: rgba(255, 255, 255, .03);
     --bd: rgba(255, 255, 255, .10);
     --bd-hi: rgba(255, 213, 106, .45);
     --txt: #e6e9ef;
     --sub: #cfd6df;
     --gold: #ffd56a;
     --blue: #9ecbff;
     --cyan: #7af7ff;
     padding: 54px 0 28px;
 }

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

 @media (max-width: 1024px) {
     .ag-wrap {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 640px) {
     .ag-wrap {
         grid-template-columns: 1fr;
     }
 }

 .ag-card {
     background: var(--bg);
     border: 1px solid var(--bd);
     border-radius: 18px;
     padding: 18px;
     color: var(--txt);
     position: relative;
     overflow: hidden;
     box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
     transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s, background .3s, box-shadow .35s;
     opacity: 0;
     transform: translateY(8px);
     animation: agIn .6s ease forwards;
 }

 .ag-card:nth-child(1) {
     animation-delay: .05s
 }

 .ag-card:nth-child(2) {
     animation-delay: .15s
 }

 .ag-card:nth-child(3) {
     animation-delay: .25s
 }

 @keyframes agIn {
     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 .ag-card:hover {
     transform: translateY(-6px);
     border-color: var(--bd-hi);
     background: linear-gradient(180deg, rgba(255, 213, 106, .05), rgba(255, 255, 255, 0));
     box-shadow: 0 20px 44px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 213, 106, .16);
 }

 .ag-icon {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 8px
 }

 .ag-svg {
     width: 40px;
     height: 40px
 }

 .ag-stroke {
     fill: none;
     stroke: var(--blue);
     stroke-width: 2.4;
     stroke-linecap: round;
     stroke-linejoin: round
 }

 .ag-fill {
     fill: var(--cyan)
 }

 .ag-head {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 6px
 }

 .ag-step {
     color: var(--gold);
     font-weight: 900
 }

 .ag-title {
     margin: 0;
     font-size: 18px;
     font-weight: 900;
     letter-spacing: .2px;
     color: #fff
 }

 .ag-desc {
     margin: 0;
     color: var(--sub);
     line-height: 1.8
 }

 .ag-em {
     display: block;
     margin-top: 6px;
     color: #d7ebff
 }

 .ag-note {
     margin-top: 18px;
     background: rgba(255, 255, 255, .04);
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 16px;
     padding: 14px 16px;
 }

 .ag-note-title {
     margin: 0 0 8px;
     color: var(--gold);
     font-weight: 900;
     font-size: 16px
 }

 .ag-note-list {
     margin: 0;
     padding-left: 18px;
     color: #e9edf5;
     line-height: 1.8
 }

 @media (prefers-reduced-motion: reduce) {
     .ag-card {
         animation: none;
         transform: none
     }

     .ag-card,
     .ag-card:hover {
         transition: none
     }
 }

 /* 团队区域 */
 #team {
     padding: 60px 0;

     text-align: center;
 }

 #team .section-title {
     font-size: 28px;
     font-weight: 800;
     color: #fff;
     margin-bottom: 10px;
 }

 #team .section-sub {
     color: #aaa;
     margin-bottom: 40px;
 }

 /* 网格布局 */
 .team-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 24px;
     justify-items: center;
 }

 /* 卡片 */
 .team-card {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
     border-radius: 18px;
     padding: 16px;
     text-align: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     max-width: 240px;
     overflow: hidden;
     position: relative;
 }

 .team-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 16px 28px rgba(0, 0, 0, 0.55);
 }

 /* 固定大小的照片容器，保持完整显示 + 居中 */
 .team-photo {
     width: 100%;
     height: 230px;
     object-fit: contain;
     /* 保证完整性 */
     object-position: center;
     /* 居中显示 */
     background: linear-gradient(180deg, #222 0%, #111 100%);
     /* 背景渐变 */
     border-radius: 14px;
     margin-bottom: 12px;
     display: block;
 }

 /* 渐变遮罩：顶部轻微光感 */
 .team-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 60%;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0));
     pointer-events: none;
 }

 /* 名字 */
 .team-name {
     font-size: 16px;
     font-weight: 700;
     color: #fff;
     margin: 6px 0;
 }

 /* 职位标签 */
 .team-role {
     display: inline-block;
     padding: 4px 12px;
     background: #111;
     border-radius: 30px;
     font-size: 13px;
     color: #fff;
     border: 1px solid rgba(255, 255, 255, 0.15);
 }

 /* 移动端 2 列 */
 @media (max-width: 640px) {
     .team-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 16px;
     }

     .team-card {
         max-width: 100%;
     }

     .team-photo {
         height: 160px;
     }
 }

 .ziti {
     background: linear-gradient(135deg, var(--accent), #f59e0b);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent;
 }

 /* Intro Section */
 #wl-intro {
     background: #0b0f1400;
     color: #e9ecf3;
     padding: 64px 20px;
     position: relative;
     overflow: hidden;
 }

 #wl-intro .container {
     max-width: 900px;
     margin: 0 auto;
 }

 .wl-intro-box {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 213, 106, 0.2);
     border-radius: 16px;
     padding: 32px;
     box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45),
         0 0 0 3px rgba(255, 213, 106, 0.05) inset;
     backdrop-filter: blur(6px);
 }

 .wl-intro-title {
     font-size: 26px;
     font-weight: 900;
     margin-bottom: 16px;
     color: #ffd56a;
     text-align: center;
 }

 .wl-intro-text {
     line-height: 1.8;
     font-size: 16px;
     margin: 14px 0;
 }

 .wl-intro-text strong {
     color: #fff;
 }

 .highlight {
     color: #ffd56a;
     font-weight: 900;
 }

 /* Fade animation */
 .wl-fade {
     opacity: 0;
     transform: translateY(10px);
     animation: fadeInUp 0.8s ease forwards;
 }

 @keyframes fadeInUp {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Mobile Adaptation */
 @media (max-width: 640px) {
     .wl-intro-box {
         padding: 20px;
     }

     .wl-intro-title {
         font-size: 22px;
     }

     .wl-intro-text {
         font-size: 15px;
     }
 }

 /* ===== Theme ===== */
 #wl-solution.wl-sol {
     --bg: #000000;
     --bg-soft: #000000;
     --gold: #ffd56a;
     --gold-2: #e6b800;
     --txt: #e9ecf3;
     --muted: #a7b0be;
     --card: rgba(255, 255, 255, 0.04);
     --bd: rgba(255, 255, 255, 0.12);
     color: var(--txt);
     background: var(--bg);
     position: relative;
     overflow: hidden;
     padding: 64px 0 56px;
 }

 .wl-sol .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .wl-sol-bg {
     position: absolute;
     inset: 0;
     pointer-events: none;
     /*   background: radial-gradient(900px 420px at -10% 0%,
             rgba(255, 213, 106, 0.1),
             transparent 60%),
         radial-gradient(900px 420px at 110% 10%,
             rgba(255, 213, 106, 0.08),
             transparent 60%),
         linear-gradient(180deg,
             rgba(255, 255, 255, 0.02),
             rgba(255, 255, 255, 0)); */
     filter: saturate(110%);
 }

 /* Head */
 .wl-sol-head {
     text-align: center;
     margin-bottom: 18px;
 }

 .wl-sol-title {
     margin: 0 0 6px;
     color: #fff;
     font-weight: 900;
     font-size: 28px;
 }

 .wl-sol-sub {
     margin: 0;
     color: var(--muted);
 }

 /* Grid */
 .wl-sol-grid {
     display: grid;
     gap: 16px;
     grid-template-columns: repeat(3, minmax(260px, 1fr));
     margin-top: 18px;
 }

 @media (max-width: 1100px) {
     .wl-sol-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 720px) {
     .wl-sol-grid {
         grid-template-columns: 1fr;
     }
 }

 /* Card */
 .wl-sol-card {
     background: var(--card);
     border: 1px solid var(--bd-card);
     border-radius: 16px;
     padding: 16px 16px 14px;
     box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45),
         0 0 0 3px rgba(255, 213, 106, 0.05) inset;
     transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
         border-color 0.3s, background 0.3s, box-shadow 0.35s;
 }

 .wl-sol-card:hover {
     transform: translateY(-6px);
     border-color: rgba(255, 213, 106, 0.45);
     background: linear-gradient(180deg,
             rgba(255, 213, 106, 0.05),
             rgba(255, 255, 255, 0));
     box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6),
         0 0 18px rgba(255, 213, 106, 0.16);
 }

 /* Icon */
 .wl-sol-ico {
     width: 44px;
     height: 44px;
     margin-bottom: 8px;
 }

 .wl-sol-ico svg {
     width: 44px;
     height: 44px;
 }

 .wl-sol .stk {
     fill: none;
     stroke: #9ecbff;
     stroke-width: 2.4;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .wl-sol .fill {
     fill: #7af7ff;
 }

 /* Text */
 .wl-sol-card-title {
     margin: 2px 0 6px;
     color: #fff;
     font-size: 18px;
     font-weight: 900;
 }

 .wl-sol-card-desc {
     margin: 0 0 8px;
     color: var(--txt);
     line-height: 1.75;
 }

 /* KV bullets */
 .wl-sol-kv {
     margin: 0 0 8px 0;
     padding-left: 18px;
     color: var(--txt);
     line-height: 1.8;
 }

 .wl-sol-kv li {
     margin: 2px 0;
 }

 /* Steps */
 .wl-sol-steps {
     margin: 0;
     padding: 0;
     list-style: none;
     display: grid;
     gap: 8px;
 }

 .wl-sol-steps li {
     display: flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, 0.03);
     border: 1px dashed rgba(255, 255, 255, 0.14);
     border-radius: 12px;
     padding: 8px 10px;
     color: var(--muted);
 }

 .wl-sol-steps li span {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 24px;
     height: 24px;
     border-radius: 999px;
     background: linear-gradient(135deg, var(--gold), var(--gold-2));
     color: #0b0f14;
     font-weight: 900;
     font-size: 12px;
 }

 /* details */
 .wl-sol-more {
     margin-top: 10px;
 }

 .wl-sol-more summary {
     cursor: pointer;
     user-select: none;
     outline: none;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 10px;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.16);
     background: rgba(255, 255, 255, 0.04);
     color: var(--gold);
     font-weight: 900;
     transition: background 0.25s ease, border-color 0.25s ease;
 }

 .wl-sol-more[open] summary {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 213, 106, 0.4);
 }

 .wl-sol-more p {
     margin: 8px 0 0;
     color: var(--txt);
 }

 /* CTA */
 .wl-sol-cta {
     margin-top: 20px;
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 16px;
     padding: 14px;
     display: grid;
     gap: 10px;
     align-items: center;
     grid-template-columns: 1fr auto;
     background: linear-gradient(135deg,
             rgba(255, 213, 106, 0.06),
             rgba(255, 255, 255, 0));
 }

 .wl-sol-cta-title {
     margin: 0 0 6px;
     color: #fff;
     font-weight: 900;
 }

 .wl-sol-cta-desc {
     margin: 0;
     color: var(--muted);
 }

 .wl-sol-cta-right {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     justify-content: flex-end;
 }

 .wl-sol-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 16px;
     border-radius: 12px;
     font-weight: 900;
     letter-spacing: 0.2px;
     color: #0b0f14;
     background: linear-gradient(135deg, var(--gold), var(--gold-2));
     border: 1px solid rgba(255, 213, 106, 0.5);
     box-shadow: 0 8px 22px rgba(255, 213, 106, 0.18);
     transition: transform 0.25s ease, box-shadow 0.25s ease,
         filter 0.25s ease;
     text-decoration: none;
 }

 .wl-sol-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 14px 30px rgba(255, 213, 106, 0.28);
     filter: saturate(110%);
 }

 .wl-sol-btn-ghost {
     background: rgba(255, 255, 255, 0.04);
     color: var(--gold);
     border: 1px solid rgba(255, 255, 255, 0.16);
     box-shadow: none;
 }

 .wl-sol-btn-ghost:hover {
     background: rgba(255, 255, 255, 0.08);
 }

 /* Animations */
 .wl-anim {
     opacity: 0;
     transform: translateY(8px);
     animation: wlShow 0.6s ease forwards;
 }

 @keyframes wlShow {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .wl-anim {
         animation: none !important;
         opacity: 1;
         transform: none;
     }
 }