:root {
	--bg-base: #0a0a0f;
	--bg-glass: rgba(15, 15, 22, 0.7);
	--green: #e63946;
	--dim-green: #2d1518;
	--border-green: rgba(230, 57, 70, 0.15);
	--text-main: #f0f0f5;
	--text-muted: #8b8d95;
	--glow: rgba(230, 57, 70, 0.6);
	--glow-dim: rgba(230, 57, 70, 0.15);
	--silver: #c0c0c0;
	--silver-bright: #e8e8e8;
	--font-body: 'Space Grotesk', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Space Grotesk', sans-serif; -webkit-tap-highlight-color: transparent !important; }
html { scroll-behavior: smooth; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: rgba(230, 57, 70, 0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(230, 57, 70, 0.5); box-shadow: 0 0 10px var(--glow); }
::selection { background: rgba(230, 57, 70, 0.3); color: #fff; text-shadow: 0 0 8px var(--glow); }
.scroll-progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--green); z-index: 10000; box-shadow: 0 0 15px var(--glow); transition: width 0.1s; width: 0%; pointer-events: none; }

body {
	font-family: var(--font-body);
	background-color: var(--bg-base);
	color: var(--text-main);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	position: relative;
}

/* Fluid Orbs Layer */
body::before, body::after {
	content: ""; position: fixed; border-radius: 50%;
	filter: blur(120px); pointer-events: none; z-index: 0;
	opacity: 0.4; will-change: transform;
}
body::before { 
    top: -10%; left: -10%; width: 50vw; height: 50vw; 
    background: radial-gradient(circle, var(--glow-dim) 0%, transparent 60%); 
    transform: translate3d(calc(var(--scroll, 0px) * 0.1), calc(var(--scroll, 0px) * 0.35), 0);
}
body::after { 
    bottom: -20%; right: -10%; width: 60vw; height: 60vw; 
    background: radial-gradient(circle, rgba(0,180,255,0.05) 0%, transparent 60%); 
    transform: translate3d(calc(var(--scroll, 0px) * -0.05), calc(var(--scroll, 0px) * -0.2), 0);
}

.container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
section { padding: 100px 0; border-top: 1px solid rgba(255,255,255,0.02); }
.section-title { text-align: center; margin-bottom: 60px; }

a { color: var(--green); text-decoration: none; transition: 0.3s; }
a:hover { color: #fff; text-shadow: 0 0 10px var(--glow); }
h1, h2, h3 { font-weight: 700; letter-spacing: 1px; color: #fff; text-shadow: 0 4px 30px rgba(230, 57, 70, 0.1); }
.hl { color: var(--green); text-shadow: 0 0 8px var(--glow-dim); }

/* Glass Navbar */
.navbar {
	position: fixed; top: 0; left: 0; width: 100%;
	background: rgba(2, 5, 2, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(255,255,255,0.04);
	z-index: 1000; padding: 0 30px;
	display: flex; align-items: center; justify-content: center; height: 72px;
}
.nav-brand {
	position: absolute; left: 30px;
	font-weight: 800; font-size: 1.5rem; letter-spacing: 0px;
	background: linear-gradient(to right, #ffffff 20%, #c0c0c0 40%, var(--green) 60%, #ffffff 80%);
	background-size: 200% auto;
	-webkit-background-clip: text; -webkit-text-fill-color: transparent;
	background-clip: text; color: transparent;
	animation: shineBrandHero 8s linear infinite;
	flex-shrink: 0;
}
.nav-links { display: flex; justify-content: center; align-items: center; gap: clamp(10px, 1.5vw, 25px); list-style: none; }
.nav-links a { cursor: pointer; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0px; white-space: nowrap; display: flex; align-items: center; }
.nav-links a:hover { color: var(--green); }
.nav-toggle { display: none; background: none; border: none; color: var(--green); font-size: 1.4rem; cursor: pointer; flex-shrink: 0; }

/* Dropdown styling (Fixed & Glassmorphism Enhanced) */
.nav-dropdown { position: relative; cursor: pointer; }
.nav-dropdown > a::after { content: "\25BE"; margin-left: 6px; font-size: 0.75rem; opacity: 0.7; }

/* Animated dropdown - use visibility for transitions */
.nav-dropdown-menu {
	visibility: hidden; opacity: 0; position: absolute; top: 100%; left: -10px;
	background: rgba(10, 15, 12, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px;
	min-width: 200px; padding: 12px 0; z-index: 1001; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
	transform: translateY(10px); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none; /* Ignore clicks when hidden */
}

/* Show menu smoothly on hover for PC, explicitly open via JS class */
@media (min-width: 1025px) {
    .nav-dropdown:hover .nav-dropdown-menu {
        visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; 
    }
}
.nav-dropdown.open > .nav-dropdown-menu { 
	visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; 
}

.nav-dropdown-menu a { 
    display: block; padding: 12px 24px; color: var(--text-main); font-size: 0.9rem; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden;
    font-weight: 600;
}
@media (pointer: fine) {
    .nav-dropdown-menu a::before {
        content: '\2192'; position: absolute; left: 8px; opacity: 0; transform: translateX(-10px); 
        color: var(--green); transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-dropdown-menu a:hover { color: var(--green); background: rgba(230, 57, 70,0.08); padding-left: 32px; }
    .nav-dropdown-menu a:hover::before { opacity: 1; transform: translateX(0); }
}

/* Hero Splitting */
.hero {
	padding: 200px 40px 120px; max-width: 1400px; margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1;
	overflow: visible;
}
.logo-float-layer {
	width: 180%; max-width: none; margin: 0; display: block;
	animation: floatLogo 6s ease-in-out infinite;
    position: relative;
    transform-origin: center center;
    margin-right: -20%;
}
/* Zero-cost Performance Fake Glow Orb */
.logo-float-layer::before {
    content: ""; position: absolute;
    top: 50%; left: 50%; width: 120%; height: 120%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(230, 57, 70, 0.2) 0%, rgba(230, 57, 70, 0.06) 40%, transparent 70%);
    border-radius: 50%; pointer-events: none; z-index: -1;
}
.logo-glow {
	width: 100%; height: auto; display: block;
    position: relative; z-index: 2;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
    object-fit: cover;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 25%, transparent 68%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 25%, transparent 68%);
}
@keyframes floatLogo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

@media(min-width: 1025px) {
	.hero-left { transform: translateY(0); }
}
.hero-right { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: visible; }
@keyframes shineBrandHero { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
.hero h1 {
	font-size: clamp(2.4rem, 4vw, 4rem); line-height: 1.1; margin-bottom: 24px;
	background: linear-gradient(to right, #ffffff 20%, #c0c0c0 40%, var(--green) 60%, #ffffff 80%);
	background-size: 200% auto;
	-webkit-background-clip: text; -webkit-text-fill-color: transparent;
	background-clip: text; color: transparent;
	animation: shineBrandHero 8s linear infinite;
	font-weight: 800; letter-spacing: -2px;
	filter: drop-shadow(0 15px 40px rgba(230, 57, 70, 0.35));
}
.hero-subtitle { color: var(--text-muted); font-size: 1.25rem; margin-bottom: 50px; line-height: 1.6; }

/* Live Log Glass Box */
.live-log-container {
	background: linear-gradient(135deg, rgba(5,10,8,0.9), rgba(0,0,8,0.95)); border: 1px solid rgba(230, 57, 70,0.15);
	backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 16px; height: 400px; overflow: hidden;
	padding: 48px 24px 34px; box-shadow: inset 0 2px 20px rgba(230, 57, 70,0.03), 0 15px 40px rgba(0,0,0,0.6); position: relative;
	text-align: left; transition: border-color 0.2s, box-shadow 0.2s;
}
.live-log-container.jackpot-pulse {
    border-color: #fcd34d;
    box-shadow: inset 0 0 30px rgba(252,211,77,0.1), 0 0 50px rgba(252,211,77,0.3);
}
.live-log-container::before {
	content: "YUNCORE.NODE.TERMINAL // LOCAL_INFERENCE_V1.0"; position: absolute; top: 0; left: 0; right: 0; box-sizing: border-box;
	background: rgba(0,0,0,0.95); color: rgba(230, 57, 70,0.6); font-family: var(--font-mono); font-size: 0.7rem; padding: 12px 24px; border-bottom: 1px solid rgba(230, 57, 70,0.15); text-align: right; z-index: 2; letter-spacing: 1px;
}
/* Removed absolute cursor logic. Now safely appending trailing cursor purely within the terminal flux. */
.log-stream::after {
	content: "_"; display: block; margin-top: 2px;
	color: var(--green); font-family: var(--font-mono); font-weight: bold; 
	animation: blinkCursor 1s step-end infinite; text-shadow: 0 0 10px var(--glow);
}
@keyframes blinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Traffic Lights for Mac-style window */
.log-traffic-lights {
    position: absolute; top: 12px; left: 24px; display: flex; gap: 8px; z-index: 3;
}
.log-traffic-lights span { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.log-traffic-lights .red { background: #ff5f56; box-shadow: 0 0 8px rgba(255,95,86,0.4); }
.log-traffic-lights .yellow { background: #ffbd2e; box-shadow: 0 0 8px rgba(255,189,46,0.4); }
.log-traffic-lights .green { background: #27c93f; box-shadow: 0 0 8px rgba(39,201,63,0.4); }

.log-stream { font-family: var(--font-mono); font-size: 0.82rem; color: #788c80; display: flex; flex-direction: column; gap: 6px; }
.log-line { animation: slideInX 0.3s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes slideInX { from { opacity: 0; transform: translateX(-15px); } to { opacity: 1; transform: translateX(0); } }

/* Live Log Syntax Highlighting */
.log-time { color: #555560; }
.log-hard { font-weight: 700; letter-spacing: 0.5px; }
.log-CPU { color: #c0c0c0; text-shadow: 0 0 8px rgba(192,192,192,0.4); }
.log-GPU { color: #e63946; text-shadow: 0 0 10px rgba(230,57,70,0.5); }
.log-sys { color: #ffbd2e; }
.log-net { color: #a8b4c0; }
.log-sys-msg { color: #8b8d95; }
.log-net-msg { color: #fff; }
.log-hash { color: #e0e0e5; }
.log-block { color: #fff; font-weight: bold; }
.log-line .jackpot { color: #000; background: #fcd34d; padding: 1px 6px; border-radius: 4px; box-shadow: 0 0 15px rgba(252,211,77,0.5); font-weight: 800; animation: pulseJackpot 1s infinite; display: inline-block; margin-left: 6px; font-size: 0.75rem; letter-spacing: 0.5px;}
@keyframes pulseJackpot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); box-shadow: 0 0 25px rgba(252,211,77,0.8); } }
.log-line .highlight { color: var(--green); font-weight: 700; text-shadow: 0 0 8px rgba(230, 57, 70,0.3); }

/* Buttons */
.hero-buttons { display: flex; gap: 20px; }
.btn-primary, .btn-outline {
	padding: 16px 32px; border-radius: 12px; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: 0.3s;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.5px;
}
.btn-primary { background: var(--green); color: #000; border: none; box-shadow: 0 8px 24px rgba(230, 57, 70,0.2); }
.btn-primary:hover { background: #fff; color: #000 !important; text-shadow: none !important; box-shadow: 0 12px 32px rgba(255,255,255,0.3); transform: translateY(-3px); }
.btn-outline { background: rgba(230, 57, 70,0.05); color: var(--green); border: 1px solid var(--border-green); }
.btn-outline:hover { background: rgba(230, 57, 70,0.1); border-color: var(--green); color: #fff !important; text-shadow: 0 0 10px var(--glow) !important; box-shadow: 0 8px 24px rgba(230, 57, 70,0.1); transform: translateY(-3px); }

/* Trade Card Hover Widget */
.trade-wrapper { margin-top: 30px; }
.inst-trade-card {
	background: var(--bg-glass); border: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(20px);
	border-radius: 20px; padding: 24px 30px; position: relative; overflow: hidden;
}
.inst-card-header { display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; }
.inst-status { display: flex; align-items: center; gap: 8px; color: var(--green); font-weight: 600; }
.inst-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 10px var(--glow); animation: pulse 2s infinite; }
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

.inst-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }
.inst-pair { font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 8px; }
.inst-pair span { color: var(--text-muted); font-size: 1.5rem; font-weight: 500; }
.inst-tags { display: flex; gap: 8px; margin-top: 10px; }
.inst-tag { font-size: 0.7rem; color: var(--text-muted); padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,0.05); letter-spacing: 1px; }
.inst-col-data { border-left: 1px dashed rgba(255,255,255,0.05); padding-left: 30px; }
.inst-data-row { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 8px; font-size: 0.85rem; }
.inst-data-label { color: var(--text-muted); }
.inst-data-value { color: var(--green); font-family: var(--font-mono); }
.inst-col-action { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.inst-exchange { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; }
.inst-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: #000 !important; border: none; padding: 14px 28px; border-radius: 12px; font-weight: 700; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 20px rgba(230, 57, 70,0.2); }
.inst-btn:hover { background: #fff; color: #000 !important; text-shadow: none !important; box-shadow: 0 8px 30px rgba(255,255,255,0.3); transform: translateY(-3px); }

/* Sections */
section { padding: 40px 20px; max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
.section-title { margin-bottom: 40px; text-align: center; }
.section-title h2 { font-size: 2.5rem; background: linear-gradient(90deg, #fff, var(--text-muted)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }

/* Readme Block (Retro CRT) */
.terminal-card { margin: 0 auto; max-width: 1000px; padding: 70px 50px 50px; background: rgba(5, 10, 8, 0.7); border: 1px solid rgba(230, 57, 70,0.1); border-radius: 24px; text-align: left; position: relative; overflow: hidden; box-shadow: inset 0 0 40px rgba(230, 57, 70,0.03), 0 20px 40px rgba(0,0,0,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
/* CRT Scanlines */
.terminal-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 4px, 3px 100%; z-index: 0; pointer-events: none; opacity: 0.6; mix-blend-mode: overlay; pointer-events: none; }
/* Core Watermark */
.terminal-card::before { content: "SYS_CORE_ACTIVE // \A P2P_UPLINK_READY \A\A { LPEPE_NODE }"; white-space: pre; position: absolute; right: 30px; bottom: 30px; font-family: var(--font-mono); font-size: 4.5rem; color: rgba(230, 57, 70,0.02); line-height: 0.9; font-weight: 800; text-align: right; z-index: 0; pointer-events: none; letter-spacing: -2px; }

.terminal-header { position: absolute; top: 0; left: 0; width: 100%; display: flex; align-items: center; gap: 8px; background: rgba(230, 57, 70, 0.05); border-bottom: 1px solid rgba(230, 57, 70,0.1); padding: 12px 24px; color: var(--green); font-size: 0.8rem; font-family: var(--font-mono); z-index: 1;}
.terminal-header .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.terminal-header .dot.red { background: #ff5f56; box-shadow: 0 0 10px rgba(255,95,86,0.4); }
.terminal-header .dot.yellow { background: #ffbd2e; box-shadow: 0 0 10px rgba(255,189,46,0.4); }
.terminal-header .dot.green { background: #27c93f; box-shadow: 0 0 10px rgba(39,201,63,0.4); }
.terminal-card-body { padding: 20px 0 0; display: flex; flex-direction: column; gap: 24px; z-index: 1; position: relative;}

/* Protocol Overview Reading UI (Structured Modules) */
.terminal-card-body p { 
    position: relative; font-size: 1.1rem; line-height: 1.8; color: var(--text-muted); 
    padding: 24px 30px; transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); 
    font-family: var(--font-body); 
    background: rgba(255,255,255,0.01); border: 1px solid rgba(255,255,255,0.03); 
    border-radius: 16px; border-left: 3px solid rgba(230, 57, 70,0.1); 
}
.terminal-card-body p::before { 
    display: block; font-size: 0.75rem; font-weight: 700; color: var(--green); 
    letter-spacing: 2px; text-transform: uppercase; font-family: var(--font-mono); 
    margin-bottom: 16px; opacity: 0.8;
}
.terminal-card-body p:nth-child(1)::before { content: 'IDX_01 // CORE_ARCHITECTURE'; }
.terminal-card-body p:nth-child(2)::before { content: 'IDX_02 // MEME_UTILITY'; }
.terminal-card-body p:nth-child(3)::before { content: 'IDX_03 // NETWORK_STATE'; }

.terminal-card-body p:hover { 
    background: rgba(230, 57, 70,0.02); border-color: rgba(230, 57, 70,0.15); 
    border-left: 3px solid var(--green); color: #e0e6e2; 
    transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.3), inset 0 2px 10px rgba(255,255,255,0.02); 
}

.terminal-card-body p .hl { color: #fff; font-weight: 700; text-shadow: 0 0 10px rgba(230, 57, 70, 0.3); }

.terminal-footer { margin-top: 40px; text-align: right; font-family: var(--font-mono); font-size: 1.1rem; color: var(--green); background: linear-gradient(90deg, transparent, rgba(230, 57, 70,0.05)); padding: 20px 30px; border-radius: 12px; letter-spacing: 1px; border: 1px solid rgba(230, 57, 70,0.05); z-index: 1; position: relative;}
.terminal-footer::after { content: '_'; display: inline-block; animation: blink 1s step-end infinite; margin-left: 6px; }
@keyframes blink { 50% { opacity: 0; } }

/* Feature Cards (Plasma Hover) */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { background: var(--bg-glass); border: 1px solid rgba(255,255,255,0.03); border-radius: 24px; padding: 40px; transition: border-color 0.4s, box-shadow 0.4s, background 0.4s; position: relative; overflow: hidden; perspective: 1000px; transform-style: preserve-3d; will-change: transform; }

/* The Light Sweep */
.feature-card::before { content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(230, 57, 70,0.15), transparent); transform: skewX(-20deg); transition: 0s; z-index: 0; pointer-events: none; }
.feature-card:hover::before { left: 200%; transition: 0.7s ease-in-out; }

/* Edge Glow Mask */
.feature-card::after { content: ''; position: absolute; inset: 0; border: 2px solid transparent; border-radius: 24px; background: linear-gradient(135deg, rgba(230, 57, 70,0) 40%, var(--green) 100%) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; opacity: 0; transition: 0.4s; pointer-events: none; z-index: 2;}
.feature-card:hover::after { opacity: 1; }

.feature-card:hover { border-color: rgba(230, 57, 70,0.3); box-shadow: 0 20px 40px rgba(0,0,0,0.4), inset 0 0 30px rgba(230, 57, 70,0.05); background: rgba(10,20,15,0.8); }
.feature-card .icon { color: var(--green); font-size: 2.2rem; margin-bottom: 24px; transform: translateZ(30px); display: inline-block; position: relative; z-index: 1; }
.feature-card h3 { font-size: 1.4rem; margin-bottom: 12px; transform: translateZ(20px); position: relative; z-index: 1; }
.feature-card p { color: var(--text-muted); font-size: 1rem; line-height: 1.7; transform: translateZ(10px); position: relative; z-index: 1; }

.card-glare { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(230, 57, 70, 0.3) 0%, transparent 60%); border-radius: 50%; pointer-events: none; top: -150px; left: -150px; opacity: 0; transition: opacity 0.4s; z-index: 10; mix-blend-mode: screen; }

/* Ecosystem App */
.eco-card { background: var(--bg-glass); border-radius: 32px; border: 1px solid rgba(255,255,255,0.05); overflow: hidden; }
.eco-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 30px; border-bottom: 1px solid rgba(255,255,255,0.05); background: linear-gradient(90deg, rgba(230, 57, 70,0.12), transparent); }
.eco-status { display: flex; align-items: center; gap: 8px; }
.eco-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.eco-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 10px var(--glow); animation: pulseDot 2s infinite; }
.eco-badge { font-size: 0.7rem; color: var(--green); background: rgba(230, 57, 70,0.1); border: 1px solid rgba(230, 57, 70,0.2); padding: 4px 12px; border-radius: 6px; letter-spacing: 1px; font-weight: 600; }
@keyframes pulseDot { 0% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.5; transform: scale(0.9); } }
.eco-body { display: flex; flex-direction: column; padding: 50px 60px 50px; }

/* Ecosystem Splitting */
.eco-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; width: 100%; }
.eco-info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.eco-title { font-size: 3.5rem; margin-bottom: 16px; color: #fff; letter-spacing: -1.5px; line-height: 1.1; }
.eco-tagline { color: var(--text-muted); font-size: 1.15rem; margin-bottom: 40px; line-height: 1.6; max-width: 500px; }

/* Metrics */
.eco-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 40px; width: 100%; max-width: 500px; }
.eco-metric { background: rgba(230, 57, 70,0.02); padding: 16px; border-radius: 16px; border: 1px solid rgba(230, 57, 70,0.05); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; transition: 0.3s; }
.eco-metric:hover { border-color: rgba(230, 57, 70,0.3); background: rgba(230, 57, 70,0.05); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.eco-metric-icon { color: var(--green); font-size: 1.2rem; background: rgba(230, 57, 70,0.1); width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 10px rgba(230, 57, 70,0.2); flex-shrink: 0; }
.eco-metric-label { font-size: 0.95rem; color: #fff; font-weight: 600; letter-spacing: 0.5px; }

.eco-cta { display: flex; justify-content: center; width: 100%; max-width: 500px; margin-top: 10px; }
.eco-btn { display: inline-flex; align-items: center; gap: 12px; background: rgba(230, 57, 70,0.05); border: 1px solid var(--green); color: var(--green) !important; text-shadow: 0 0 10px var(--glow) !important; padding: 18px 50px; border-radius: 100px; font-weight: 700; font-size: 1.15rem; box-shadow: inset 0 0 20px rgba(230, 57, 70,0.1), 0 4px 20px rgba(230, 57, 70,0.15); transition: 0.3s; letter-spacing: 2px; }
.eco-btn:hover { background: var(--green); color: #000 !important; text-shadow: none !important; box-shadow: 0 8px 30px rgba(230, 57, 70,0.4); transform: translateY(-3px); }

/* The Visual Showcase (CSS Holographic Phone) */
.eco-visual { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; perspective: 1200px; width: 100%; }

.eco-phone {
    width: 270px; height: 550px; border-radius: 40px; background: rgba(2,5,2,0.8);
    border: 2px solid rgba(255,255,255,0.1); box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 0 4px rgba(0,0,0,1), 0 0 50px rgba(230, 57, 70,0.1);
    position: relative; overflow: hidden; transform: rotateY(-20deg) rotateX(10deg) translateZ(40px);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s; transform-style: preserve-3d;
}
.eco-card:hover .eco-phone { transform: rotateY(-10deg) rotateX(5deg) translateZ(60px); box-shadow: 0 40px 80px rgba(0,0,0,0.8), inset 0 0 0 4px rgba(0,0,0,1), 0 0 70px rgba(230, 57, 70,0.25); }

.eco-phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 28px; background: #000; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; z-index: 10; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05); }

.eco-phone-screen { width: 100%; height: 100%; background: linear-gradient(180deg, #050a08 0%, #08120d 100%); display: flex; flex-direction: column; overflow: hidden; position: relative; border-radius: 36px;}
/* Simulated Telegram Header */
.eco-screen-header { display: flex; justify-content: space-between; align-items: center; padding: 45px 20px 16px; background: rgba(255,255,255,0.03); color: #fff; font-size: 0.95rem; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* Simulated Game Body */
.eco-screen-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }

/* 3D Dice Integration (Replacing static coin) */
.eco-dice-container {
    width: 150px; height: 150px;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 5;
}
.eco-dice-container::before {
    content: ''; position: absolute; width: 100px; height: 100px;
    background: var(--green); filter: blur(40px); opacity: 0.15;
    animation: tapPulse 2s infinite; z-index: -1;
}
.eco-cloud {
    font-size: 5rem; color: #c0c0c0;
    filter: drop-shadow(0 0 20px rgba(230, 57, 70, 0.3));
    animation: cloudFloat 4s ease-in-out infinite;
}
@keyframes cloudFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

@keyframes tapPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

.eco-screen-data { margin-top: 40px; width: 80%; display: flex; flex-direction: column; gap: 14px; }
.eco-data-bar { height: 18px; background: rgba(255,255,255,0.05); border-radius: 9px; width: 100%; position: relative; overflow: hidden; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }
.eco-data-bar::after { content: ''; position: absolute; top:0; left:0; height: 100%; width: 45%; background: var(--green); box-shadow: 0 0 15px var(--green); border-radius: 9px; }
.eco-data-bar.short { width: 75%; margin: 0 auto; }
.eco-data-bar.short::after { width: 80%; background: #c0c0c0; box-shadow: 0 0 15px #c0c0c0;}

/* Simulated Telegram Footer */
.eco-screen-nav { display: flex; justify-content: space-around; padding: 20px; background: rgba(0,0,0,0.6); border-top: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.3); font-size: 1.3rem; }
.eco-screen-nav i:first-child { color: var(--green); text-shadow: 0 0 15px var(--glow); }

/* Floating context objects */
.eco-float { position: absolute; width: 64px; height: 64px; background: rgba(10,15,12,0.9); border: 1px solid rgba(230, 57, 70,0.25); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--green); box-shadow: 0 15px 30px rgba(0,0,0,0.6); backdrop-filter: blur(12px); transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; z-index: -1;}
.eco-float.eco-fl-1 { top: 5%; right: 10%; transform: translateZ(10px) rotate(15deg); animation: floatCoinX 5s ease-in-out infinite; }
.eco-float.eco-fl-2 { bottom: 15%; left: 5%; transform: translateZ(20px) rotate(-20deg); animation: floatCoinY 6s ease-in-out infinite alternate; }

.eco-card:hover .eco-fl-1 { transform: translateZ(50px) rotate(25deg) translateY(-20px); box-shadow: 0 25px 40px rgba(230, 57, 70,0.15); }
.eco-card:hover .eco-fl-2 { transform: translateZ(60px) rotate(-10deg) translateY(20px) translateX(-20px); box-shadow: 0 25px 40px rgba(230, 57, 70,0.15); }

@keyframes floatCoinX { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes floatCoinY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
/* Ledger Matrix (Tokenomics) */
.ledger-matrix { max-width: 900px; margin: 0 auto 40px; background: rgba(5,10,8,0.6); border: 1px solid rgba(230, 57, 70,0.1); border-radius: 24px; padding: 24px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.ledger-header { display: grid; grid-template-columns: 0.5fr 1fr 1.5fr; gap: 20px; padding: 0 24px 16px; border-bottom: 1px dashed rgba(230, 57, 70,0.2); margin-bottom: 16px; }
.lh-col { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; text-align: left; }

.ledger-body { display: flex; flex-direction: column; gap: 12px; }
.ledger-row { display: grid; grid-template-columns: 0.5fr 1fr 1.5fr; gap: 20px; align-items: center; background: rgba(230, 57, 70,0.02); border: 1px solid rgba(230, 57, 70,0.05); padding: 16px 24px; border-radius: 16px; transition: 0.3s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden; text-align: left; }
.ledger-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--green); transform: scaleY(0); transition: transform 0.3s; transform-origin: center; box-shadow: 0 0 10px var(--green); }
.ledger-row:hover { background: rgba(230, 57, 70,0.06); border-color: rgba(230, 57, 70,0.2); transform: translateX(8px); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
.ledger-row:hover::before { transform: scaleY(1); }

.ld-col { color: #fff; font-family: var(--font-mono); font-size: 1.1rem; }
.stage-badge .stage-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(230, 57, 70,0.1); border: 1px solid rgba(230, 57, 70,0.3); border-radius: 8px; color: var(--green); font-weight: 800; text-shadow: 0 0 10px rgba(230, 57, 70,0.5); font-size: 1.2rem; }
.block-range { color: #a1b0a5; letter-spacing: 0.5px; }
.reward-range { font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reward-range .dice { color: var(--green); font-size: 1.4rem; filter: drop-shadow(0 0 5px rgba(230, 57, 70,0.5)); transition: 0.3s; }
.ledger-row:hover .dice { transform: rotate(180deg) scale(1.2); }

/* Table / Specs */
.table-wrap { background: var(--bg-glass); border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); overflow-x: auto; max-width: 900px; margin: 0 auto 40px; }
table { width: 100%; border-collapse: collapse; text-align: left; }
thead { background: rgba(255,255,255,0.03); }
th { padding: 24px; font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid rgba(255,255,255,0.05); }
td { padding: 24px; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.02); color: var(--text-main); font-family: var(--font-mono); }
tbody tr:hover { background: rgba(230, 57, 70,0.03); }

.spec-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
.spec-box { background: rgba(5,10,8,0.7); padding: 20px 24px; border-radius: 16px; border: 1px solid rgba(230, 57, 70,0.1); text-align: center; box-shadow: inset 0 0 20px rgba(230, 57, 70,0.02); backdrop-filter: blur(10px); transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden; }
.spec-box::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--green); transform: scaleX(0); transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 0 10px var(--green); }
.spec-box:hover { transform: translateY(-5px); border-color: rgba(230, 57, 70,0.3); box-shadow: 0 15px 30px rgba(0,0,0,0.5), inset 0 0 20px rgba(230, 57, 70,0.05); background: rgba(10,20,15,0.9); }
.spec-box:hover::before { transform: scaleX(1); }

.spec-label { display: block; color: var(--text-muted); font-size: 0.75rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.spec-value { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.4rem; font-weight: 800; color: var(--green); font-family: var(--font-mono); text-shadow: 0 0 10px rgba(230, 57, 70,0.3); }

/* The Uplink Status Blinking Light */
.uplink-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: uplinkBlink 1s infinite alternate; display: inline-block; flex-shrink: 0; }
@keyframes uplinkBlink { 0% { opacity: 0.3; transform: scale(0.8); box-shadow: 0 0 5px var(--green); } 100% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 15px var(--green); } }

/* Downloads */
.download-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; align-items: stretch; }
.download-card { 
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 50%, rgba(0,0,0,0.3) 100%); 
    border: 1px solid rgba(255,255,255,0.06); 
    border-bottom: 2px solid var(--c-glow); /* Permanent subtle colored baseline */
    border-radius: 20px; 
    padding: 32px 20px !important;
    text-align: center; 
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); 
    position: relative; 
    overflow: hidden; 
    display: flex !important; 
    flex-direction: column !important;
    width: 100%;
    height: 100% !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); 
}

/* Ambient Glow Removed due to WebKit Bug */

/* OS Theming */
.download-card:nth-child(1) { --c-theme: #c0c0c0; --c-glow: rgba(192, 192, 192, 0.2); } /* Windows - Silver */
.download-card:nth-child(2) { --c-theme: #e63946; --c-glow: rgba(230, 57, 70, 0.2); } /* Linux - Red */
.download-card:nth-child(3) { --c-theme: #a8b4c0; --c-glow: rgba(168, 180, 192, 0.25); } /* macOS */
.download-card:nth-child(4) { --c-theme: #c0c0c0; --c-glow: rgba(192, 192, 192, 0.2); } /* Android - Silver */
.download-card:nth-child(5) { --c-theme: #e63946; --c-glow: rgba(230, 57, 70, 0.2); } /* Chrome - Red */

.download-card:hover { border-color: rgba(255,255,255,0.15); border-bottom-color: var(--c-theme); box-shadow: 0 20px 50px var(--c-glow), inset 0 1px 0 rgba(255,255,255,0.1); background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.4) 100%); transform: translateY(-4px); }
.download-card .icon { color: var(--c-theme); opacity: 0.7; font-size: 2.8rem; margin-bottom: 24px; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); display: inline-block; filter: drop-shadow(0 0 10px rgba(255,255,255,0.02)); }
.download-card:hover .icon { opacity: 1; filter: drop-shadow(0 0 25px var(--c-glow)); transform: scale(1.15); }

/* Elegant Glass Divider */
.download-card h3 { 
    margin: 0 0 16px; 
    font-size: 1.2rem; 
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 16px;
    color: #fff;
}

/* DL Buttons Layout */
.dl-buttons { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.dl-buttons a { padding: 12px 10px !important; font-size: 0.8rem !important; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 10px; letter-spacing: 0.5px; font-weight: 700; }

/* Adapting Buttons to inherit OS Color */
.download-card .btn-primary { 
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%) !important; 
    color: #fff !important; 
    border: 1px solid rgba(255,255,255,0.2) !important; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 15px rgba(0,0,0,0.2) !important; 
    backdrop-filter: blur(10px);
}
.download-card .btn-outline { 
    background: rgba(0,0,0,0.3) !important; 
    color: var(--text-muted) !important; 
    border: 1px solid rgba(255,255,255,0.08) !important; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important; 
}

.download-card:hover .btn-primary { background: var(--c-glow) !important; border-color: var(--c-theme) !important; color: #fff !important; box-shadow: 0 0 30px var(--c-glow), inset 0 1px 0 rgba(255,255,255,0.3) !important; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
.download-card:hover .btn-outline { border-color: rgba(255,255,255,0.15) !important; color: #fff !important; background: rgba(255,255,255,0.03) !important; }

.download-card .btn-primary:hover { transform: translateY(-2px); background: var(--c-theme) !important; color: #000 !important; box-shadow: 0 0 40px var(--c-glow), inset 0 0 0 1px rgba(255,255,255,1) !important; text-shadow: none; }
.download-card .btn-outline:hover { background: var(--c-glow) !important; color: var(--c-theme) !important; border-color: var(--c-theme) !important; box-shadow: 0 0 20px var(--c-glow) !important; transform: translateY(-2px); }

/* macOS Hint Text Setup */
/* macOS Hint Text Setup */
.mac-hint { font-size: 0.65rem; opacity: 0.4; margin-top: 10px; line-height: 1.3; color: var(--text-muted); transition: 0.3s; }
.download-card:hover .mac-hint { opacity: 0.8; color: #fff; }

/* Community Links Enhanced */
.community-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* Brand mapping */
.community-links a:nth-child(1) { --c-brand: #e63946; --c-glow: rgba(230, 57, 70, 0.2); } /* LuckyPoint / Red */
.community-links a:nth-child(2) { --c-brand: #c0c0c0; --c-glow: rgba(192, 192, 192, 0.2); } /* Telegram - Silver */
.community-links a:nth-child(3) { --c-brand: #c0c0c0; --c-glow: rgba(192, 192, 192, 0.2); } /* Telegram - Silver */
.community-links a:nth-child(4) { --c-brand: #5865F2; --c-glow: rgba(88, 101, 242, 0.2); } /* Discord */
.community-links a:nth-child(5) { --c-brand: #e63946; --c-glow: rgba(230, 57, 70, 0.2); } /* X / Twitter - Red */
.community-links a:nth-child(6) { --c-brand: #c0c0c0; --c-glow: rgba(192, 192, 192, 0.25); } /* GitHub - Silver */

.community-links a { 
    display: flex; align-items: center; gap: 12px; background: rgba(5,10,8,0.7); 
    padding: 16px 28px; border-radius: 18px; 
    color: var(--text-main); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative; overflow: hidden; backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); /* Standby inner border */
    z-index: 1; /* Establishes stacking context */
}
.community-links a::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(transparent, var(--c-brand), transparent 30%);
    animation: rotateConic 4s linear infinite;
    opacity: 0.35; transition: opacity 0.4s; z-index: -2; /* Idle energized state */
}
.community-links a::before { content: ''; position: absolute; inset: 1px; background: rgba(8,12,10,0.95); border-radius: 17px; z-index: -1; }
.community-links a i { position: relative; color: var(--c-brand); font-size: 1.25rem; transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); filter: drop-shadow(0 0 8px var(--c-glow)); } /* Permanent Colored Icons */
.community-links a span { position: relative; }

.community-links a:hover { transform: translateY(-5px); color: #fff; box-shadow: inset 0 0 0 0px rgba(255,255,255,0), 0 15px 35px var(--c-glow); }
.community-links a:hover::after { opacity: 1; animation: rotateConic 2s linear infinite; } /* Spin faster, full power */
.community-links a:hover i { transform: scale(1.15) rotate(5deg); color: #fff; filter: drop-shadow(0 0 15px var(--c-brand)); }

@keyframes rotateConic { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* The 'Listed On' sector */
.listed-on-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; }
.listed-on-links a { 
    display: flex; align-items: center; justify-content: center; 
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid rgba(255, 255, 255, 0.06); 
    padding: 12px 24px; border-radius: 12px; 
    color: rgba(255,255,255,0.6); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; font-weight: 600;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.listed-on-links a img { filter: grayscale(1) brightness(1.2) contrast(1.2); opacity: 0.7; transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); }

.listed-on-links a:hover { 
    background: rgba(230, 57, 70,0.03); 
    border-color: rgba(230, 57, 70,0.25); 
    color: #fff; 
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 0 15px rgba(230, 57, 70,0.05); 
}
.listed-on-links a:hover img { filter: grayscale(0) brightness(1) contrast(1); opacity: 1; transform: scale(1.1); }
footer { text-align: center; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.05); color: var(--text-muted); font-size: 0.85rem; }

/* Animations */
.reveal { opacity: 0; transform: translateY(30px); transition: 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; }

/* Responsive adjustments */
@media(max-width: 1024px) {
	body.nav-open { overflow: hidden; }

	.hero { 
		display: flex; flex-direction: column; text-align: center; 
		padding-top: 140px; gap: 50px; align-items: center; justify-content: center;
	}
	.hero-left { width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
	.hero-right { width: 100%; display: flex; justify-content: center; }
	.logo-glow { max-width: 400px; } /* Slightly scale down on mobile to prevent overflow */
	.hero-subtitle { margin: 0 auto 30px; }
	.hero-buttons { justify-content: center; }
	.live-log-container { text-align: left; width: 100%; max-width: 600px; margin: 0 auto; }
	.trade-wrapper { justify-content: center; }
	.features-grid, .download-grid, .spec-boxes { grid-template-columns: repeat(2, 1fr); }
	
    /* Eco Card Overrides for Mobile */
    .eco-content-grid { grid-template-columns: 1fr; gap: 60px; }
    .eco-info { align-items: center; text-align: center; }
    .eco-title { font-size: 2.8rem; }
    .eco-tagline { margin: 0 auto 30px; }
    .eco-cta { justify-content: center; }
    .eco-visual { width: 100%; }

	/* Ledger Matrix Mobile Overrides */
	.ledger-header { display: none; } /* Hide headers on very small screens, let blocks speak for themselves */
	.ledger-row { grid-template-columns: 1fr; gap: 10px; padding: 20px; text-align: center; }
	.ledger-row:hover { transform: translateY(-4px); } /* Override hover to vertical on mobile */
	.ledger-row::before { top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 4px; transform: scaleX(0); }
	.ledger-row:hover::before { transform: scaleX(1); }
	.ld-col.reward-range { justify-content: center; }
}
/* Hamburger Menu Base & Mobile Scroll Fix */
@media(max-width: 1024px) {
	body.nav-open { overflow: hidden; }

	.navbar { justify-content: space-between; padding: 0 20px; }
	.nav-brand { position: static; }
	.nav-links { 
		display: none; position: absolute; top: 72px; left: 0; width: 100%; 
        max-height: calc(100vh - 72px); overflow-y: auto; /* CRITICAL MOBILE SCROLL FIX */
		background: rgba(5,10,8,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); 
		flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 20px 24px 60px; gap: 12px; 
		border-bottom: 1px solid rgba(255,255,255,0.05); 
	}
	.nav-links.open { display: flex; }
	.nav-links li { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
	.nav-links a { width: 100%; justify-content: flex-start; position: relative; padding: 14px 0; font-size: 1.15rem; }
	.nav-links .nav-dropdown > a::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-left: 0; font-size: 0.9rem; }
	
    /* Proper Mobile Submenu Hierarchy */
    .nav-links .nav-dropdown-menu { 
		position: static; width: 100%; text-align: left; background: transparent; 
		box-shadow: none; border: none; padding-top: 0; display: none !important;
        visibility: hidden; opacity: 0; pointer-events: none;
        padding-left: 20px; /* Indent submenus */
        border-left: 1px solid rgba(255,255,255,0.05);
        margin-top: 5px; margin-bottom: 10px;
	}
    /* Downgrade font size and color of children to create hierarchy */
    .nav-links .nav-dropdown-menu a {
        font-size: 0.95rem; color: rgba(255,255,255,0.7); padding: 10px 0;
    }
	/* RELY PURELY ON ACCORDION JS FOR MOBILE, NEVER HOVER */
    .nav-links .nav-dropdown.open > .nav-dropdown-menu { 
        display: block !important; visibility: visible; opacity: 1; pointer-events: auto;
    }
	
    /* Strip elite menu styling on mobile so it blends in */
    .nav-dropdown-menu.elite-menu { min-width: auto; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; margin-left: 0;}
    .nav-dropdown-menu.elite-menu .elite-item { justify-content: flex-start !important; padding: 10px 0 !important; }
    .nav-dropdown-menu.elite-menu a:hover { background: transparent !important; }
	.nav-toggle { display: block; margin-left: auto; }
}
@media(max-width: 768px) {
	.navbar { padding: 0 24px; }
	.nav-brand { font-size: 1.2rem; }
	.nav-links { padding: 24px; }
	.features-grid, .download-grid, .spec-boxes { grid-template-columns: 1fr; }
	.eco-metrics { grid-template-columns: 1fr; } /* Stack vertically down */
	
	/* Adjust Ledger for super small */
	.ledger-matrix { padding: 16px; border-radius: 16px; }
	.stage-badge .stage-num { width: 44px; height: 44px; font-size: 1.4rem; }
	
	.inst-grid { grid-template-columns: 1fr; text-align: center; gap: 20px; }
	.inst-col-data { border-left: none; border-top: 1px dashed rgba(255,255,255,0.05); padding-left: 0; padding-top: 20px; }
	.inst-col-action { align-items: center; }
	section { padding: 50px 20px; }
	.section-title { margin-bottom: 30px; }
	.community-links { gap: 12px; }
	.community-links a { padding: 12px 20px; font-size: 0.85rem; }
	.listed-on-links { flex-direction: column; align-items: center; gap: 12px; }
	.listed-on-links a { width: 100%; max-width: 280px; justify-content: center; filter: grayscale(0); opacity: 0.7; }
	#community > div[style] { margin-top: 30px !important; padding-top: 24px !important; }
	.terminal-card { padding: 60px 24px 30px; }
	.terminal-card-body { gap: 20px; }
	.terminal-card-body p { font-size: 1rem; padding-left: 16px; }
	.eco-body { padding: 30px 20px; }
}
.inst-divider { display: none; }

#custom-cursor { width: 10px; height: 10px; background: var(--green); position: fixed; border-radius: 50%; pointer-events: none; z-index: 10000; mix-blend-mode: screen; transform: translate(-50%, -50%); box-shadow: 0 0 15px var(--green); }
#cursor-follower { width: 40px; height: 40px; border: 1.5px solid rgba(230, 57, 70, 0.4); position: fixed; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: screen; transform: translate(-50%, -50%); box-shadow: 0 0 20px rgba(230, 57, 70, 0.1); transition: width 0.3s, height 0.3s, border-color 0.3s; }
.cursor-active #cursor-follower { width: 80px; height: 80px; background: rgba(230, 57, 70, 0.1); border-color: rgba(230, 57, 70, 0.8); }
@media (pointer: coarse) { #custom-cursor, #cursor-follower { display: none !important; } }

/* Shared glassmorphism base */
.feature-card, .eco-card, .download-card, .table-wrap, .spec-box, .inst-trade-card {
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    background: linear-gradient(145deg, rgba(20, 25, 22, 0.5), rgba(5, 10, 8, 0.8)) !important;
    border: 1px solid rgba(230, 57, 70, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* --- Global polish --- */

/* Cinematic Film Grain / Noise Overlay */
.cinematic-noise {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 10000; opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}


/* Magnetic Button Override */
.btn-primary, .btn-outline, .eco-btn, .inst-btn {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s, background 0.4s, color 0.4s !important;
    will-change: transform;
}





h1, h2, h3, .nav-brand, .eco-title, .section-title h2, th {
    font-family: var(--font-mono);
    letter-spacing: -0.03em; /* Premium tight leading */
}


/* --- Exchange dropdown styling --- */
.nav-dropdown-menu.elite-menu {
    min-width: 160px; /* Expand width for data nodes */
    padding: 8px !important;
    background: rgba(8, 12, 10, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.nav-dropdown-menu.elite-menu .elite-item {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 16px;
    align-items: center !important;
    padding: 12px 14px !important;
    width: 100% !important;
    border-radius: 6px;
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
    font-size: 0.9rem;
    transition: all 0.2s ease !important;
}
.nav-dropdown-menu.elite-menu .elite-item::before { display: none !important; } /* Kill old simple arrow */
.nav-dropdown-menu.elite-menu .elite-item:hover {
    background: rgba(230, 57, 70, 0.05);
}
.elite-left { display: flex; align-items: center; gap: 10px; color: #fff; }
.elite-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 6px var(--dim-green);
    animation: elitePulse 2s infinite ease-in-out;
}
@keyframes elitePulse {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 10px var(--green); }
}
.elite-item:hover .elite-dot {
    animation: none;
    opacity: 1; transform: scale(1.2);
    box-shadow: 0 0 12px var(--green);
}
.elite-right { display: flex; align-items: center; gap: 10px; }
.elite-badge {
    font-size: 0.65rem; color: rgba(255,255,255,0.4);
    padding: 2px 6px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px; transition: 0.3s;
}
.elite-item:hover .elite-badge {
    color: var(--green); border-color: rgba(230, 57, 70, 0.3);
}
.elite-item i {
    font-size: 0.75rem; color: rgba(255,255,255,0.2); transition: 0.3s;
}
.elite-item:hover i { color: var(--green); transform: translate(2px, -2px); }

/* --- Mobile Bug Fixes --- */
@media (max-width: 768px) {
    /* Bug 1: Fix overlapping Mac Terminal title with traffic lights */
    .live-log-container::before {
        content: "NODE.TERMINAL // V1.0";
        font-size: 0.65rem;
        padding-left: 70px;
    }
    /* Bug 2: Fix floating shapes creating weird blobs on mobile edges (top-right & bottom-left) */
    .eco-float {
        display: none !important;
    }
}