/* ==========================================================================
   OmniAI - Modern Brutalist & Futuristic Stylesheet
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

   :root {
       --bg-color: #ffffff;
       --surface-color: #f8f9fc;
       --text-primary: #0a0a14;
       --text-secondary: #5a5a70;
       
       --brand-pink: #FF107A;
       --brand-cyan: #00E5FF;
       --brand-yellow: #FFEA00;
       
       --gradient-primary: linear-gradient(135deg, var(--brand-pink), var(--brand-cyan));
       --gradient-pink: linear-gradient(135deg, #FF107A, #FF5C9D);
       --gradient-cyan: linear-gradient(135deg, #00E5FF, #0099FF);
       --gradient-yellow: linear-gradient(135deg, #FFEA00, #FFB300);
       
       --font-heading: 'Outfit', sans-serif;
       --font-body: 'Space Grotesk', sans-serif;
       
       --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
       --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
       --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
       
       --shadow-glass: 0 12px 40px 0 rgba(0, 0, 0, 0.04);
       --shadow-glow-pink: 0 0 30px rgba(255, 16, 122, 0.3);
       --shadow-glow-cyan: 0 0 30px rgba(0, 229, 255, 0.3);
       
       --border-glass: 1px solid rgba(0,0,0,0.06);
   }
   
   * { margin: 0; padding: 0; box-sizing: border-box; }
   html { scroll-behavior: smooth; }
   body { font-family: var(--font-body); background-color: var(--bg-color); color: var(--text-primary); overflow-x: hidden; line-height: 1.7; -webkit-font-smoothing: antialiased; }
   h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.1; }
   a { text-decoration: none; color: inherit; cursor: pointer; }
   button, .btn-neo, .switch, input[type="range"] { cursor: pointer; }
   .container { max-width: 1300px; margin: 0 auto; padding: 0 24px; }
   
   .text-center { text-align: center; }
   .mx-auto { margin-left: auto; margin-right: auto; }
   .mt-20 { margin-top: 20px; }
   .mt-60 { margin-top: 60px; }
   .mt-80 { margin-top: 80px; }
   .mb-10 { margin-bottom: 10px; }
   .mb-20 { margin-bottom: 20px; }
   .mb-60 { margin-bottom: 60px; }
   .ml-10 { margin-left: 10px; }
   .mr-5 { margin-right: 5px; }
   .max-w-600 { max-width: 600px; }
   .font-bold { font-weight: bold; }
   .relative { position: relative; }
   .flex-align { display: flex; align-items: center; }
   .flex-between { display: flex; align-items: center; justify-content: space-between; }
   
   .text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
   .text-stroke { color: transparent; -webkit-text-stroke: 1.5px var(--text-primary); }
   .text-stroke-white { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.5); }
   .cyan-text { color: var(--brand-cyan); }
   .pink-text { color: var(--brand-pink); }
   .yellow-text { color: var(--brand-yellow); }
   .text-secondary { color: var(--text-secondary); }
   
   .cyan-bg { background-color: rgba(0, 229, 255, 0.1); color: var(--text-primary); border: 1px solid var(--brand-cyan); }
   .pink-bg { background-color: rgba(255, 16, 122, 0.1); color: var(--brand-pink); border: 1px solid var(--brand-pink); }
   .yellow-bg { background-color: rgba(255, 234, 0, 0.1); color: var(--text-primary); border: 1px solid var(--brand-yellow); }
   
   .pink-gradient { background: var(--gradient-pink); color: white; }
   .cyan-gradient { background: var(--gradient-cyan); color: white; }
   .yellow-gradient { background: var(--gradient-yellow); color: #000; }
   
   .cyan-glow { box-shadow: var(--shadow-glow-cyan); }
   .pink-glow { box-shadow: var(--shadow-glow-pink); }
   .yellow-glow { box-shadow: 0 0 30px rgba(255, 234, 0, 0.4); }
   .text-glow { text-shadow: 0 0 15px rgba(255,16,122,0.5); }
   
   /* Custom Cursor Accent */
   .cursor-dot { display: none; }
   .cursor-outline { width: 24px; height: 24px; border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 16, 122, 0.15), transparent 70%); transition: width 0.3s var(--ease-out-expo), height 0.3s var(--ease-out-expo), opacity 0.3s; opacity: 0.8; }
   .cursor-hover .cursor-outline { width: 48px; height: 48px; background: radial-gradient(circle, rgba(0, 229, 255, 0.12), transparent 70%); }
   
   .noise-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }
   
   /* Orbs */
   .orb { position: absolute; border-radius: 50%; filter: blur(100px); z-index: 1; opacity: 0.5; mix-blend-mode: multiply; animation: orbFloat 20s infinite alternate var(--ease-in-out-circ); }
   .orb-1 { width: 50vw; height: 50vw; background: rgba(255, 16, 122, 0.3); top: -10%; left: -10%; animation-duration: 25s; }
   .orb-2 { width: 40vw; height: 40vw; background: rgba(0, 229, 255, 0.3); bottom: -10%; right: -5%; animation-delay: -5s; }
   .orb-3 { width: 30vw; height: 30vw; background: rgba(255, 234, 0, 0.2); top: 40%; left: 50%; transform: translateX(-50%); animation-duration: 15s; }
   @keyframes orbFloat { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(10%, -10%) scale(1.1); } 66% { transform: translate(-5%, 15%) scale(0.9); } 100% { transform: translate(-15%, -5%) scale(1.05); } }
   
   /* Centered Navigation Absolute Fix */
   .floating-nav { position: fixed; top: 20px; left: 0; right: 0; width: calc(100% - 48px); max-width: 1200px; margin: 0 auto; z-index: 1000; }
   .nav-inner {
       background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
       border: 1px solid rgba(255,255,255,0.4); border-radius: 100px; padding: 0 24px;
       display: flex; justify-content: center; align-items: center; position: relative;
       box-shadow: 0 10px 40px rgba(0,0,0,0.08);
       min-height: 64px;
   }
   .logo-wrap { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; z-index: 10; }
   .nav-links { display: flex; gap: 32px; white-space: nowrap; align-items: center; justify-content: center; }
   .nav-action { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; z-index: 10; }
   .logo-wrap img { height: 32px; object-fit: contain; }
   .nav-links a { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.5px; text-transform: uppercase; }
   .hover-underline { position: relative; overflow: hidden; }
   .hover-underline::after { content: attr(data-text); position: absolute; top: 100%; left: 0; width: 100%; height: 100%; color: var(--brand-pink); transition: top 0.3s var(--ease-out-expo); }
   .hover-underline:hover { color: transparent; }
   .hover-underline:hover::after { top: 0; }
   
   /* Buttons */
   .btn-neo { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 100px; font-weight: 700; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 1px; transition: all 0.4s var(--ease-out-expo); position: relative; overflow: hidden; }
   .btn-sm { padding: 12px 24px; font-size: 0.85rem; }
   .btn-neo.pulse-border { border: 2px solid var(--text-primary); background: transparent; color: var(--text-primary); animation: borderPulse 3s infinite; }
   .btn-neo.pulse-border:hover { background: var(--text-primary); color: white; }
   .btn-neo.solid { background: var(--text-primary); color: white; border: none; }
   .btn-neo.solid:hover { background: var(--brand-pink); box-shadow: var(--shadow-glow-pink); transform: translateY(-4px); }
   .btn-neo.outline { background: transparent; border: 2px solid rgba(10, 10, 20, 0.1); color: var(--text-primary); }
   .btn-neo.outline:hover { border-color: var(--text-primary); transform: translateY(-4px); }
   @keyframes borderPulse { 0% { border-color: rgba(10, 10, 20, 0.2); } 50% { border-color: rgba(10, 10, 20, 1); } 100% { border-color: rgba(10, 10, 20, 0.2); } }
   
   /* Badges */
   .badge-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: rgba(10, 10, 20, 0.05); border: 1px solid rgba(10, 10, 20, 0.1); border-radius: 100px; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 1px; margin-bottom: 24px; }
   .pulse-dot { width: 8px; height: 8px; background: var(--brand-pink); border-radius: 50%; box-shadow: 0 0 10px var(--brand-pink); animation: dotPulse 1.5s infinite; }
   @keyframes dotPulse { 0% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
   
   /* Hero Section */
   .hero-sect { min-height: 100vh; padding-top: 150px; position: relative; display: flex; flex-direction: column; z-index: 10; background: radial-gradient(circle at 15% 50%, rgba(255, 16, 122, 0.03), transparent 30%), radial-gradient(circle at 85% 30%, rgba(0, 229, 255, 0.03), transparent 30%); }
   .hero-container { display: flex; justify-content: space-between; align-items: center; flex-grow: 1; }
   .hero-text-block { max-width: 800px; }
   .huge-title { font-size: 7.5vw; line-height: 0.95; text-transform: uppercase; margin-bottom: 30px; letter-spacing: -3px; }
   .huge-title .block { display: block; }
   .hero-desc { font-size: 1.35rem; color: var(--text-secondary); max-width: 600px; margin-bottom: 40px; font-weight: 400; }
   .hero-actions { display: flex; gap: 20px; }
   .hero-visual { position: relative; width: 200px; height: 200px; }
   .rotating-badge-container { position: relative; width: 100%; height: 100%; }
   .rotating-text { width: 100%; height: 100%; animation: spinSlow 15s linear infinite; fill: var(--text-primary); }
   .center-icon-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
   @keyframes spinSlow { 100% { transform: rotate(360deg); } }
   
   /* Marquee */
   .marquee-wrapper { width: 100%; background: var(--text-primary); color: white; padding: 15px 0; overflow: hidden; position: relative; display: flex; transform: rotate(-1deg) scale(1.05); box-shadow: 0 10px 30px rgba(0,0,0,0.1); z-index: 20; }
   .marquee-content { display: flex; align-items: center; gap: 30px; white-space: nowrap; animation: marqueeScroll 20s linear infinite; font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; letter-spacing: 2px; }
   .marquee-content i { color: var(--brand-pink); }
   @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
   
   /* Sticky Core Section */
   .sticky-sect { padding: 140px 0; background: var(--bg-color); position: relative; z-index: 10; }
   .sticky-container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: flex-start; }
   .sticky-left { position: sticky; top: 150px; }
   .icon-square { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
   .section-title { font-size: 4rem; letter-spacing: -1px; margin-bottom: 24px; }
   .large-text { font-size: 1.4rem; color: var(--text-secondary); margin-bottom: 40px; }
   .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
   .stat-box { background: var(--surface-color); padding: 30px; border-radius: 20px; border: var(--border-glass); }
   .stat-box h4 { font-size: 3.5rem; display: inline-block; color: var(--text-primary); }
   .stat-box .suffix { font-size: 1.5rem; font-weight: bold; color: var(--brand-cyan); }
   .stat-box p { font-family: var(--font-body); font-weight: 600; color: var(--text-secondary); }
   
   .sticky-right { display: flex; flex-direction: column; gap: 40px; }
   .feature-card { perspective: 1000px; }
   .card-glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.8); padding: 50px 40px; border-radius: 24px; box-shadow: var(--shadow-glass), inset 0 0 0 1px rgba(255,255,255,0.5); position: relative; overflow: hidden; transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo); transform-style: preserve-3d; }
   .card-glass:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(255,255,255,0.8); }
   .card-num { position: absolute; top: -10px; right: 20px; font-size: 6rem; font-weight: 900; font-family: var(--font-heading); color: rgba(10, 10, 20, 0.03); z-index: 0; }
   .icon-wrap { width: 70px; height: 70px; background: white; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 24px; position: relative; z-index: 1; }
   .card-glass h3 { font-size: 2rem; margin-bottom: 16px; position: relative; z-index: 1; }
   .card-glass p { color: var(--text-secondary); font-size: 1.1rem; position: relative; z-index: 1; }
   
   /* Matrix Section */
   .matrix-sect { padding: 140px 0; background: var(--surface-color); overflow: hidden; }
   .bg-circuit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke: rgba(10, 10, 20, 0.05); stroke-width: 2; fill: none; z-index: 0; }
   .circuit-path { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: drawPath 10s linear infinite; }
   @keyframes drawPath { 100% { stroke-dashoffset: 0; } }
   
   .stepped-layout { display: flex; flex-direction: column; gap: 40px; position: relative; z-index: 1; }
   .step-card { display: flex; align-items: center; gap: 40px; width: 80%; position: relative; }
   .step-1 { align-self: flex-start; }
   .step-2 { align-self: flex-end; flex-direction: row-reverse; }
   .step-3 { align-self: flex-start; margin-left: 10%; }
   .step-num-large { font-size: 8rem; font-weight: 900; font-family: var(--font-heading); color: transparent; -webkit-text-stroke: 2px rgba(10, 10, 20, 0.05); line-height: 1; }
   .step-content { flex-grow: 1; background: white; }
   .tier-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
   .tier-header h3 { font-size: 2.2rem; }
   .tier-header i { font-size: 2rem; width: 40px; height: 40px;}
   .commission-tag { display: inline-block; padding: 6px 16px; border-radius: 100px; font-weight: bold; font-size: 0.9rem; margin-bottom: 20px; }
   
   .global-pool-banner { position: relative; border-radius: 32px; background: #0a0a14; color: white; padding: 3px; overflow: hidden; z-index: 2; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
   .glow-bg { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, var(--brand-pink), var(--brand-cyan), transparent); animation: spinRotate 4s linear infinite; }
   @keyframes spinRotate { 100% { transform: rotate(360deg); } }
   .banner-inner { background: #0a0a14; border-radius: 30px; padding: 50px; position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
   .banner-text h3 { font-size: 2.5rem; }
   .banner-text p { color: #8a8a9e; font-size: 1.1rem; max-width: 500px; }
   
   .progress-ring-container { position: relative; width: 120px; height: 120px; }
   .radial-progress { width: 100%; height: 100%; transform: rotate(-90deg); }
   .radial-progress circle { fill: none; stroke-width: 8; stroke-linecap: round; }
   .radial-progress .bg { stroke: rgba(255,255,255,0.1); }
   .radial-progress .meter { stroke: var(--brand-cyan); stroke-dasharray: 251.2; stroke-dashoffset: 251.2; transition: stroke-dashoffset 2s var(--ease-out-expo); filter: drop-shadow(0 0 5px var(--brand-cyan)); }
   .ring-text-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
   .lock-icon { color: var(--brand-pink); width: 20px; height: 20px; margin-bottom: 5px; display: block; margin: 0 auto; }
   .ring-text { font-weight: bold; font-size: 1.2rem; }

   /* App Simulator */
   .simulator-sect { padding: 140px 0; background: var(--bg-color); position: relative; z-index: 10; }
   .app-interface { max-width: 900px; margin: 0 auto; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.9); border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(255,255,255,0.5); overflow: hidden; }
   .app-header { background: rgba(10, 10, 20, 0.02); border-bottom: 1px solid rgba(0,0,0,0.04); padding: 16px 24px; display: flex; align-items: center; }
   .mac-dots { display: flex; gap: 8px; margin-right: 20px; }
   .mac-dots span { width: 12px; height: 12px; border-radius: 50%; background: #ff5f56; opacity: 0.8; }
   .mac-dots span:nth-child(2) { background: #ffbd2e; }
   .mac-dots span:nth-child(3) { background: #27c93f; }
   .app-title { color: var(--text-secondary); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.5px; }
   .app-body { padding: 40px; }
   .app-controls { margin-bottom: 40px; background: var(--surface-color); padding: 30px; border-radius: 16px; border: var(--border-glass); }
   .custom-slider { -webkit-appearance: none; width: 100%; height: 8px; border-radius: 4px; background: rgba(0,0,0,0.1); outline: none; margin-top: 20px; }
   .custom-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-cyan); cursor: pointer; box-shadow: var(--shadow-glow-cyan); transition: transform 0.2s; }
   .custom-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
   .app-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
   .result-card { background: var(--bg-color); padding: 25px 20px; border-radius: 12px; border: var(--border-glass); text-align: center; }
   .result-card h5 { margin-bottom: 10px; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1rem;}
   .res-val { font-size: 2.8rem; font-weight: bold; font-family: var(--font-heading); line-height: 1; margin-bottom: 5px;}
   .badge-mini { font-size: 0.75rem; background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 10px; color: var(--text-primary); font-weight: bold;}
   .total-yield-card { grid-column: span 3; background: #0a0a14; padding: 40px; border-radius: 16px; text-align: center; color: white; margin-top: 10px; position: relative; overflow: hidden; }
   .total-yield-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--gradient-primary); }
   .total-yield-card h4 { color: #8a8a9e; font-weight: normal; margin-bottom: 10px; font-size: 1.2rem; }
   .massive-yield { font-size: 5rem; font-weight: 900; line-height: 1; }

   /* Switch Toggle */
   .switch { position: relative; display: inline-block; width: 50px; height: 28px; }
   .switch input { opacity: 0; width: 0; height: 0; }
   .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.1); transition: .4s; border-radius: 34px; }
   .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
   input:checked + .slider { background-color: var(--brand-pink); }
   input:checked + .slider:before { transform: translateX(22px); }

   /* Roadmap Horizontal Scroll - ZigZag Layout */
   .roadmap-sect { padding: 140px 0; background: var(--surface-color); position: relative; overflow: hidden; }
   
   .horizontal-scroll-wrapper { width: 100%; overflow-x: auto; padding: 40px 20px; -ms-overflow-style: none; scrollbar-width: none; cursor: grab; }
   .horizontal-scroll-wrapper::-webkit-scrollbar { display: none; }
   .horizontal-scroll-wrapper:active { cursor: grabbing; }
   
   .horizontal-timeline { display: flex; gap: 40px; min-width: max-content; padding: 0 60px; position: relative; height: 750px; align-items: center; }
   
   /* Central Track */
   .timeline-track { position: absolute; top: 50%; left: 0; right: 0; height: 6px; background: rgba(10, 10, 20, 0.03); z-index: 0; transform: translateY(-50%); border-radius: 10px; }
   .timeline-track::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, var(--brand-pink), var(--brand-cyan), var(--brand-yellow)); opacity: 0.2; border-radius: 10px; }

   .hz-node { width: 380px; position: relative; z-index: 1; flex-shrink: 0; display: flex; flex-direction: column; }
   
   /* Odd Nodes (Top) */
   .hz-node:nth-child(odd) { margin-bottom: 240px; }
   .hz-node:nth-child(odd) .node-marker { bottom: -134px; left: 50%; transform: translateX(-50%); }
   .hz-node:nth-child(odd)::before { content: ''; position: absolute; bottom: -120px; left: 50%; width: 2px; height: 120px; background: linear-gradient(to top, var(--brand-cyan), transparent); transform: translateX(-50%); opacity: 0.4; }

   /* Even Nodes (Bottom) */
   .hz-node:nth-child(even) { margin-top: 240px; }
   .hz-node:nth-child(even) .node-marker { top: -134px; left: 50%; transform: translateX(-50%); }
   .hz-node:nth-child(even)::before { content: ''; position: absolute; top: -120px; left: 50%; width: 2px; height: 120px; background: linear-gradient(to bottom, var(--brand-pink), transparent); transform: translateX(-50%); opacity: 0.4; }

   /* Marker Style */
   .hz-node .node-marker { width: 28px; height: 28px; border-radius: 50%; z-index: 10; position: absolute; transition: all 0.4s var(--ease-out-expo); border: 5px solid var(--surface-color); box-shadow: 0 0 0 1px rgba(0,0,0,0.1); background: white; }
   .hz-node:hover .node-marker { transform: translateX(-50%) scale(1.4); box-shadow: 0 0 30px var(--brand-cyan); border-color: white; }

   /* Card Style */
   .hz-node .node-card { width: 100%; background: var(--bg-color); border: 1px solid rgba(0,0,0,0.04); padding: 40px; border-radius: 24px; transition: all 0.4s var(--ease-out-expo); position: relative; box-shadow: 0 15px 40px rgba(0,0,0,0.04); }
   
   .hz-node:hover .node-card { transform: translateY(-5px) scale(1.02); border-color: rgba(0,0,0,0.08); box-shadow: 0 30px 60px rgba(0,0,0,0.08); z-index: 10; }

   /* Typography updates inside card */
   .hz-node h3 { font-size: 1.6rem; margin-bottom: 12px; color: var(--text-primary); font-family: var(--font-heading); }
   .hz-node p { font-size: 1rem; line-height: 1.6; color: var(--text-secondary); }
   .phase-tag { display: inline-block; padding: 6px 14px; border-radius: 100px; font-size: 0.75rem; font-weight: bold; margin-bottom: 15px; letter-spacing: 1px; text-transform: uppercase; }
   .check-list { list-style: none; display: inline-block; text-align: left; }
   .check-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 500; font-size: 0.95rem; }
   .check-list li.pending { color: var(--text-secondary); opacity: 0.6; }
   
   .pulse-pink { box-shadow: 0 0 0 0 rgba(255, 16, 122, 0.4); animation: pulseMarkerPink 2.5s infinite; background: var(--brand-pink) !important; }
   .pulse-cyan { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); animation: pulseMarkerCyan 2.5s infinite; animation-delay: 0.8s; background: var(--brand-cyan) !important;}
   .pulse-yellow { box-shadow: 0 0 0 0 rgba(255, 234, 0, 0.4); animation: pulseMarkerYellow 2.5s infinite; animation-delay: 1.6s; background: var(--brand-yellow) !important;}
   @keyframes pulseMarkerPink { 70% { box-shadow: 0 0 0 20px rgba(255, 16, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 16, 122, 0); } }
   @keyframes pulseMarkerCyan { 70% { box-shadow: 0 0 0 20px rgba(0, 229, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); } }
   @keyframes pulseMarkerYellow { 70% { box-shadow: 0 0 0 20px rgba(255, 234, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 234, 0, 0); } }
   
   /* Footer Ultra Modern */
   .footer-ultra { background: #0a0a14; color: white; padding: 120px 0 20px; overflow: hidden; position: relative; }
   .footer-massive-cta { margin-bottom: 80px; }
   .footer-massive-cta h2 { font-size: 7rem; line-height: 0.9; margin-bottom: 30px; letter-spacing: -2px; }
   .mega-btn { font-size: 1.2rem; padding: 20px 50px; }
   
   .footer-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 60px; }
   .bento-box { background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 32px; padding: 50px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); transition: transform 0.4s var(--ease-out-expo), border-color 0.4s; }
   .bento-box:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.15); }
   .brand-box { display: flex; flex-direction: column; justify-content: center; }
   .footer-logo { height: 45px; object-fit: contain; align-self: flex-start; filter: invert(1) brightness(2); }
   .brand-box .desc { color: #8a8a9e; font-size: 1.2rem; max-width: 400px; }
   .links-box h4 { color: white; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 30px; font-size: 1.2rem; }
   .link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
   .link-grid a { color: #8a8a9e; font-size: 1.1rem; }
   .link-grid a:hover { color: white; }
   
   .social-btn { display: inline-flex; width: 45px; height: 45px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; align-items: center; justify-content: center; margin-right: 15px; transition: all 0.3s; color: white; }
   .social-btn:hover { background: var(--brand-pink); border-color: var(--brand-pink); transform: translateY(-5px); box-shadow: var(--shadow-glow-pink); color: white; }
   
   .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; color: #6a6a8e; font-size: 0.95rem; }
   .filter-invert { filter: brightness(0) invert(1); }
   
   /* CORE ANIMATIONS CLASSES */
   .reveal-text { display: inline-block; overflow: hidden; vertical-align: top; }
   .reveal-text .block { display: block; transform: translateY(100%); transition: transform 1s var(--ease-out-expo); }
   .reveal-text.active .block, body:not(.loading) .reveal-text .block { transform: translateY(0); }
   
   .reveal-clip { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: clip-path 1.2s var(--ease-out-expo); }
   .reveal-clip.active, body:not(.loading) .reveal-clip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
   
   .reveal-up { opacity: 0; transform: translateY(40px); transition: all 1s var(--ease-out-expo); }
   .reveal-up.active, body:not(.loading) .reveal-up { opacity: 1; transform: translateY(0); }
   
   .reveal-down { opacity: 0; transform: translateY(-40px); transition: all 1s var(--ease-out-expo); }
   .reveal-down.active, body:not(.loading) .reveal-down { opacity: 1; transform: translateY(0); }
   
   .reveal-scale { opacity: 0; transform: scale(0.8); transition: all 1.2s var(--ease-bounce); }
   .reveal-scale.active, body:not(.loading) .reveal-scale { opacity: 1; transform: scale(1); }
   
   .scroll-reveal-left { opacity: 0; transform: translateX(-100px); transition: all 1s var(--ease-out-expo); }
   .scroll-reveal-left.active { opacity: 1; transform: translateX(0); }
   
   .scroll-reveal-right { opacity: 0; transform: translateX(100px); transition: all 1s var(--ease-out-expo); }
   .scroll-reveal-right.active { opacity: 1; transform: translateX(0); }
   
   .scroll-reveal-up { opacity: 0; transform: translateY(100px); transition: all 1s var(--ease-out-expo); }
   .scroll-reveal-up.active { opacity: 1; transform: translateY(0); }
   
   .spin-slow { animation: spin 8s linear infinite; }
   .spin-fast { animation: spin 2s linear infinite; }
   @keyframes spin { 100% { transform: rotate(360deg); } }
   
   .float-y { animation: floatY 4s ease-in-out infinite alternate; }
   @keyframes floatY { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
   
   .delay-1 { transition-delay: 0.1s; animation-delay: 0.1s; }
   .delay-2 { transition-delay: 0.2s; animation-delay: 0.2s; }
   .delay-3 { transition-delay: 0.3s; animation-delay: 0.3s; }
   .delay-4 { transition-delay: 0.4s; animation-delay: 0.4s; }
   .delay-5 { transition-delay: 0.5s; animation-delay: 0.5s; }
   .delay-6 { transition-delay: 0.6s; animation-delay: 0.6s; }
   
   /* AI Chat Section */
   .chat-sect { padding: 80px 0 120px; position: relative; z-index: 10; display: flex; justify-content: center; }
   .chat-container { width: 100%; max-width: 600px; margin: 0 auto; }
   
   /* AI Chat Window */
   .ai-chat-window { width: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(0,0,0,0.06); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,0.1); overflow: hidden; transform-style: preserve-3d; }
   .chat-header { background: #f8f9fc; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,0.04); }
   .chat-dots { display: flex; gap: 6px; }
   .chat-dots span { width: 10px; height: 10px; border-radius: 50%; background: #ddd; }
   .chat-dots span:nth-child(1) { background: #ff5f56; }
   .chat-dots span:nth-child(2) { background: #ffbd2e; }
   .chat-dots span:nth-child(3) { background: #27c93f; }
   .chat-status { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
   .status-dot { width: 6px; height: 6px; background: var(--brand-cyan); border-radius: 50%; display: inline-block; }
   .status-dot.pulse { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7); animation: pulseStatus 2s infinite; }
   @keyframes pulseStatus { 70% { box-shadow: 0 0 0 5px rgba(0, 229, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); } }
   
   .chat-body { padding: 20px; display: flex; flex-direction: column; gap: 15px; height: 350px; overflow-y: auto; scroll-behavior: smooth; }
   .chat-msg { display: flex; align-items: flex-start; gap: 10px; max-width: 90%; animation: msgSlideUp 0.3s ease-out forwards; opacity: 0; transform: translateY(10px); }
   @keyframes msgSlideUp { to { opacity: 1; transform: translateY(0); } }
   
   .chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
   .msg-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-color); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); border: 1px solid rgba(0,0,0,0.05); flex-shrink: 0; }
   .chat-msg.ai .msg-avatar { background: rgba(0, 229, 255, 0.1); color: var(--brand-cyan); }
   .msg-bubble { padding: 10px 16px; border-radius: 12px; font-size: 0.9rem; line-height: 1.5; }
   .chat-msg.ai .msg-bubble { background: var(--surface-color); color: var(--text-primary); border-top-left-radius: 2px; }
   .chat-msg.user .msg-bubble { background: var(--text-primary); color: white; border-top-right-radius: 2px; }
   
   .chat-input-bar { padding: 15px 20px; border-top: 1px solid rgba(0,0,0,0.04); background: white; min-height: 60px; display: flex; flex-direction: column; justify-content: center; }
   .typing-indicator { margin-bottom: 10px; padding-left: 10px; }
   .typing-indicator span { display: inline-block; width: 6px; height: 6px; background: #ccc; border-radius: 50%; animation: typing 1.4s infinite ease-in-out both; margin-right: 3px; }
   .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
   .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
   .typing-indicator.hidden { display: none; }
   @keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

   .quick-actions { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; -ms-overflow-style: none; scrollbar-width: none; }
   .quick-actions::-webkit-scrollbar { display: none; }
   .action-chip { background: rgba(10,10,20,0.03); border: 1px solid rgba(0,0,0,0.08); padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); transition: all 0.2s; white-space: nowrap; font-family: var(--font-body); }
   .action-chip:hover { background: var(--text-primary); color: white; transform: translateY(-2px); border-color: var(--text-primary); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
   
   /* Matrix Table */
   .matrix-detailed-breakdown { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; }
   .glass-table-wrap { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(0,0,0,0.06); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.06); }
   .table-header { padding: 25px 30px; background: rgba(10,10,20,0.02); border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; }
   .table-header h3 { font-size: 1.2rem; margin: 0; color: var(--text-primary); font-family: var(--font-heading); font-weight: 700; display: flex; align-items: center; }
   .live-indicator { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--brand-pink); text-transform: uppercase; letter-spacing: 0.5px; }
   
   .table-responsive { overflow-x: auto; }
   .yield-table { width: 100%; border-collapse: collapse; min-width: 600px; }
   .yield-table th { text-align: left; padding: 20px 30px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); font-weight: 600; border-bottom: 1px solid rgba(0,0,0,0.05); }
   .yield-table td { padding: 25px 30px; border-bottom: 1px solid rgba(0,0,0,0.03); font-size: 1rem; color: var(--text-primary); transition: background 0.2s; }
   .yield-table tr:last-child td { border-bottom: none; }
   .yield-table tbody tr:hover td { background: rgba(0, 229, 255, 0.03); }
   
   .tier-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; margin-right: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
   .tier-badge.cyan { background: rgba(0, 229, 255, 0.1); color: var(--brand-cyan); border: 1px solid rgba(0, 229, 255, 0.2); }
   .tier-badge.pink { background: rgba(255, 16, 122, 0.1); color: var(--brand-pink); border: 1px solid rgba(255, 16, 122, 0.2); }
   .tier-badge.yellow { background: rgba(255, 234, 0, 0.1); color: #d4c000; border: 1px solid rgba(255, 234, 0, 0.2); }
   .tier-badge.purple { background: rgba(157, 0, 255, 0.1); color: #9d00ff; border: 1px solid rgba(157, 0, 255, 0.2); }
   .tier-badge.indigo { background: rgba(75, 0, 130, 0.1); color: #4b0082; border: 1px solid rgba(75, 0, 130, 0.2); }
   .tier-badge.gray { background: rgba(100, 100, 100, 0.1); color: #666; border: 1px solid rgba(100, 100, 100, 0.2); }

   .purple-text { color: #9d00ff; }
   .indigo-text { color: #4b0082; }
   .gray-text { color: #666; }
   
   .total-row td { background: #0a0a14; color: white; padding: 30px; font-family: var(--font-heading); letter-spacing: 0.5px; border-top: 1px solid rgba(255,255,255,0.1); }
   .total-row:hover td { background: #0a0a14 !important; }
   .total-val { font-size: 2rem; font-weight: 800; text-align: right; }
   .text-right { text-align: right; font-size: 1.1rem; font-weight: 600; color: #8a8a9e; }
   
   /* Responsive Tweaks */
   @media (max-width: 1024px) {
       .huge-title { font-size: 9vw; }
       .sticky-container { grid-template-columns: 1fr; }
       .sticky-left { position: relative; top: 0; margin-bottom: 40px; }
       .step-card { width: 100%; flex-direction: column !important; text-align: center; gap: 20px; }
       .step-3 { margin-left: 0; }
       .banner-inner { flex-direction: column; text-align: center; gap: 30px; }
       .footer-massive-cta h2 { font-size: 5rem; }
       .footer-bento { grid-template-columns: 1fr; }
       .app-results { grid-template-columns: 1fr; }
       .total-yield-card { grid-column: span 1; }
   }
   
   /* Whitepaper Layout */
   .whitepaper-mode { background: #f8f9fc; }
   .wp-container { display: grid; grid-template-columns: 300px 1fr; min-height: 100vh; padding-top: 100px; max-width: 1400px; margin: 0 auto; gap: 60px; }
   
   /* Sidebar */
   .wp-sidebar { position: sticky; top: 120px; height: calc(100vh - 140px); background: white; border-radius: 20px; border: 1px solid rgba(0,0,0,0.06); padding: 30px; display: flex; flex-direction: column; box-shadow: var(--shadow-glass); }
   .sidebar-header { display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text-primary); margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.05); }
   
   .wp-nav { list-style: none; flex-grow: 1; }
   .wp-nav li { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; opacity: 0.5; transition: all 0.3s; position: relative; }
   .wp-nav li:hover, .wp-nav li.active { opacity: 1; }
   .wp-nav li .line { width: 2px; height: 100%; background: var(--brand-pink); position: absolute; left: -30px; opacity: 0; transition: 0.3s; }
   .wp-nav li.active .line { opacity: 1; height: 20px; }
   .wp-nav li .code { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text-secondary); }
   .wp-nav li .label { font-weight: 600; font-size: 0.95rem; }
   
   .sidebar-footer { margin-top: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 20px; }
   .status-row { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--text-secondary); }
   
   /* Content Area */
   .wp-content { padding-bottom: 100px; padding-right: 40px; }
   .wp-section { margin-bottom: 150px; opacity: 0.3; transition: opacity 0.5s; filter: blur(2px); }
   .wp-section.active { opacity: 1; filter: blur(0); }
   
   .section-header { margin-bottom: 40px; border-bottom: 2px solid var(--text-primary); padding-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; }
   .section-header h1 { font-size: 3rem; line-height: 1; letter-spacing: -1px; margin: 0; }
   .hash-id { font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); font-size: 0.9rem; }
   
   .doc-card { background: white; padding: 40px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.03); margin-bottom: 30px; position: relative; overflow: hidden; }
   .lead-text { font-size: 1.4rem; line-height: 1.5; color: var(--text-primary); font-weight: 500; margin-bottom: 20px; }
   .highlight { color: var(--brand-cyan); font-weight: 700; }
   
   /* Code Block */
   .code-block { background: #0a0a14; border-radius: 12px; padding: 20px; color: #a0a0b0; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; position: relative; border: 1px solid rgba(255,255,255,0.1); }
   .code-header { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); }
   .dot { width: 10px; height: 10px; border-radius: 50%; }
   .dot.red { background: #ff5f56; }
   .dot.yellow { background: #ffbd2e; }
   .dot.green { background: #27c93f; }
   .filename { margin-left: 10px; font-size: 0.8rem; opacity: 0.7; }
   
   /* Visuals */
   .grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
   .architecture-visual { height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
   .layer { width: 80%; height: 60px; background: white; border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,0.05); z-index: 2; position: relative; }
   .layer-1 { background: #0a0a14; color: white; width: 90%; transform: perspective(1000px) rotateX(20deg) translateY(20px); z-index: 1; }
   .layer-2 { background: var(--surface-color); width: 85%; transform: perspective(1000px) rotateX(20deg); border: 1px solid var(--brand-pink); color: var(--brand-pink); }
   .layer-3 { background: white; width: 80%; transform: perspective(1000px) rotateX(20deg) translateY(-20px); border: 1px solid var(--brand-cyan); color: var(--brand-cyan); z-index: 3; }
   .connector { height: 20px; width: 2px; background: #ccc; }
   
   /* Tokenomics Reactor */
   .tokenomics-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
   .data-list { list-style: none; }
   .data-list li { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-weight: 600; }
   .data-list .mono { font-family: 'JetBrains Mono', monospace; color: var(--brand-pink); }
   
   .reactor-container { position: relative; width: 300px; height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
   .reactor-core { position: relative; width: 100px; height: 100px; background: var(--text-primary); border-radius: 50%; box-shadow: 0 0 50px rgba(0, 229, 255, 0.3); z-index: 10; }
   .core-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; background: radial-gradient(circle, white, var(--brand-cyan)); border-radius: 50%; animation: pulseReactor 2s infinite; }
   @keyframes pulseReactor { 0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.4; } }
   
   .core-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(0,0,0,0.2); }
   .ring-1 { width: 160px; height: 160px; animation: spin 10s linear infinite; border-color: var(--brand-pink); }
   .ring-2 { width: 220px; height: 220px; animation: spin 15s linear infinite reverse; border-color: var(--brand-cyan); }
   .ring-3 { width: 280px; height: 280px; animation: spin 20s linear infinite; border-color: var(--brand-yellow); }
   
   .reactor-labels { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
   .r-label { position: absolute; font-size: 0.75rem; font-weight: 700; background: white; padding: 4px 10px; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); white-space: nowrap; }
   .l-1 { top: 10%; left: 50%; transform: translateX(-50%); }
   .l-2 { top: 50%; right: -20px; }
   .l-3 { bottom: 10%; left: 50%; transform: translateX(-50%); }
   .l-4 { top: 50%; left: -20px; }
   
   /* Governance */
   .glass-warning { background: rgba(255, 16, 122, 0.05); border: 1px solid rgba(255, 16, 122, 0.2); }
   .warning-header { display: flex; align-items: center; gap: 10px; color: var(--brand-pink); font-weight: 700; margin-bottom: 15px; }
   .redacted-text { background: #000; color: #000; cursor: help; transition: all 0.3s; padding: 2px 5px; border-radius: 4px; }
   .redacted-text:hover { background: transparent; color: var(--text-primary); }
   
   .governance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
   .gov-step { background: white; padding: 30px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.05); text-align: center; }
   .step-num { font-family: 'JetBrains Mono', monospace; font-size: 2rem; color: rgba(0,0,0,0.05); font-weight: 700; margin-bottom: 10px; }
   
   .wp-footer { text-align: center; padding-top: 60px; border-top: 1px solid rgba(0,0,0,0.05); margin-top: 60px; font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); }
   .back-top { display: inline-block; margin-top: 20px; color: var(--brand-pink); font-weight: 700; }

   /* ── Allocation Donut Chart ── */
   .allocation-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-top: 40px; }
   .donut-chart-box { position: relative; display: flex; align-items: center; justify-content: center; }
   .donut-chart-box svg { filter: drop-shadow(0 10px 30px rgba(0,0,0,0.08)); }
   .donut-center-label { position: absolute; text-align: center; pointer-events: none; }
   .donut-center-label .dnum { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
   .donut-center-label .dtxt { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-secondary); margin-top: 4px; letter-spacing: 1px; }
   .alloc-legend { list-style: none; display: flex; flex-direction: column; gap: 16px; }
   .alloc-legend li { display: flex; align-items: center; gap: 14px; }
   .legend-dot { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
   .legend-info { flex: 1; display: flex; justify-content: space-between; align-items: center; }
   .legend-name { font-weight: 600; font-size: 0.95rem; }
   .legend-pct { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; color: var(--text-secondary); background: var(--surface-color); padding: 3px 10px; border-radius: 6px; }
   .legend-bar-wrap { width: 100%; height: 4px; background: rgba(0,0,0,0.05); border-radius: 4px; margin-top: 4px; overflow: hidden; }
   .legend-bar { height: 100%; border-radius: 4px; transition: width 1s var(--ease-out-expo); }

   /* ── Stats Row ── */
   .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
   .stat-card { background: white; padding: 28px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.03); }
   .stat-value { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 800; line-height: 1; }
   .stat-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

   /* ── Roadmap Timeline ── */
   .roadmap-timeline { position: relative; padding-left: 30px; }
   .roadmap-timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--brand-pink), var(--brand-cyan)); border-radius: 2px; }
   .timeline-item { position: relative; margin-bottom: 50px; padding-left: 40px; }
   .timeline-item::before { content: ''; position: absolute; left: -34px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: white; border: 3px solid var(--brand-pink); box-shadow: 0 0 0 4px rgba(255,16,122,0.1); z-index: 2; }
   .timeline-item.done::before { background: var(--brand-pink); }
   .timeline-item.active-phase::before { background: var(--brand-cyan); border-color: var(--brand-cyan); box-shadow: 0 0 0 4px rgba(0,229,255,0.15), 0 0 12px rgba(0,229,255,0.4); animation: pulseDot 2s infinite; }
   @keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 4px rgba(0,229,255,0.15), 0 0 12px rgba(0,229,255,0.4); } 50% { box-shadow: 0 0 0 8px rgba(0,229,255,0.05), 0 0 20px rgba(0,229,255,0.6); } }
   .timeline-phase { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 700; color: var(--brand-pink); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
   .timeline-item.active-phase .timeline-phase { color: var(--brand-cyan); }
   .timeline-title { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
   .timeline-desc { color: var(--text-secondary); line-height: 1.7; }
   .timeline-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
   .t-tag { font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; background: var(--surface-color); color: var(--text-secondary); border: 1px solid rgba(0,0,0,0.06); }
   .t-tag.done-tag { background: rgba(39,201,63,0.08); color: #27c93f; border-color: rgba(39,201,63,0.2); }
   .t-tag.live-tag { background: rgba(0,229,255,0.08); color: var(--brand-cyan); border-color: rgba(0,229,255,0.2); }

   /* ── Security Section ── */
   .security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
   .sec-card { background: white; border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); padding: 30px; box-shadow: 0 8px 24px rgba(0,0,0,0.03); }
   .sec-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
   .sec-card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
   .sec-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; }
   .audit-table { width: 100%; margin-top: 30px; }
   .audit-table tr { display: flex; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,0.04); gap: 20px; }
   .audit-table tr:last-child { border-bottom: none; }
   .audit-firm { font-weight: 700; min-width: 160px; }
   .audit-scope { flex: 1; color: var(--text-secondary); font-size: 0.9rem; }
   .audit-status { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: 6px; white-space: nowrap; }
   .audit-status.passed { background: rgba(39,201,63,0.1); color: #27c93f; }
   .audit-status.pending-audit { background: rgba(255,234,0,0.1); color: #b8a800; }

   /* ── Ecosystem Section ── */
   .ecosystem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
   .eco-card { background: white; border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); padding: 28px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.03); transition: transform 0.3s, box-shadow 0.3s; }
   .eco-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
   .eco-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.5rem; }
   .eco-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
   .eco-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
   .eco-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 10px; margin-top: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
   
   /* ── Info Callout ── */
   .callout { display: flex; gap: 16px; padding: 24px; border-radius: 16px; margin-top: 30px; }
   .callout.cyan { background: rgba(0,229,255,0.05); border: 1px solid rgba(0,229,255,0.2); }
   .callout.pink { background: rgba(255,16,122,0.05); border: 1px solid rgba(255,16,122,0.2); }
   .callout.yellow { background: rgba(255,234,0,0.07); border: 1px solid rgba(255,234,0,0.3); }
   .callout-icon { flex-shrink: 0; margin-top: 2px; }
   .callout-body strong { display: block; font-weight: 700; margin-bottom: 6px; }
   .callout-body p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; margin: 0; }

   /* ── Comparison Table ── */
   .compare-table { width: 100%; border-collapse: collapse; margin-top: 30px; }
   .compare-table th { text-align: left; padding: 14px 20px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); font-weight: 600; border-bottom: 2px solid var(--text-primary); }
   .compare-table td { padding: 18px 20px; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 0.95rem; vertical-align: top; }
   .compare-table tr:last-child td { border-bottom: none; }
   .compare-table tbody tr:hover td { background: rgba(0,229,255,0.02); }
   .compare-table .highlight-row td { background: rgba(255,16,122,0.03); font-weight: 600; }
   .check { color: #27c93f; font-weight: 700; }
   .cross { color: #ff5f56; font-weight: 700; }

   /* ── Vesting Schedule ── */
   .vesting-bars { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
   .vesting-row { display: grid; grid-template-columns: 160px 1fr 80px; gap: 20px; align-items: center; }
   .vesting-name { font-weight: 600; font-size: 0.9rem; }
   .vesting-track { height: 10px; background: rgba(0,0,0,0.05); border-radius: 10px; overflow: hidden; position: relative; }
   .vesting-fill { height: 100%; border-radius: 10px; position: relative; }
   .vesting-pct { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--text-secondary); text-align: right; }

   .mt-40 { margin-top: 40px; }

   @media (max-width: 1024px) {
       .wp-container { grid-template-columns: 1fr; padding-top: 120px; }
       .wp-sidebar { display: none; }
       .wp-content { padding-right: 0; }
       .tokenomics-layout { grid-template-columns: 1fr; }
       .governance-grid { grid-template-columns: 1fr; }
       .allocation-wrap { grid-template-columns: 1fr; }
       .stats-row { grid-template-columns: repeat(2, 1fr); }
       .security-grid { grid-template-columns: 1fr; }
       .ecosystem-grid { grid-template-columns: 1fr 1fr; }
       .vesting-row { grid-template-columns: 120px 1fr 60px; }
   }
   @media (max-width: 600px) {
       .stats-row { grid-template-columns: 1fr 1fr; }
       .ecosystem-grid { grid-template-columns: 1fr; }
       .grid-2-col { grid-template-columns: 1fr; }
   }